FEATURE Image position options (#6)

dynamic · Aug 14, 2024 · e6018e7 · e6018e7
1 parent c96d9fa
commit e6018e7
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 16 deletions.
diff --git a/src/Element/ElementCard.php b/src/Element/ElementCard.php
@@ -59,6 +59,7 @@ class ElementCard extends BaseElement
      */
     private static array $db = [
         'Content' => 'HTMLText',
+        'Position' => 'Enum("Left, Right, Top", "Left")',
     ];
 
     /**
@@ -90,6 +91,9 @@ public function fieldLabels($includerelations = true)
         $labels['Title'] = _t(__CLASS__ . '.TitleLabel', 'Title');
         $labels['Content'] = _t(__CLASS__ . '.ContentLabel', 'Description');
         $labels['ElementLink'] = _t(__CLASS__ . '.ElementLinkLabel', 'Link');
+        $labels['Position'] = _t(__CLASS__ . '.PositionLabel', 'Image Position');
+        $labels['Image'] = _t(__CLASS__ . '.Image', 'Image');
+
 
         return $labels;
     }
@@ -101,14 +105,20 @@ public function getCMSFields(): FieldList
     {
         $this->beforeUpdateCMSFields(function (FieldList $fields) {
             // @phpstan-ignore-next-line
-            $fields->dataFieldByName('Image')
-                ->setFolderName('Uploads/Elements/Card');
-
-            $fields->insertBefore('Content', $fields->dataFieldByName('Image'));
+            $fields->dataFieldByName('Content')
+                ->setRows(8);
 
             // @phpstan-ignore-next-line
-            $fields->dataFieldByName('Content')
-                ->setRows(5);
+            $fields->dataFieldByName('Image')
+                ->setFolderName('Uploads/Elements/Card');
+            $fields->insertBefore('Position', $fields->dataFieldByName('Image'));
+
+            $fields->dataFieldByName('Position')
+                ->setDescription(_t(
+                    __CLASS__ . 'PositionDescription',
+                    'Position of the image in relation to the content. 
+                        Image will display on top at smaller breakpoints.'
+                ));
 
             $fields->replaceField(
                 'ElementLinkID',

diff --git a/templates/Dynamic/Elements/Card/Elements/ElementCard.ss b/templates/Dynamic/Elements/Card/Elements/ElementCard.ss
@@ -1,14 +1,22 @@
-<div class="element__card">
-    <div class="card h-100">
+<div class="card h-100">
+    <div class="row g-0">
         <% if $Image %>
-            <% if $ElementLink %><a href="$ElementLink.LinkURL" title="Go to $ElementLink.Title.ATT"><% end_if %>
-                <img src="$Image.FocusFill(500,330).URL" class="card-img-top" alt="$Image.Title.ATT">
-            <% if $ElementLink %></a><% end_if %>
+            <% if $Position == 'Top' %>
+                <img src="$Image.FocusFill(800,530).URL" class="card-img-top" alt="$Image.Title.ATT">
+            <% else %>
+                <div class="col-lg-7">
+                    <img src="$Image.FocusFill(800,530).URL" class="img-fluid" alt="$Image.Title.ATT">
+                </div>
+            <% end_if %>
         <% end_if %>
-        <div class="card-body">
-            <% if $Title && $ShowTitle %><$TitleTag class="element__title $TitleSizeClass">$Title</$TitleTag><% end_if %>
-            <% if $Content %><div class="card-text">$Content</div><% end_if %>
-            <% if $ElementLink %><p><a href="$ElementLink.URL" class="btn btn-primary" title="$ElementLink.Title"<% if $ElementLink.OpenInNew %> target="_blank" rel="noopener noreferrer"<% end_if %>>$ElementLink.Title</a></p><% end_if %>
+        <div class="<% if $Position != 'Top' %> col-lg-5<% end_if %><% if $Position == 'Right' %> order-md-first<% end_if %>">
+            <div class="card-body h-100 d-flex align-items-center">
+                <div>
+                    <% if $Title && $ShowTitle %><$TitleTag class="element__title $TitleSizeClass">$Title</$TitleTag><% end_if %>
+                    <% if $Content %><div class="card-text">$Content</div><% end_if %>
+                    <% if $ElementLink %><p><a href="$ElementLink.URL" class="btn btn-primary" title="$ElementLink.Title"<% if $ElementLink.OpenInNew %> target="_blank" rel="noopener noreferrer"<% end_if %>>$ElementLink.Title</a></p><% end_if %>
+                </div>
+            </div>
         </div>
     </div>
-</div>
+</div>