add an article slider in the blog listing

designfrance · ‎Feb 29, 2024

I would like to have a slider with my “mes articles les plus récent” articles in a mobile version. Is this feasible? If yes, how ? I can't find the solution to integrate a slider with the articles.

this is my blog : https://app.hubspot.com/design-previewer/2660472/templates/158848154881

and the code :

{% if not topic %}
<div class="blog__listing">    
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-6">
        <div class="blog__titre">
           {% module "module_16878528674643732" path="/TEMPLATE/Blog/Customs modules/Blog - Titre principal", label="Blog - Titre principal" %}
        </div>
      </div>
    </div>
    {% set i = 1 %}
    {% for content in contents %}
    {% if i == 1%}
    
    <div class="row">
      <div class="col-12 col-md-7">
        <div class="listing__last__article">
          <div class="row">
            <div class="col-12 col-md-12">
              <div class="last__article__image">
                <div class="card-overlay">
                     <div class="card-head" style="background: url({{ content.featured_image }}) no-repeat; height: 350px; position: relative; background-size:cover;"></div>
                  </div>
              </div>
            </div>
          </div>
          <div class="last__article__card">
            <div class="row">
              <div class="col-12 col-md-12">
                <div class="last__article__date">
                  {% for tag in content.tag_list %} {# {% set t = t + 1 %} {% if t == 1 %} #}
                     <a class="topic-link" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}</a> 
                  {# {% endif %} #} {% endfor %} 
                  <span class="card-post__date"> - {{ content.publish_date|datetimeformat('%e %B  %Y') }}</span>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-12 col-md-12">
                <div class="last__article__titre">
                  <h3 class="card-post__titre"><a href="{{ content.absolute_url }}" title="{{ content.name  }}">{{ content.name }}</a></h3>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-12 col-md-12">
                <div class="last__article__content">
                  <p> {{ content.post_list_content|striptags|truncate(300, breakword=False, end='...') }}</p>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-12 col-md-12">
                <div class="last__article__cta">
                  <a class="link" href="{{ content.absolute_url }}" title="{{ content.name  }}">Lire</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="col-0 col-md-1"></div>
      <div class="col-12 col-md-4">
        <div class="row">
          <div class="col-12 col-md-12">
            <h4>Les articles les plus consultés</h4>
              {% set pop_posts = blog_popular_posts('default', 2) %}
                {% for pop_post in pop_posts %}
                 
<!----------------------- section with slider------------------>

                  <div class="article__consulte">
                    <div class="article__consulte__date">
                      {% for tag in pop_post.tag_list %} {# {% set t = t + 1 %} {% if t == 1 %} #}
                      <a class="topic-link" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}</a> 
                      {# {% endif %} #} {% endfor %} 
                       <span class="card-post__date"> - {{ pop_post.publish_date|datetimeformat('%e %B  %Y') }}</span>
                    </div>
                    <div class="article__consulte__titre">
                      <h3><a href="{{ pop_post.absolute_url }}" title="{{ pop_post.name  }}">{{ pop_post.name }}</a></h3>
                    </div>
                    <div class="article__consulte__cta">
                      <a class="link" href="{{ pop_post.absolute_url }}" title="{{ pop_post.name  }}">Lire</a>
                     </div> 
                   </div>
<!----------------------- section with slider------------------>
            
            
                 {% endfor %}
               </div>
             </div>
           </div>
         </div>
        <div class="row">
          <div class="col-12 col-md-12">
            <div class="all__article__titre">
              <h2>Ces articles peuvent aussi vous intéresser</h2>
            </div>
          </div>
        </div>
  </div>
    <div class="container" style="">
      <div class="row" style="">
        <div class="other__article">
          <div class="col-12 col-md-12">
            <div class="row">
              {% set i = 1 + 1%}
              {% for content in contents %}
                {% if i == 2 %}
              {% else %}
              <div class="col-12 col-md-4" style="display: inline-flex;">
                <div class="card__post">
                  <div class="card__overlay">
                     <div class="card-head" style="background: url({{ content.featured_image }}) no-repeat; height: 240px; position: relative; background-size:cover;">
                     </div>
                  </div>
                  <div class="card-body">
                    <div class="date_post">
                     {% for tag in content.tag_list %} {# {% set t = t + 1 %} {% if t == 1 %} #}
                     <a class="topic-link" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}</a> 
                    {# {% endif %} #} {% endfor %}<span class="other__article"> - {{ content.publish_date|datetimeformat('%e %B  %Y') }}</span>
                    </div>
                    <h3 class="card-post__titre"><a href="{{ content.absolute_url }}" title="{{ content.name  }}">{{ content.name }}</a></h3>
                    <p class="card-post__desc"> {{ content.post_list_content|striptags|truncate(75, breakword=False, end='...') }}</p>
                    <div class="card-post__cta">
                      <a class="link" href="{{ content.absolute_url }}" title="{{ content.name  }}">Lire</a>
                     </div> 
                  </div>
                </div>
              </div>    
              {% endif %}
              {% set i = i + 1 %}
              {% if i == 7 %}
                <div class="col-12 col-md-4" style="display: inline-flex;">
                  <div class="builder-cta__element">
                    <div class="builder-cta__element__container">
                      <div class="row justify-content-center">
                        <div class="col-12 col-md-12">
                          <h3 class="builder-cta__element__container__titre">Vous souhaitez en savoir plus sur les solutions de protection ANOZR WAY ?</h3>
                          <div class="builder-cta__element__container__titre__cta">
                          <!--HubSpot Call-to-Action Code -->
                            <a href="https://calendly.com/anozrway/decouverte" target="_blank" style="  color: #65B7E3; background-color: #fff; border-radius: 30px; text-decoration: none; padding: 10px 20px;">Demandez une démo</a>
                           <!-- end HubSpot Call-to-Action Code -->
                           </div>
                         </div>
                       </div>
                     </div>
                  </div>
                </div>
               {% endif %}
              {% endfor %}
              </div>
            {% endif %}     
            {% endfor %}
            </div>
        </div>
        </div>
      </div>              
{% else %}                 
    <div class="title__articles">
      <div class="container">
        <div class="row">
          <div class="col-12 col-md-12">
            <h1>{{ topic|replace('-',' ') }}</h1>
          </div>
        </div>
      </div>
    </div>
          <div class="container">
            <div class="row">   
              {% for content in contents %}
              <div class="col-12 col-md-4" style="display: inline-flex;">
                 <div class="tag__article">
                <div class="card__post">
                  <div class="card__overlay">
                     <div class="card-head" style="background: url({{ content.featured_image }}) no-repeat; height: 240px; position: relative; background-size:cover;">
                     </div>
                  </div>
                  <div class="card-body">
                    <div class="date_post">
                     {% for tag in content.tag_list %} {# {% set t = t + 1 %} {% if t == 1 %} #}
                     <a class="topic-link" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}</a> 
                    {# {% endif %} #} {% endfor %}<span class="other__article"> - {{ content.publish_date|datetimeformat('%e %B  %Y') }}</span>
                    </div>
                    <h3 class="card-post__titre"><a href="{{ content.absolute_url }}" title="{{ content.name  }}">{{ content.name }}</a></h3>
                    <p class="card-post__desc"> {{ content.post_list_content|striptags|truncate(75, breakword=False, end='...') }}</p>
                    <div class="card-post__cta">
                      <a class="link" href="{{ content.absolute_url }}" title="{{ content.name  }}">Lire</a>
                     </div> 
                  </div>
                </div>
              </div>
                </div>
              {% endfor %}
            </div>
          </div>
  </div>
{% endif %}
         <!-- Pagination -->
         {% if not simple_list_page %}
            <div class="blog__pagination">
              <div class="container">
                <div class="row">
                  <div class="col-12 col-md-12">
                     {% if last_page_num %}
                      <a class="previous-posts-link" href="{{ blog_page_link(last_page_num) }}">Précédent</a>
                      {% endif %}
                      {% if next_page_num %}
                        <a class="next-posts-link" href="{{ blog_page_link(next_page_num) }}">Suivant</a>
                      {% endif %}
                  </div>
                </div>
              </div>
             </div>
          {% endif %}
          <!-- Pagination -->

thanks a lot for your help

Anton · ‎Mär 1, 2024

Hi @designfrance,

yes it's possible. There are a lot of possible approaches. The easiest might be to get any slider js like splide, swiper, slick-slider and include it into your template like

<section class="splide">
  <div class="splide__track">
		<div class="splide__list">
                    {% set pop_posts = blog_popular_posts('default', 2) %}
                    {% for pop_post in pop_posts %}
<div class="splide__slide">
<div class="article__consulte"> 
                    <div class="article__consulte__date">
                      {% for tag in pop_post.tag_list %} {# {% set t = t + 1 %} {% if t == 1 %} #}
                      <a class="topic-link" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}</a> 
                      {# {% endif %} #} {% endfor %} 
                       <span class="card-post__date"> - {{ pop_post.publish_date|datetimeformat('%e %B  %Y') }}</span>
                    </div>
                    <div class="article__consulte__titre">
                      <h3><a href="{{ pop_post.absolute_url }}" title="{{ pop_post.name  }}">{{ pop_post.name }}</a></h3>
                    </div>
                    <div class="article__consulte__cta">
                      <a class="link" href="{{ pop_post.absolute_url }}" title="{{ pop_post.name  }}">Lire</a>
                     </div> 
                   </div>
</div>
                    {% endfor %}
		</div>
  </div>
</section>

(splide js example)

hope that helps

best,

Anton

Lösung in ursprünglichem Beitrag anzeigen

Anton · ‎Mär 1, 2024