fix for chrome and better images

templates/bazar/assets/activites.css

@@ -0,0 +1,219 @@
+.full-portrait-a4 {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(50%, 50%));
+  gap: 0;
+  justify-content: center;
+  width: 205mm;
+  height: 295mm;
+  border: 1px dotted #aaa;
+}
+.indications,
+.indications2 {
+  display: none;
+}
+.yw-main-content.alone .indications,
+.yw-main-content.alone .indications2,
+.include:last-child .indications,
+.include:last-child .indications2 {
+  display: block;
+}
+.indications img,
+.indications2 img {
+  width: 200mm;
+  height: 286mm;
+  display: block;
+  margin: 0 auto;
+}
+.left,
+.right {
+  padding: 8mm;
+  height: 285mm;
+  position: relative;
+}
+.right {
+  border-left: 1px dotted #aaa;
+}
+img {
+  border-radius: 0;
+}
+/* RECTO GAUCHE */
+
+/* RECTO DROITE */
+.recto .right {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 20mm 16mm 88mm 88mm 10mm 28mm 24mm;
+}
+.logo {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+}
+.main-logo {
+  width: 36mm;
+  margin-right: -2.7mm;
+}
+.main-title {
+  background-color: #759440 !important;
+  color: white !important;
+  font-size: 22px;
+  text-transform: uppercase;
+  padding: 2mm;
+  margin: 0;
+  line-height: 1.17em;
+  align-content: center;
+  overflow: hidden;
+}
+.description,
+.reponse {
+  font-size: 18px;
+  padding: 2mm;
+}
+.description {
+  align-content: start;
+}
+.credit-photo {
+  align-content: start;
+  text-align: right;
+  font-size: 15px;
+  font-style: italic;
+}
+.footer-fiche {
+  display: flex;
+  justify-content: space-between;
+  align-content: end;
+}
+.link {
+  color: #759440 !important;
+  align-content: end;
+  font-weight: bolder;
+  text-decoration: underline;
+}
+
+.qrcode {
+  align-content: end;
+  align-items: end;
+  display: flex;
+  justify-content: end;
+  gap: 0;
+}
+.infos {
+  display: flex;
+  justify-content: space-between;
+  align-items: end;
+}
+.rotated-img img {
+  width: 30px;
+  display: block;
+}
+.qrcode-img {
+  width: 100px;
+  height: 100px;
+  display: block;
+}
+.green-bg {
+  color: white !important;
+  background: #759440 !important;
+  padding: 0.5mm 2mm;
+  font-style: italic;
+}
+.author .green-bg {
+  display: block;
+  width: fit-content;
+  padding: 0 2mm;
+}
+.rotated-text {
+  background: #759440;
+  color: white;
+  padding: 0.5mm 2mm;
+  transform: rotate(-0.25turn) translateX(6mm) translateY(4mm);
+  font-size: 15px;
+}
+.recto .rotated-text {
+  margin-right: -13mm;
+}
+.recto .right .footer-fiche img {
+  width: 20mm;
+  margin-right: -3mm;
+  margin-bottom: -7mm;
+}
+
+/* VERSO GAUCHE */
+
+/* VERSO DROITE */
+.verso .right {
+  background: url('custom/templates/bazar/assets/petits_pas.svg') repeat-y 3mm 14mm;
+  padding-left: 24mm;
+  background-size: 60px;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 146mm 72mm 10mm 32mm 14mm;
+}
+.verso .footer-fiche {
+  margin-left: -24mm;
+  margin-right: -8mm;
+  background: white !important;
+  padding: 0 8mm;
+}
+.petit-pimp {
+  width: 30mm;
+  margin-bottom: -4mm;
+  position: relative;
+  display: block;
+  background: white;
+}
+.trou {
+  display: none;
+  background-color: black;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  position: absolute;
+  top: 16mm;
+  left: 16mm;
+}
+
+@media print {
+  @page {
+    size: A4 portrait;
+    margin: 0;
+  }
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
+
+  body {
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+    margin: 0;
+  }
+  a[href]::after {
+    content: none;
+  }
+  .footer,
+  #yw-topnav,
+  #yw-header,
+  #yw-footer,
+  .filters-col,
+  .debug,
+  .BAZ_fiche_info,
+  .embed-responsive,
+  .no-print {
+    display: none !important;
+  }
+  .right,
+  .full-portrait-a4 {
+    border: none;
+  }
+  #yw-main {
+    padding: 0;
+  }
+  .indications img,
+  .indications2 img {
+    width: 200mm;
+    height: 286mm;
+    display: block;
+    margin: 0 auto;
+  }
+}

