Add card template for image-text settings

contao-thememanager · Mar 21, 2024 · f671a4a · f671a4a
1 parent c438235
commit f671a4a
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 25 deletions.
diff --git a/contao/templates/recommendation/recommendation_card.html5 b/contao/templates/recommendation/recommendation_card.html5
@@ -0,0 +1,62 @@
+<div class="layout_card arc_<?= $this->archiveId ?> item rec_card block<?= $this->class ?>">
+  <div class="inside">
+
+    <?php if ($this->addRecommendationImage): ?>
+      <div class="c_image">
+        <?php if ($this->addInternalImage): ?>
+          <?php $this->insert('image', $this->arrData); ?>
+        <?php elseif ($this->addExternalImage): ?>
+          <figure class="image_container">
+            <img src="<?= $this->imageUrl ?>" width="128" height="128" itemprop="image">
+          </figure>
+        <?php else: ?>
+          <figure class="image_container">
+            <svg viewBox="43 30 510 510" style="background:var(--rec-ph-bg,#ccc)">
+              <path fill="var(--rec-ph-clr,#fff)" d="M290 90c-44 6-77 33-89 73-2 7-2 10-2 22s2 37 4 46c0 2 0 3-3 3-5 2-7 7-7 20 0 10 2 33 4 39 2 8 8 14 13 14 2 0 2 0 4 11 5 21 11 37 19 46l5 5v55l-15 7a811 811 0 0 1-96 37c-13 2-25 6-39 13-31 16-53 47-63 88-3 9-6 26-6 29 0 2 14 2 282 2h282v-7c-2-16-9-39-16-55-9-19-25-39-41-49-15-10-34-18-50-22l-20-5c-13-4-49-18-78-32l-14-6v-54l4-5c9-12 15-26 19-45l3-13 3-1c4 0 8-3 10-8 3-7 4-13 6-33 2-18 1-25-4-29l-4-2-1-5c6-47 5-62-5-84a99 99 0 0 0-75-53c-8-2-25-3-31-2z"/>
+            </svg>
+          </figure>
+        <?php endif; ?>
+      </div>
+    <?php endif; ?>
+
+    <div class="c_text">
+      <?php if ($this->headlineLink): ?>
+        <h4 itemprop="name"><?= $this->headlineLink ?></h4>
+      <?php endif; ?>
+
+      <?php if ($this->addRating): ?>
+        <span class="rating">
+          <?php for ($i=1;$i<=5;$i++): ?>
+            <span class="star<?= ($i<=$this->rating) ? ' active' : '' ?>"<?= ($i<=$this->rating && $this->styles) ? $this->styles  : '' ?>>&#9733;</span>
+          <?php endfor; ?>
+        </span>
+      <?php endif; ?>
+
+      <?php if ($this->addAuthor || $this->addDate || $this->addLocation): ?>
+        <div class="info">
+          <?php if ($this->addAuthor): ?>
+            <span class="author"><?= $this->author ?></span>
+          <?php endif; ?>
+          <?php if ($this->addLocation): ?>
+            <span class="location"><?= $this->location ?></span>
+          <?php endif; ?>
+          <?php if ($this->addDate): ?>
+            <span class="date"><time datetime="<?= $this->datetime ?>" itemprop="datePublished"><?= $this->date ?></time></span>
+          <?php endif; ?>
+        </div>
+      <?php endif; ?>
+
+      <div class="text" itemprop="description">
+        <?php if ($this->teaser && $this->allowRedirect): ?>
+          <?= method_exists($this, 'cspInlineStyles') ? $this->cspInlineStyles($this->teaser) : $this->teaser ?>
+        <?php else: ?>
+          <?= $this->text ?>
+        <?php endif; ?>
+      </div>
+
+      <?php if ($this->allowRedirect): ?>
+        <p class="more"><?= $this->more ?></p>
+      <?php endif; ?>
+    </div>
+  </div>
+</div>
diff --git a/contao/templates/recommendation/recommendation_default.html5 b/contao/templates/recommendation/recommendation_default.html5
@@ -11,8 +11,8 @@
           </figure>
         <?php else: ?>
           <figure class="image_container">
