fix(card.twig): define background-image and activate dynamic cache reset for it

fix #1021 (or hope it fix it)

Author: J9rem

tools/bazar/presentation/javascripts/bazar-list-dynamic.js

@@ -312,11 +312,18 @@ document.addEventListener('DOMContentLoaded', function() {
             cache: false,
             success: function (data){
               let previousUrl = $(newImageParams.node).prop('src');
-              if (data.cachefilename != previousUrl){
-                $(`img[src="${previousUrl}"]`).each(function(){
-                  $(this).prop('src',data.cachefilename);
-                });
-              }
+              let srcFileName = wiki.baseUrl.replace(/(\?)?$/,'')+data.cachefilename;
+              $(`img[src="${previousUrl}"]`).each(function(){
+                $(this).prop('src',srcFileName);
+                let next = $(this).next('div.area.visual-area[style]');
+                if (next.length > 0){
+                  let backgoundImage = $(next).css('background-image');
+                  if (backgoundImage != undefined && typeof backgoundImage == "string" && backgoundImage.length > 0){
+                      $(next).css('background-image',''); // reset to force update
+                      $(next).css('background-image',`url("${srcFileName}")`);
+                  }
+                }
+              });
             },
             complete: function (e){
               if (e.responseJSON != undefined && e.responseJSON.newToken != undefined ){

tools/bazar/templates/entries/index-dynamic-templates/card.twig

@@ -40,8 +40,16 @@
 
       {# VISUAL AREA #}
       <template v-if="Object.keys(entry).includes('visual')">
-        <img v-if="entry.visual" class="area visual-area" :src="urlImage(entry,'visual',{{ imWidth }},{{ imHeight }},'crop')"
-        @error="urlImageResizedOnError(entry,'visual',{{ imWidth }},{{ imHeight }},'crop',{{ firstTokenCrop|json_encode }})"></img>
+        <template v-if="entry.visual">
+          <img 
+            :style="{display:(params.style == 'square')? false : 'none'}" 
+            class="area visual-area" 
+            :src="urlImage(entry,'visual',{{ imWidth }},{{ imHeight }},'crop')"
+            @error="urlImageResizedOnError(entry,'visual',{{ imWidth }},{{ imHeight }},'crop',{{ firstTokenCrop|json_encode }})"></img>
+          <div v-if="params.style != 'square'" class="area visual-area" 
+            :style="{color:'blue','background-image': `url('${urlImage(entry,'visual',{{ imWidth }},{{ imHeight }},'crop')}')`}">
+          </div>
+        </template>
         <div v-else class="area area visual-area placeholder"></div>
       </template>