Show blog articles from various blogs on a page (SOLVED) and show them in order of how recent they are (UNSOLVED)

Tourist
10 0 4

 

I cannot seem to get the articles generated in the bottom code to be sorted based on how recent they are. The most recent show first, just like in a blog. They articles of blog-handle-1 is displaying first (according to recent published date), only then the articles of blog-handle-2 is displaying (according to recent published date). I would like to have a master sorting of the articles based on published date.

I am pasting a working bottom code (sharing it as I saw some unsolved questions on the same. My website is under development so cannot share how it looks. But I'll share the code and instructions.

{% assign blog_handles = "blog-handle-1;blog-handle-2;blog-handle-3" %}
{% assign blog_list = blog_handles | split: ';' %}

{% for blog_handle in blog_list %}

  {% for article in blogs[blog_handle].articles limit: 1%}
<article>
        {% if article.image %}
          <a href="{{ article.url }}" title="{{ article.title | escape }}">
            <img src="{{ article.image | img_url: 'grande' }}" alt="{{ article.title | escape }}" />
          </a>
        {% endif %}
        
        <h3><a href= "{{ article.url }}">{{ article.title }}</a></h3>
        <p><span class="date" style="display: block;">Posted: <em>{{ article.published_at | date: "%B %d %Y" }}</em> in <a href="{{ blogs[blog_handle].url }}">{{ blogs[blog_handle].title }}</a></span></p>
        <section>{{ article.content | strip_html | truncatewords: 30 }}</section>
      </article>

      <hr class="divider" />

  {% endfor %}

{% endfor %}

Instructions
------------------
If you replace blog-handle-1;blog-handle-2,blog-handle-3 with your blog handles you are ready to go. Ensure you use ";" to separate. 

 

0 Likes
Tourist
10 0 4

This is an attempt using another approach...limited sucess again. Managed to post from other blogs in order of recency but generating the relevant blog name has been a problem. I'm currently generating all blog names. It's something to do with the for loop below -

 

{% for blog_handle in featuredBlogs %}



And this is the full code - 

 

{% assign featuredBlogs = 'lifestyle,news' | split:',' %}
{% assign article_list = '' %}

{% comment %}
Set the featuredArticles variable to false by default.
{% endcomment %}
{% assign featuredArticles = false %}

{% comment %}
Grab the last 50 (default) articles from each Blog. Add the articles to the featureArticles variable.
{% endcomment %}
{% for featuredBlog in featuredBlogs %}
	{% if blogs[featuredBlog].articles %}
		{% if featuredArticles %}
			{% assign featuredArticles = featuredArticles | concat:blogs[featuredBlog].articles %}
		{% else %}
			{% assign featuredArticles = blogs[featuredBlog].articles %}
		{% endif %}
	{% endif %}
{% endfor %}

{% comment %}
If featuredArticles is not false we should have articles to show.
{% endcomment %}
{% if featuredArticles %}
	{% assign featuredArticles = featuredArticles | sort:'published_at' | reverse %}

	{% comment %}
	Now a quick example of showing the latest 10 articles from our master article list
	{% endcomment %}

	{% for article in featuredArticles limit:10 %}
		
		{% for blog_handle in featuredBlogs %}
            <p class="blog_handle">
              <a href="{{ blogs[blog_handle].url }}">{{ blogs[blog_handle].title }}</a>
            </p>
            {% endfor %}

        <h2 class="article_title"><a href="{{ article.url }}">{{ article.title }}</a></h2>

        <p class="blog_meta">
          {% if settings.blog_author %}
            <span id="by">by</span>
          <span id="article-author">{{ article.author }}</span>
          {% endif %}

          {% if settings.blog_date %}
            <span id="published-date">{{ article.published_at | date: format: "month_day_year" }}</span>
          {% endif %}

          {% if article.excerpt != blank %}
          <div class="excerpt"><section>{{ article.content | strip_html | truncatewords: 30 }}</section></div>          
        {% endif %}  
      
        {% if settings.read_more_link %}
          <div class="read_more">
            <a href="{{ article.url }}" title="{{ article.title | escape }}">{{ 'blogs.general.continue_reading_html' | t }}</a>
            {%comment%}<a href="{{ article.url }}" title="{{ article.title | escape }}" class="action_button">View Full Post </a>{%endcomment%}
            </div>
        {% endif %}

      <hr class="divider" />

	{% endfor %}

{% endif %}

 

 

1 Like
Shopify Expert
9765 86 1513

^ Thought some of the code looked familiar ;)

You should be able to work out the Blog title based on the article.url. The url will give you enough info to get the blog handle and work backwards from there.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
2 Likes
Tourist
10 0 4

Yeah I tried looking up github (what people do as a last resort lol) when I couldn't get it to work....didn't know it was you :D

And thanks, Jason, I should have thought of it. Appreciate it. I have fixed it now. But there is some issue regarding additional blank strings being generated. Could you help me with that ?

Changed this - 

{% for blog_handle in featuredBlogs %}
            <p class="blog_handle">
              <a href="{{ blogs[blog_handle].url }}">{{ blogs[blog_handle].title }}</a>
            </p>
            {% endfor %}

to this - 

