Support for left and right templates

components/viewer/ViewProjectObj.vue

@@ -14,14 +14,16 @@
       }"
       @click="toggle"
     >
-      <div class="project-obj-content">
-        <img
-          v-if="obj.image"
-          class="obj-image"
-          loading="lazy"
-          :src="obj.image"
-          :alt="obj.title"
-        />
+      <div class="project-obj-content" :class="objTemplateClass">
+        <div class="obj-image-wrapper">
+          <img
+            v-if="obj.image"
+            class="obj-image"
+            loading="lazy"
+            :src="obj.image"
+            :alt="obj.title"
+          />
+        </div>
         <div class="obj-content">
           <div class="obj-title">
             {{ obj.title }}
@@ -49,15 +51,20 @@
           </template>
           <ViewScores :scores="obj.scores" />
           <ViewRequirements :requireds="obj.requireds" />
-          <!-- eslint-disable-next-line vue/no-v-html -->
+          <!-- eslint-disable vue/no-v-html -->
           <div
             v-if="obj.text"
             class="obj-text"
             v-html="formatText(obj.text)"
           ></div>
+          <!-- eslint-enable vue/no-v-html -->
         </div>
+        <ViewAddon
+          v-for="(addon, idx) in obj.addons"
+          :key="idx"
+          :addon="addon"
+        />
       </div>
-      <ViewAddon v-for="(addon, idx) in obj.addons" :key="idx" :addon="addon" />
     </div>
   </div>
 </template>
@@ -79,12 +86,14 @@ const {
   preview = false,
   width = null,
   alwaysEnable = false,
+  template = null,
 } = defineProps<{
   row: ProjectRow;
   obj: ProjectObj;
   preview?: boolean;
   width?: string;
   alwaysEnable?: boolean;
+  template?: string;
 }>();
 
 const objClass = computed(() => {
@@ -99,6 +108,21 @@ const objClass = computed(() => {
   return ['col', { [className]: true }];
 });
 
+const objTemplateClass = computed(() => {
+  // Allow to override the template
+  // Used in the search results since the object view is always single-column
+  switch (template ?? obj.template) {
+    case '1':
+      return 'obj-template-top';
+    case '2':
+      return 'obj-template-left';
+    case '3':
+      return 'obj-template-right';
+  }
+
+  return 'obj-template-top';
+});
+
 const store = useProjectStore();
 const { selectedIds, selected } = useProjectRefs();
 
@@ -158,19 +182,47 @@ const decrement = () => {
 
   .project-obj-content {
     overflow: auto;
+
+    &.obj-template-top {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-rows: auto auto;
+      grid-template-areas: 'image' 'text';
+    }
+    &.obj-template-left {
+      display: grid;
+      grid-template-columns: 1fr 2fr;
+      grid-template-rows: 1fr;
+      grid-template-areas: 'image text';
+    }
+    &.obj-template-right {
+      display: grid;
+      grid-template-columns: 2fr 1fr;
+      grid-template-rows: 1fr;
+      grid-template-areas: 'text image';
+    }
   }
 
   &.notSelectable {
     border: none;
     border-radius: 0;
   }
 
+  .obj-image-wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+
+    grid-area: image;
+  }
   .obj-image {
     width: 100%;
+    object-fit: contain;
   }
 
   .obj-content {
     overflow-x: auto;
+    grid-area: text;
 
     .obj-title {
       margin-bottom: 5px;

components/viewer/modal/SearchModal.vue

@@ -38,6 +38,7 @@
             :obj="searchView.obj"
             :row="searchView.row"
             preview
+            template="1"
           />
         </div>
       </div>
@@ -171,6 +172,8 @@ const preview = (obj: ProjectObj, row: ProjectRow) => {
   display: grid;
   gap: 0.5em;
 
+  height: 100%;
+
   grid-template:
     'header header' auto
     'list list' 1fr
@@ -179,7 +182,7 @@ const preview = (obj: ProjectObj, row: ProjectRow) => {
   &.show-view {
     grid-template:
       'header header' auto
-      'list view' 1fr
+      'list view' auto
       / 2fr 1fr;
   }
 

components/viewer/style/engine.ts

@@ -198,10 +198,6 @@ export class ObjStylesGen extends StyleGenerator<ObjStyles> {
         object-fit: {{objectImgObjectFillStyle}};
         height: {{objectImgObjectFillHeight}}px;
         {{/if}}
-
-        {{#if objectImgOverflowIsOn}}
-        overflow: hidden;
-        {{/if}}
       }
       .addon {
         .text {
@@ -223,10 +219,6 @@ export class ObjStylesGen extends StyleGenerator<ObjStyles> {
       margin: {{objectMargin}}px;
       */
 
-      {{#if objectOverflowIsOn}}
-      overflow: hidden;
-      {{/if}}
-
       {{#if objectBorderIsOn}}
       border-color: {{objectBorderColor}};
       border-style: {{objectBorderStyle}};

composables/project.ts

@@ -178,6 +178,7 @@ export type ProjectObj = HasId &
 
     isPrivateStyling: boolean;
     styling: ObjStyles;
+    template: string;
   };
 
 export type ProjectRow = HasId &