made article cards an include/footer bootstrap 5 fix (left to start)

Author: rossthomson89

templates/_includes/_content-builder/_blocks/latestArticles.twig

@@ -8,23 +8,8 @@
             </div>
         {% endif %}
         <div class="row {{ block.header | length ?  "pt-4 pb-5" : "py-5" }}">
-            {% for item in craft.entries.section('latest').all() | slice(0,3) %}
-                <div class="col-12 col-md-6 col-lg-4 mb-4 latest-article">
-                    <a href="{{ item.url }}" class="d-flex flex-column">
-                        {% if item.summaryImage.one %}
-                            <div class="img mb-4">
-                                <img src="{{ item.summaryImage.one.url({ width: 800, height: 600, format: 'webp' }) }}" alt="{{ item.title }}" class="w-100">
-                            </div>
-                        {% endif %}
-                        <h4 class="title pt-2 mb-3">
-                            <span>{{ item.title|length > 45 ? item.title|slice(0, 45) ~ '...' : item.title }}</span>
-                        </h4>
-                        {% if item.pageSummary %}
-                            <div class="copy mb-3">{{ item.pageSummary|length > 170 ? item.pageSummary|slice(0, 170) ~ '...' : item.pageSummary }}</div>
-                        {% endif %}
-                        <h6>{{ item.postDate | date("M d, Y") | upper }}</h6>
-                    </a>
-                </div>
+            {% for item in craft.entries.section('latest').limit(3).all() %}
+                {% include '/_includes/_content-builder/_partial/article.twig' %}
             {% endfor %}
         </div>
     </div>

templates/_includes/_content-builder/_partial/article.twig

@@ -0,0 +1,16 @@
+<div class="col-12 col-md-6 col-lg-4 mb-4 article">
+    <a href="{{ item.url }}" class="d-flex flex-column">
+        {% if item.summaryImage.one %}
+            <div class="img mb-4">
+                <img src="{{ item.summaryImage.one.url({ width: 800, height: 600, format: 'webp' }) }}" alt="{{ item.title }}" class="w-100">
+            </div>
+        {% endif %}
+        <h4 class="title pt-2 mb-3">
+            <span>{{ item.title|length > 45 ? item.title|slice(0, 45) ~ '...' : item.title }}</span>
+        </h4>
+        {% if item.pageSummary %}
+            <div class="copy mb-3">{{ item.pageSummary|length > 170 ? item.pageSummary|slice(0, 170) ~ '...' : item.pageSummary }}</div>
+        {% endif %}
+        <h6>{{ item.postDate | date("M d, Y") | upper }}</h6>
+    </a>
+</div>

templates/_includes/_global/footer.twig

@@ -1,7 +1,6 @@
 {% set footerNav = craft.navigation.nodes().handle('footerNavigation').level(1).all() %}
-
 <footer>
-    <div class="container text-center text-md-left">
+    <div class="container text-center text-md-start">
         <div class="row py-4">
             <div class="col-12 col-md-3">
                 {% if companyInfo.address | length %}

templates/latest/index.twig

@@ -13,26 +13,7 @@
             {% set query = section.limit(6) %}
             {% paginate query as pageInfo, pageEntries %}
             {% for item in pageEntries %}
-                <div class="col-12 col-md-6 col-lg-4 mb-4 latest-article d-flex flex-grow-1 flex-column">
-                    <a href="{{ item.url }}" class="d-flex flex-grow-1 flex-column">
-                        {% if item.summaryImage.one %}
-                            <div class="img mb-4">
-                                <img src="{{ item.summaryImage.one.url({width: 375, height: 220}) }}" alt="{{ item.title }}" class="w-100">
-                            </div>
-                        {% else %}
-                            <div class="img mb-4">
-                                <img src="https://via.placeholder.com/375x220?text=Missing+Summary+Image" alt="{{ item.title }}" class="w-100">
-                            </div>
-                        {% endif %}
-                        <h3 class="title pt-2 mb-3">
-                            <span>{{ item.title|length > 45 ? item.title|slice(0, 45) ~ '...' : item.title }}</span>
-                        </h3>
-                        {% if item.pageSummary %}
-                            <div class="copy mb-3">{{ item.pageSummary|length > 170 ? item.pageSummary|slice(0, 170) ~ '...' : item.pageSummary }}</div>
-                        {% endif %}
-                        <div>{{ item.postDate | date("M d, Y") | upper }}</div>
-                    </a>
-                </div>
+                {% include '/_includes/_content-builder/_partial/article.twig' %}
             {% endfor %}
         </div>
         {% if pageInfo.totalPages > 1 %}