-            <svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="43 30 510 510" style="background:#ccc">
-              <path fill="#fff" d="M290 90c-44 6-77 33-89 73-2 7-2 10-2 22s2 37 4 46c0 2 0 3-3 3-5 2-7 7-7 20 0 10 2 33 4 39 2 8 8 14 13 14 2 0 2 0 4 11 5 21 11 37 19 46l5 5v55l-15 7a811 811 0 0 1-96 37c-13 2-25 6-39 13-31 16-53 47-63 88-3 9-6 26-6 29 0 2 14 2 282 2h282v-7c-2-16-9-39-16-55-9-19-25-39-41-49-15-10-34-18-50-22l-20-5c-13-4-49-18-78-32l-14-6v-54l4-5c9-12 15-26 19-45l3-13 3-1c4 0 8-3 10-8 3-7 4-13 6-33 2-18 1-25-4-29l-4-2-1-5c6-47 5-62-5-84a99 99 0 0 0-75-53c-8-2-25-3-31-2z"/>
+            <svg viewBox="43 30 510 510" style="background:var(--rec-ph-bg,#ccc)">
+              <path fill="var(--rec-ph-clr,#fff)" d="M290 90c-44 6-77 33-89 73-2 7-2 10-2 22s2 37 4 46c0 2 0 3-3 3-5 2-7 7-7 20 0 10 2 33 4 39 2 8 8 14 13 14 2 0 2 0 4 11 5 21 11 37 19 46l5 5v55l-15 7a811 811 0 0 1-96 37c-13 2-25 6-39 13-31 16-53 47-63 88-3 9-6 26-6 29 0 2 14 2 282 2h282v-7c-2-16-9-39-16-55-9-19-25-39-41-49-15-10-34-18-50-22l-20-5c-13-4-49-18-78-32l-14-6v-54l4-5c9-12 15-26 19-45l3-13 3-1c4 0 8-3 10-8 3-7 4-13 6-33 2-18 1-25-4-29l-4-2-1-5c6-47 5-62-5-84a99 99 0 0 0-75-53c-8-2-25-3-31-2z"/>
             </svg>
           </figure>
         <?php endif; ?>
@@ -42,7 +42,6 @@
         <?php if ($this->addLocation): ?>
           <span class="location"><?= $this->location ?></span>
         <?php endif; ?>
-
         <?php if ($this->addDate): ?>
           <span class="date"><time datetime="<?= $this->datetime ?>" itemprop="datePublished"><?= $this->elapsedTime ?></time></span>
         <?php endif; ?>
@@ -60,6 +59,5 @@
     <?php if ($this->allowRedirect): ?>
       <p class="more"><?= $this->more ?></p>
     <?php endif; ?>
-
   </div>
 </div>
diff --git a/contao/templates/recommendation/recommendation_full.html5 b/contao/templates/recommendation/recommendation_full.html5
@@ -38,7 +38,6 @@
         <?php if ($this->addLocation): ?>
           <span class="location"><?= $this->location ?></span>
         <?php endif; ?>
-
         <?php if ($this->addDate): ?>
           <span class="date"><time datetime="<?= $this->datetime ?>" itemprop="datePublished"><?= $this->date ?></time></span>
         <?php endif; ?>
@@ -48,6 +47,5 @@
     <div class="text" itemprop="description">
       <?= $this->text ?>
     </div>
-
   </div>
 </div>
diff --git a/contao/templates/recommendation/recommendation_latest.html5 b/contao/templates/recommendation/recommendation_latest.html5
@@ -3,19 +3,19 @@
 
     <?php if ($this->addRecommendationImage): ?>
       <div class="c_image">
