made the test/default blog post 3 by default (#2670)

* made the test/default blog post 3 by default * blog default posts are not mobile responsive and on a slider. created snippet for blog-placeholder that renders into featured-blog with changable arguments * removed commented out code * default blog posts now are modifiable by post-limit and column number presets * reformated code, reverted header back to h1, removed snippet, and made changes as suggested * noticed the blog section needs a margin bottom when color scheme is applied * removed padding from blog and removed date and author presets * Fix link formatting in Related Products heading (#2680) * fix default UI for dropdown and mega menu (#2644) * added vertical padding and made l2 bold to mega menu * added vertical padding to drop down * fixed default UI for dropdown and mega menu * added hover effect to all l2 links and fixed overlapping or mega menu * adding padding to l3 links and fixed hover effect for dropdown * reverted the mega menu back to the current setting * changed horizontal grid gap on mega menu and vertical paddings on dropdown menu * made vertical grid gap at 1.8 rem to match the 3 rem vertical paddings on mega-menu container * removed the unnecessary lines of code * removed the text-thickness that was making l2/l3 links a different size from l1 links * added a hover effect over active link * removed uneccessary link size and white space * Add release/v10.0.0 branch fixes to main (#2693) * Fix color for image in password (#2608) * [Image behavior] fixed background jitter fix on mobile (#2611) * [Animation in editor] Remove transform translate when re rendering and re ordering blocks (#2614) * Remove transform translate when re rendering and re ordering blocks * target only what's needed * [bug] Horizontal scrolling on mobile. (#2617) * Add overflow-x:hidden to prevent horizontal scrolling on mobile. * Change margin for slider for mobile and tablet. * Remove redundant preconnect to cdn.shopify.com (#2621) * Update reverse scheme (#2626) * [Footer] Remove Global Media settings inheritance from images (#2631) * Send timezone offset as string instead of integer (#2636) * Fix slider scrolling issue (#2635) * Fix background gradient for Related Products. (#2641) * Update from Shopify for theme dawn/release/10.0.0 Committed from shop: Skeleton Theme * Quick add remove animation from image and content (#2657) * Add default values for color scheme group (#2660) * Revert unwanted changes (#2669) * Update from Shopify for theme dawn/release/10.0.0 Committed from shop: Skeleton Theme * Revert "Update from Shopify for theme dawn/release/10.0.0" This reverts commit 89d927e. * Remove forced white text color in Image Banner & Slideshow (#2663) * Remove forced white color. * Change color scheme for Dawn's default homepage Image Banner.. * Remove warning about color scheme usage. * Fix bug with transparent buttons on mobile. * Remove unused info key from translated files. * Update display of button when it's in a mobile container. * Update existing placeholder images (#2610) * Update existing placeholder images * Featured collection and product card * Featured product section * Collection list section * Featured blog and multirow sections * Slideshow: change order of placeholder images * Collage adjustments for product and collection cards * Image with text adjustments * Featured product: re-add `.product--no-media` selectors * Update featured product section * Update `card-collection` * Cleanup `card-collection` --------- Co-authored-by: Ludo <[email protected]> * Gradient fix for transparent background medias and cards (#2651) * Fix media, product, and collection cards placeholder (#2682) * Fix missing else for collection cards (#2692) --------- Co-authored-by: Sofia Matulis <[email protected]> Co-authored-by: Eugene Kasimov <[email protected]> Co-authored-by: Mateusz Krzeszowiak <[email protected]> Co-authored-by: Lucas Lacerda <[email protected]> Co-authored-by: Kjell Reigstad <[email protected]> Co-authored-by: shopify[bot] <79544226+shopify[bot]@users.noreply.github.com> Co-authored-by: Ken Meleta <[email protected]> Co-authored-by: Andrew Etchen <[email protected]> * made the test/default blog post 3 by default * added updated placeholder image * added the different placeholder images, while maintaining ability to edit with presets * blog card theme settings work on default blog posts * removed css that wasn't being used * reverted to original code without theme settings * fixed prettier error by removing extra quotation mark and made test blog default instead of news --------- Co-authored-by: Jon Neill <[email protected]> Co-authored-by: Ludo <[email protected]> Co-authored-by: Sofia Matulis <[email protected]> Co-authored-by: Eugene Kasimov <[email protected]> Co-authored-by: Mateusz Krzeszowiak <[email protected]> Co-authored-by: Lucas Lacerda <[email protected]> Co-authored-by: Kjell Reigstad <[email protected]> Co-authored-by: shopify[bot] <79544226+shopify[bot]@users.noreply.github.com> Co-authored-by: Ken Meleta <[email protected]> Co-authored-by: Andrew Etchen <[email protected]>
Shopify · Jun 21, 2023 · 48ef65f · 48ef65f
1 parent 33c8c97
commit 48ef65f
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 40 deletions.
diff --git a/assets/section-featured-blog.css b/assets/section-featured-blog.css
@@ -1,12 +1,16 @@
+.blog-container{
+  display: flex;
+  gap: 1.5rem;
+}
+
 .blog-placeholder {
-  margin: 0 1.5rem;
   background: rgb(var(--color-background));
+  width: 100%;
 }
 
 @media screen and (min-width: 750px) {
   .blog-placeholder {
     text-align: center;
-    width: 50%;
     margin: 0;
   }
 }
@@ -21,7 +25,7 @@
 }
 
 .blog-placeholder .placeholder .placeholder-svg {
-  height: auto;
+  height: 100%;
 }
 
 .blog-placeholder h2 {

diff --git a/sections/featured-blog.liquid b/sections/featured-blog.liquid
@@ -19,7 +19,7 @@
 
 {%- liquid
   assign posts_displayed = section.settings.blog.articles_count
-  if section.settings.post_limit <= section.settings.blog.articles_count
+  if section.settings.post_limit <= section.settings.blog.articles_count or section.settings.post_limit <= 4
     assign posts_exceed_limit = true
     assign posts_displayed = section.settings.post_limit
   endif
@@ -51,33 +51,69 @@
         {%- endif -%}
       </div>
     {%- endunless -%}
-    {%- if section.settings.blog != blank and section.settings.blog.articles_count > 0 -%}
+
       <slider-component class="slider-mobile-gutter{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
         <ul
           id="Slider-{{ section.id }}"
           class="blog__posts articles-wrapper contains-card contains-card--article{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid grid--peek grid--2-col-tablet grid--{{ section.settings.columns_desktop }}-col-desktop slider {% if posts_displayed > 2 %}slider--tablet{% else %}slider--mobile{% endif %}"
           role="list"
         >
-          {%- for article in section.settings.blog.articles limit: section.settings.post_limit -%}
+          {%- if section.settings.blog != blank and section.settings.blog.articles_count > 0 -%}
+            {%- for article in section.settings.blog.articles limit: section.settings.post_limit -%}
+              <li
+                id="Slide-{{ section.id }}-{{ forloop.index }}"
+                class="blog__post grid__item article slider__slide slider__slide--full-width{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
+                {% if settings.animations_reveal_on_scroll %}
+                  data-cascade
+                  style="--animation-order: {{ forloop.index }};"
+                {% endif %}
+              >
+                {% render 'article-card',
+                  blog: section.settings.blog,
+                  article: article,
+                  media_aspect_ratio: 1.66,
+                  show_image: section.settings.show_image,
+                  show_date: section.settings.show_date,
+                  show_author: section.settings.show_author,
+                  show_excerpt: true
+                %}
+              </li>
+            {%- endfor -%}
+          {%- else -%}
+          {% for i in (1..section.settings.post_limit) -%}
+            {%- assign placeholder_image_index = forloop.index0 | modulo: 3 | plus: 1 -%} 
+            {%- assign placeholder_image = 'blog-apparel-' | append: placeholder_image_index -%} 
             <li
               id="Slide-{{ section.id }}-{{ forloop.index }}"
               class="blog__post grid__item article slider__slide slider__slide--full-width{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
               {% if settings.animations_reveal_on_scroll %}
                 data-cascade
                 style="--animation-order: {{ forloop.index }};"
-              {% endif %}
+              {% endif %} 
             >
-              {% render 'article-card',
-                blog: section.settings.blog,
-                article: article,
-                media_aspect_ratio: 1.66,
-                show_image: section.settings.show_image,
-                show_date: section.settings.show_date,
-                show_author: section.settings.show_author,
-                show_excerpt: true
-              %}
+              <div
+                class="blog-placeholder{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
+                {% if settings.animations_reveal_on_scroll %}
+                  data-cascade
+                {% endif %}
+              >
+                {%- if section.settings.show_image == true -%}
+                  <div class="placeholder media media--hover-effect media--landscape">
+                    {{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }}
+                  </div>
+                {% endif %}
+                <div class="blog-placeholder__content">
+                  <h2>
+                    {{ 'sections.featured_blog.onboarding_title' | t }}
+                  </h2>
+                  <p class="rte-width">
+                    {{ 'sections.featured_blog.onboarding_content' | t }}
+                  </p>
+                </div>
+              </div>
             </li>
           {%- endfor -%}
+        {%- endif -%}
         </ul>
         {%- if posts_exceed_limit -%}
           <div class="slider-buttons no-js-hidden{% if section.settings.post_limit < 3 %} medium-hide{% endif %}{% if section.settings.post_limit < 2 %} small-hide{% endif %}">
@@ -124,26 +160,6 @@
           </a>
         </div>
       {%- endif -%}
-    {%- else -%}
-      <div
-        class="blog-placeholder{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
-        {% if settings.animations_reveal_on_scroll %}
-          data-cascade
-        {% endif %}
-      >
-        <div class="placeholder media media--landscape">
-          {{ 'blog-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
-        </div>
-        <div class="blog-placeholder__content">
-          <h2>
-            {{ 'sections.featured_blog.onboarding_title' | t }}
-          </h2>
-          <p class="rte-width">
-            {{ 'sections.featured_blog.onboarding_content' | t }}
-          </p>
-        </div>
-      </div>
-    {%- endif -%}
   </div>
 </div>
 
@@ -263,10 +279,7 @@
   ],
   "presets": [
     {
-      "name": "t:sections.featured-blog.presets.name",
-      "settings": {
-        "blog": "News"
-      }
+      "name": "t:sections.featured-blog.presets.name"
     }
   ]
 }