{% assign url = article.url | split: '/' %}
            {% for blog_handle in url %}
            <p class="blog_handle">
              <a href="{{ blogs[blog_handle].url }}">{{ blogs[blog_handle].title }}</a>
            </p>
            {% endfor %}



The blog names of respective articles are generated but there is additional space as blank strings are generated as <p> </p>

EDIT: I tried lot of ways to negate it including an {% unless blog_handle == ' ' %} it reduces one <p> But without it 3 additional blank <p> tags are generated apart from the <p> tag containing the blog[blog_handle].title

I can't figure out why ! HELP.

0 Likes
Shopify Partner
2 0 0

Nice try @Jayanta !

Try this: 

    {% assign url = article.url | remove: "/blogs/"  %}
    {% assign blog_url = url | split:'/' | first %}
    {% for blog_handle in blog_url %}
    {% unless blog_handle == "" %} 
    <p class="blog_handle">
      <a href="{{ blogs[blog_handle].url }}">{{ blogs[blog_handle].title }}</a>
    </p>
    {% endunless %}
    {% endfor %}

 

0 Likes
Tourist
28 0 1

I have been using a manually compiled list of past, present, and future titles from multiple blogs. 

https://clinicalposters.com/pages/blog-schedule

The process can be automated based upon an adaptaion of your Liquid example, with two exceptions:

  1. Hidden (future) articles are absent .(Don't think there's a way around this.)
  2. Modifitd page.liquid list appears limited to most recent 100 articles. (Unsucessful attempt to paginate a page.template.)

https://clinicalposters.com/pages/published-articles

Perhaps the future schedule is more for my benefit, allowing me to see when to insert upcoming posts. For the time being, I will use the Liquid schedule for visitors who are not logged in and the full schedule for logged in email subscribers.

0 Likes
Excursionist
30 0 6

@Jason Thanks for your code. Works perfectly. I did some adjustment for how I wanted it to show. The original code I did was missing something to pull in all of the articles. So I deleted mines and built from Jason's code. 

 

For anyone looking to do this here's my adjusted code for our website based on Jason's original code. I use Venture theme but nothing is standard in any of the templates. 

 

{% comment %} 
Snippet name: latest-post.liquid
To this use on blog pages or anywhere else include 'latest-post' 
{%endcomment %}


{% comment %}
Code by Jason @ Freakdesign for this blog post:
http://freakdesign.com.au/blogs/news/105090695-show-the-latest-shopify-articles-from-all-blogs
---
First add all the handles of the blogs you want to include. 
{% endcomment %}

{% assign featuredBlogs = 'boomers-burn-turn,cover-contests,news,oui-magazine,the-horse-bc-bike-shows,the-horse-bc-social-feed' | split:',' %}

{% comment %}
Set the featuredArticles variable to false by default.
{% endcomment %}

{% assign featuredArticles = false %}

{% comment %}
Grab the last 25 (default) articles from each Blog. Add the articles to the featureArticles variable.
{% endcomment %}

{% for featuredBlog in featuredBlogs %}
    {% if blogs[featuredBlog].articles %}
        {% if featuredArticles %}
            {% assign featuredArticles = featuredArticles | concat:blogs[featuredBlog].articles %}
        {% else %}
            {% assign featuredArticles = blogs[featuredBlog].articles %}
        {% endif %}
    {% endif %}
{% endfor %}

{% comment %}
If featuredArticles is not false we should have articles to show - so let's do it!
{% endcomment %}

{% if featuredArticles %}
    {% assign featuredArticles = featuredArticles | sort:'published_at' | reverse %}

    {% comment %}
    Now a quick example of showing the latest 5 articles from our master article list
    {% endcomment %}

    {% for article in featuredArticles limit:5 %}

    {% comment %} 
    Code to show article info: date, title, read more, article image
    {% endcomment %}
    

        <span class="article-block__date">
            {{ article.published_at | time_tag: format: 'month_day_year' }}
        </span> 
        <p><b><a href= "{{ article.url }}">{{ article.title }}</a></b></p>
        <p><a href="{{ article.url }}">{{ 'blogs.article.read_more' | t }}</a></p>

  

        {% if article.image %}
            <div class="content-block__full-image content-block__full-image--large">
              <a href="{{ article.url }}">
                <noscript>
                  {{ article | img_url: '1024x1024' | img_tag: article.title | escape }}
                </noscript>
                <div class="article__photo-container">
                  <div class="article__photo-wrapper" style="padding-top:{{ 1 | divided_by: article.image.aspect_ratio | times: 100}}%;">
                  {% assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                    <img class="lazyload"
                      src="{{ article.image | img_url: '300x300' }}"
                      data-src="{{ img_url }}"
                      data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                      data-aspectratio="{{ article.image.aspect_ratio }}"
                      data-sizes="auto"
                      alt="{{ article.title | escape }}">
                  </div>
                </div>
              </a>
            </div>
         {% endif %}


     <hr class="divider" />

    {% endfor %}
{% endif %}


   Again thanks Jason. 
      

- Charlie
1 Like
Highlighted
New Member
6 0 0

Confirming the solution @Charlie_Horse provided works. I have Articles from multiple Blogs displaying together, sorted by published date. Thank you @Charlie_Horse.

0 Likes