-          <?php if ($this->addInternalImage): ?>
-            <?php $this->insert('image', $this->arrData); ?>
-          <?php elseif ($this->addExternalImage): ?>
-            <figure class="image_container">
-              <img src="<?= $this->imageUrl ?>" width="128" height="128" itemprop="image">
-            </figure>
-          <?php else: ?>
-            <figure class="image_container">
-              <svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="43 30 510 510" style="background:#ccc">
-                <path fill="#fff" d="M290 90c-44 6-77 33-89 73-2 7-2 10-2 22s2 37 4 46c0 2 0 3-3 3-5 2-7 7-7 20 0 10 2 33 4 39 2 8 8 14 13 14 2 0 2 0 4 11 5 21 11 37 19 46l5 5v55l-15 7a811 811 0 0 1-96 37c-13 2-25 6-39 13-31 16-53 47-63 88-3 9-6 26-6 29 0 2 14 2 282 2h282v-7c-2-16-9-39-16-55-9-19-25-39-41-49-15-10-34-18-50-22l-20-5c-13-4-49-18-78-32l-14-6v-54l4-5c9-12 15-26 19-45l3-13 3-1c4 0 8-3 10-8 3-7 4-13 6-33 2-18 1-25-4-29l-4-2-1-5c6-47 5-62-5-84a99 99 0 0 0-75-53c-8-2-25-3-31-2z"/>
-              </svg>
-            </figure>
-          <?php endif; ?>
+        <?php if ($this->addInternalImage): ?>
+          <?php $this->insert('image', $this->arrData); ?>
+        <?php elseif ($this->addExternalImage): ?>
+          <figure class="image_container">
+            <img src="<?= $this->imageUrl ?>" width="128" height="128" itemprop="image">
+          </figure>
+        <?php else: ?>
+          <figure class="image_container">
+            <svg viewBox="43 30 510 510" style="background:var(--rec-ph-bg,#ccc)">
+              <path fill="var(--rec-ph-clr,#fff)" d="M290 90c-44 6-77 33-89 73-2 7-2 10-2 22s2 37 4 46c0 2 0 3-3 3-5 2-7 7-7 20 0 10 2 33 4 39 2 8 8 14 13 14 2 0 2 0 4 11 5 21 11 37 19 46l5 5v55l-15 7a811 811 0 0 1-96 37c-13 2-25 6-39 13-31 16-53 47-63 88-3 9-6 26-6 29 0 2 14 2 282 2h282v-7c-2-16-9-39-16-55-9-19-25-39-41-49-15-10-34-18-50-22l-20-5c-13-4-49-18-78-32l-14-6v-54l4-5c9-12 15-26 19-45l3-13 3-1c4 0 8-3 10-8 3-7 4-13 6-33 2-18 1-25-4-29l-4-2-1-5c6-47 5-62-5-84a99 99 0 0 0-75-53c-8-2-25-3-31-2z"/>
+            </svg>
+          </figure>
+        <?php endif; ?>
       </div>
     <?php endif; ?>
 
@@ -25,10 +25,10 @@
 
     <?php if ($this->addRating): ?>
       <span class="rating">
-          <?php for ($i=1;$i<=5;$i++): ?>
-            <span class="star<?= ($i<=$this->rating) ? ' active' : '' ?>"<?= ($i<=$this->rating && $this->styles) ? $this->styles  : '' ?>>&#9733;</span>
-          <?php endfor; ?>
-        </span>
+        <?php for ($i=1;$i<=5;$i++): ?>
+          <span class="star<?= ($i<=$this->rating) ? ' active' : '' ?>"<?= ($i<=$this->rating && $this->styles) ? $this->styles  : '' ?>>&#9733;</span>
+        <?php endfor; ?>
+      </span>
     <?php endif; ?>
 
     <?php if ($this->addAuthor || $this->addDate || $this->addLocation): ?>
@@ -39,7 +39,6 @@
         <?php if ($this->addLocation): ?>
           <span class="location"><?= $this->location ?></span>
         <?php endif; ?>
-
         <?php if ($this->addDate): ?>
           <span class="date"><time datetime="<?= $this->datetime ?>" itemprop="datePublished"><?= $this->date ?></time></span>
         <?php endif; ?>
@@ -57,6 +56,5 @@
     <?php if ($this->allowRedirect): ?>
       <p class="more"><?= $this->more ?></p>
     <?php endif; ?>
-
   </div>
 </div>
diff --git a/contao/templates/style-manager-recommendation-core.xml b/contao/templates/style-manager-recommendation-core.xml
@@ -112,6 +112,30 @@
         <field title="alias">box</field>
         <field title="modules">a:2:{i:0;s:18:"recommendationlist";i:1;s:18:"recommendationform";}</field>
       </child>
+      <child alias="imageText">
+        <field title="alias">imageText</field>
+        <field title="modules">a:1:{i:0;s:18:"recommendationlist";}</field>
+      </child>
+      <child alias="imageTextAlignmentY">
+        <field title="alias">imageTextAlignmentY</field>
+        <field title="modules">a:1:{i:0;s:18:"recommendationlist";}</field>
+      </child>
+      <child alias="imageTextAlignmentX">
+        <field title="alias">imageTextAlignmentX</field>
+        <field title="modules">a:1:{i:0;s:18:"recommendationlist";}</field>
+      </child>
+      <child alias="imageTextWidth">
+        <field title="alias">imageTextWidth</field>
+        <field title="modules">a:1:{i:0;s:18:"recommendationlist";}</field>
+      </child>
+      <child alias="imageTextImgOutset">
+        <field title="alias">imageTextImgOutset</field>
+        <field title="modules">a:1:{i:0;s:18:"recommendationlist";}</field>
+      </child>
+      <child alias="imageTextImgStretch">
+        <field title="alias">imageTextImgStretch</field>
+        <field title="modules">a:1:{i:0;s:18:"recommendationlist";}</field>
+      </child>
     </children>
   </archive>
   <archive identifier="cGridColumn">