Adds customizable blocks for card and list templates

YesWiki · Jan 18, 2025 · e153a79 · e153a79
1 parent dedcf8c
commit e153a79
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 8 deletions.
diff --git a/tools/bazar/templates/entries/index-dynamic-templates/card.twig b/tools/bazar/templates/entries/index-dynamic-templates/card.twig
@@ -8,21 +8,26 @@
   {% set nbcol = params.nbcol %}
   {% set isModal = (params.entrydisplay == 'modal' or params.entrydisplay is empty or params.entrydisplay not in ['modal','direct','newtab']) %}
   {% set isLink = isModal or (params.entrydisplay == 'direct') %}
+
   {# Restrict number of columns for horizontal card #}
   {% if nbcol > 2 and params.displayfields.visual and params.style == "horizontal" %}
     {% set nbcol =  2 %}
     {{ include('@templates/alert-message.twig',{type:'info',message:_t('BAZ_CARD_NBCOL_TOO_HIGH')}) }}
   {% endif %}
+
   {% set imWidth = (nbcol == 4) ? 250 : (nbcol == 5 ? 200 : 300 ) %}
   {% set imHeight = params.style == "square" ? imWidth : (params.style == "horizontal" ? imWidth*23//27 : imWidth*2//3 ) %}
   {% set firstTokenCrop = csrfToken("POST api/images/cache/#{imWidth}/#{imHeight}/fit") %}
+
   <div class="bazar-cards-container" v-if="ready" 
        :class="[{ready: ready}, `style-${params.style || 'vertical'}`, `nbcol-{{nbcol}}`]" 
        :style="{'grid-template-columns': `repeat({{nbcol}}, minmax(0, 1fr))`}">
 
+    {% block no_result %}
     <div v-if="entriesToDisplay.length == 0" class="alert alert-info">
-      {{ _t('BAZ_NO_RESULT') }}
+        {{ _t('BAZ_NO_RESULT') }}
     </div>
+    {% endblock %}
 
     {% if isLink %}<a{% else %}<div{% endif %} v-for="entry in entriesToDisplay" :key="entry.id_fiche" 
         class="bazar-entry bazar-card{{ isModal ? ' modalbox' : ''}}"
@@ -38,6 +43,7 @@
         >
 
       {# VISUAL AREA #}
+      {% block area_visual %}
       <template v-if="Object.keys(entry).includes('visual')">
         <template v-if="entry.visual">
           <img 
@@ -49,34 +55,48 @@
           <div v-if="params.style != 'square'" class="area visual-area" 
             :style="{color:'blue','background-size':params.imgstyle ,'background-image': `url('${urlImage(entry,'visual',{{ imWidth }},{{ imHeight }},'fit')}')`}">
           </div>
-         
+
         </template>
         <div v-else class="area area visual-area placeholder"></div>
       </template>
+      {% endblock %}
 
       <div class="content">
         {# TITLE AREA #}
+        {% block area_title %}
         <h4 div class="area title-area" v-if="entry.title">
           <span v-show="entry.color" class="pellet" :style="{'background-color': entry.color}"></span>
           <i v-show="entry.icon" :class="entry.icon"></i>
           <entry-field :entry="entry" prop="title" class="title"></entry-field>
         </h4>  
+        {% endblock %}
 
         {# SUBTITLE AREA #}
-        <entry-field :entry="entry" prop="subtitle" class="area subtitle-area line-clamp" :style="{'webkit-line-clamp': params.nblines}"></entry-field>  
-
+        {% block area_subtitle %}
+          <entry-field :entry="entry" prop="subtitle" class="area subtitle-area line-clamp" :style="{'webkit-line-clamp': params.nblines}"></entry-field>  
+        {% endblock %}
+
         {# TEXT AREA #}
-        <entry-field :entry="entry" prop="text" class="area text-area"></entry-field>
+        {% block area_text %}
+          <entry-field :entry="entry" prop="text" class="area text-area"></entry-field>
+        {% endblock %}
 
         {# FOOTER AREA #}
-        <entry-field :entry="entry" prop="footer" class="area footer-area"></entry-field>
+        {% block area_footer %}
+          <entry-field :entry="entry" prop="footer" class="area footer-area"></entry-field>
+        {% endblock %}
 
         {# FLOATING AREA #}
-        <entry-field :entry="entry" prop="floating" class="area floating-area"></entry-field>
+        {% block area_floating %}
+          <entry-field :entry="entry" prop="floating" class="area floating-area"></entry-field>
+        {% endblock %}
       </div>
     {% if isLink %}</a>{% else %}</div>{% endif %}
 
     <spinner-loader v-if="isLoading" class="overlay"></spinner-loader>
   </div>
   <spinner-loader v-else height="500"></spinner-loader>
+
+  {% block extra %}
+  {% endblock %}
 {% endblock %}
diff --git a/tools/bazar/templates/entries/index-dynamic-templates/list.twig b/tools/bazar/templates/entries/index-dynamic-templates/list.twig
@@ -5,39 +5,59 @@
   {% set imHeight = 170 %}
   {% set firstTokenCrop = csrfToken("POST api/images/cache/#{imWidth}/#{imHeight}/crop") %}
   <div class="panel-group no-dblclick" style="opacity: 0;" :class="{ready: ready}" v-if="ready">
+
+    {% block no_result %}
     <div v-if="entriesToDisplay.length == 0" class="alert alert-info">
-      {{ _t('BAZ_NO_RESULT') }}
+        {{ _t('BAZ_NO_RESULT') }}
     </div>
+    {% endblock %}
+
     <Panel v-for="entry in entriesToDisplay" :key="entry.id_fiche" class="bazar-entry" 
            @opened="getEntryRender(entry)">
       <template #header>
         <div class="panel-heading-container" :class="{'with-image': entry.visual}">
           {# VISUAL AREA #}
+          {% block area_visual %}
           <div class="visual-area" v-if="entry.visual">
             <img
               loading="lazy"
               :src="urlImage(entry,'visual',{{ imWidth }},{{ imHeight }},'crop')"
               @error="urlImageResizedOnError(entry,'visual',{{ imWidth }},{{ imHeight }},'crop',{{ firstTokenCrop|json_encode }})">
             </img>
           </div>
+          {% endblock %}
+
           {# TITLE AREA #}
+          {% block area_visual %}
           <h4 div class="title-area panel-title">
             <span v-show="entry.color" class="pellet" :style="{'background-color': entry.color}"></span>
             <i v-show="entry.icon" :class="entry.icon"></i>
             <span class="title" v-html="entry.title || entry.bf_titre"></span>
           </h4>
+          {% endblock %}
+
           {# FLOATING AREA #}
+          {% block area_visual %}
           <entry-field :entry="entry" prop="floating" class="floating-area"></entry-field>
+          {% endblock %}
+
           {# SUBTITLE AREA #}
+          {% block area_visual %}
           <entry-field :entry="entry" prop="subtitle" class="subtitle-area"></entry-field>
+          {% endblock %}
         </div>
       </template>
       <template #body>
+        {% block entry_body %}
         <div v-if="entry.html_render" v-html="entry.html_render"></div>
         <spinner-loader v-else height="300"></spinner-loader>
+        {% endblock %}
       </template>
     </Panel>
     <spinner-loader v-if="isLoading" class="overlay"></spinner-loader>
   </div>
   <spinner-loader v-else height="500"></spinner-loader>
+
+  {% block extra %}
+  {% endblock %}
 {% endblock %}