templates/bazar/fiche-20.tpl.html

@@ -1,4 +1,6 @@
 <?php
+use YesWiki\Core\Service\AssetsManager;
+$GLOBALS['wiki']->services->get(AssetsManager::class)->AddCSSFile('custom/templates/bazar/assets/activites.css');
 if (empty($_GET['print']) || $_GET['print'] != 1) {
   $renderedEntry = '';
   foreach ($form['prepared'] as $field) {
@@ -21,10 +23,10 @@ if (isset($fiche['imagebf_image1']) && $fiche['imagebf_image1']!='') {
   $fiche['bf_credit2'] = $fiche['bf_credit'];
 }
 
-$qrcode = '<span class="rotated-text">vers fiche</span><span class="qrcode-container">'.$GLOBALS['wiki']->format('{{qrcode text="' . $GLOBALS['wiki']->href('', $fiche['id_fiche']) . '"}}').'</span>';
+$qrcode = '<span class="rotated-img"><img src="custom/templates/bazar/assets/vers-fiche.png" alt="vers fiche" /></span><span class="qrcode-container">'.$GLOBALS['wiki']->format('{{qrcode text="' . $GLOBALS['wiki']->href('', $fiche['id_fiche']) . '"}}').'</span>';
 $qrcodeurl = '';
 if (!empty($fiche['bf_url'])) {
-$qrcodeurl = '<span class="rotated-text">l\'info en +</span><span class="qrcode-container">'.$GLOBALS['wiki']->format('{{qrcode text="'.$fiche['bf_url'].'"}}').'</span>';
+$qrcodeurl = '<span class="rotated-img"><img src="custom/templates/bazar/assets/l-info-en-plus.png" alt="l\'info en +" /></span><span class="qrcode-container">'.$GLOBALS['wiki']->format('{{qrcode text="'.$fiche['bf_url'].'"}}').'</span>';
 } else {
   $qrcodeurl = $qrcode;
 }
@@ -42,14 +44,16 @@ echo <<<TEMPLATE
     <div class="description">{$html['bf_description']}</div>
     <div class="image-carree">{$imgCarree}</div>
     <div class="credit-photo">{$fiche['bf_credit']}</div>
-    <div class="qrcode">
+    <div class="infos">
       <div class="author">
         <span class="green-bg">ressource</span>
         <span class="green-bg">proposée par</span>
         <strong>{$structure}</strong>     
       </div>
+      <div class="qrcode">
         {$qrcodeurl}
       </div>
+    </div>
     <div class="footer-fiche">
       <a class="link" href="https://www.pimp-ta-balade.be">www.pimp-ta-balade.be</a>
       <img src="custom/templates/bazar/assets/coq_wallonie_soutien.svg" alt="Région Wallonie" />
@@ -71,227 +75,17 @@ echo <<<TEMPLATE
   </div>
 </div>
 <div class="full-portrait-a4 indications">
-  <img src="custom/templates/bazar/assets/Instructions_pliage_recto.jpg" alt="instructions recto" />
+  <img src="custom/templates/bazar/assets/Instructions_pliage_recto.webp" alt="instructions recto" />
 </div>
 <div class="full-portrait-a4 indications2">
-  <img src="custom/templates/bazar/assets/Instructions_pliage_verso.jpg" alt="instructions verso" />
+  <img src="custom/templates/bazar/assets/Instructions_pliage_verso.webp" alt="instructions verso" />
 </div>
 <button style="margin-top:1em;" class="btn btn-primary no-print new-window" onclick="window.print()"><i class="fa fa-print" aria-hidden="true"></i> Imprimer cette fiche</button>
-
-<style>
-  .full-portrait-a4 {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(50%, 50%));
-    gap: 0;
-    justify-content: center;
-    width: 205mm;
-    height: 295mm;
-    border: 1px dotted #aaa;
-  }
-  .indications, .indications2 {
-    display: none;
-  }
-  .yw-main-content.alone .indications,
-  .yw-main-content.alone .indications2,
-  .include:last-child .indications,
-  .include:last-child .indications2 {
-    display: block;
-  }
-  .indications img,
-  .indications2 img {
-    width: 200mm;
-    height: 286mm;
-    text-align:center;
-  }
-  .left,
-  .right {
-    padding:8mm;
-    height: 285mm;
-    position: relative;
-  }
-  .right {
-    border-left: 1px dotted #aaa;
-  }
-  img {
-    border-radius:0;
-  }
-  /* RECTO GAUCHE */
-
-  /* RECTO DROITE */
-  .recto .right {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 20mm 16mm 89mm 89mm 10mm 30mm 26mm;
-  }
-  .logo {
-    display: flex;
-    align-items: flex-start;
-    justify-content: flex-end;
-  }
-  .main-logo {
-    width:36mm;
-    margin-right:-2.7mm;
-  }
-  .main-title {
-    background-color: #759440;
-    color:white;
-    font-size: 22px;
-    text-transform: uppercase;
-    padding: 2mm;
-    margin: 0;
-    line-height: 1.17em;
-    align-content: center;
-    overflow: hidden; 
-  }
-  .description, .reponse {
-    font-size:18px;
-    padding: 2mm;
-  }
-  .description {
-    align-content: start;
-  }
-  .credit-photo {
-    align-content: start;
-    text-align: right;
-    font-size: 15px;
-    font-style: italic;
-  }
-  .footer-fiche {
-    display: flex;
-  justify-content: space-between;
-  align-content: end;
-}
-.link {
-  color: #759440;
-  align-content: end;
-  font-weight:bolder;
-    text-decoration: underline;
-}
-
-.qrcode {
-align-content: end;
-align-items: end;
-display: flex;
-justify-content: end;
-gap: 0;
-}
-  .recto .qrcode {
-    display: flex;
-    justify-content: space-between;
-  }
-
-.green-bg {
-  color:white;
-  background: #759440;
-padding: .5mm 2mm;
-  font-style: italic;
-  }
-  .author .green-bg {
-  display: block;
-  width: fit-content;
-  padding: 0 2mm;
-}
-  .rotated-text {
-background: #759440;
-color: white;
-padding: .5mm 2mm;
-transform: rotate(-0.25turn) translateX(6mm) translateY(4mm);
-font-size: 15px;
-}
-  .recto .rotated-text {
-    margin-right:-13mm;
-  }
-.recto .right .footer-fiche img {
-width: 20mm;
-margin-right: -3mm;
-margin-bottom: -7mm;
-}
-
-  /* VERSO GAUCHE */
-
-  /* VERSO DROITE */
-  .verso .right {
-    background: url('custom/templates/bazar/assets/petits_pas.svg') repeat-y 3mm 14mm;
-    padding-left: 24mm;
-    background-size: 60px;
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 148mm 72mm 10mm 36mm 16mm;
-  }
-  .verso .footer-fiche {
-    margin-left: -24mm;
-    margin-right: -8mm;
-    background: white;
-    padding: 0 8mm;
-  }
-  .petit-pimp { 
-    width:30mm;
-    margin-bottom: -6mm;
-    position: relative;
-    display: block;
-    background: white;
-  }
-  .trou {
-    display: none;
-    background-color: black;
-    width:16px;
-    height:16px;
-    border-radius: 50%;
-    position: absolute;
-    top:16mm;
-    left:16mm
-  }
-
-@media print {
-  @page {
-    size: A4 portrait;
-    margin:0;
-  }
-
-  ::-webkit-scrollbar {
-    display: none;
-  }
-
-  body {
-    -webkit-print-color-adjust: exact !important;
-    print-color-adjust: exact !important;
-    margin: 0;
-  }
-  a[href]::after {
-    content: none;
-  }
-  .footer,
-  #yw-topnav,
-  #yw-header,
-  #yw-footer,
-  .filters-col,
-  .debug,
-  .BAZ_fiche_info,
-  .embed-responsive,
-  .no-print {
-    display: none !important;
-  }
-  .right,.full-portrait-a4 {
-    border:none;
-  }
-  #yw-main {
-    padding: 0;
-  }
-  .indications img,
-  .indications2 img {
-    width: 200mm;
-    height: 286mm;
-    text-align:center;
-  }
-
-}
-</style>
-
 <script>
 // un hack tres aléatoire des css print de bootstrap
-document.addEventListener('DOMContentLoaded', function(event) {
+//document.addEventListener('DOMContentLoaded', function(event) {
-	document.styleSheets[0].cssRules[40].cssRules[0].style= []
+//	document.styleSheets[0].cssRules[40].cssRules[0].style= []
-})
+//})
 </script>
 
 TEMPLATE;

templates/bazar/select-entries.tpl.html

@@ -133,7 +133,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
     $.each( $('.selected'), function( key, value ) {
       content = content + "\n" +'{{include page="'+value.getAttribute('data-tag')+'"}}' 
     });
-    window.location.href = '/?wiki/render&print=1&content='+content+'&returnTo='+window.location.href;
+    window.location.href = '/?wiki/render&print=1&content='+content+'&returnTo=<?php echo $GLOBALS['wiki']->href('', 'Merci'); ?>';
     return false;
   })
   $('.btn-save-selected').on('click', function(e){