I am working on a Hubspot COS website and I need to be able to run custom queries on blog posts and display a list of those blog posts in a module on the home page and in the sidebar on the website.
Where do I start? I have tried using the RSS module, but it is not specific enough for my needs.
If you have any advise it would be much appreciated. Thanks!
I was able to use blog_recent_topic_posts() to solve this problem:
<div class="row-fluid">
{% set posts = blog_recent_topic_posts('3904474513', 'featured-resource', 3) %}
{% for post in posts %}
{% set topics = post.topic_list %}
<div class="span4 resource">
<div class="resource-icon{% for topic in topics %} {{ topic.slug }}{% endfor %}"></div>
<img src="{{ post.featured_image }}" alt="{{ post.name }}">
<div class="resource-text">
<p class="r-type">
{% for topic in topics %}
{% unless topic == 'featured resource' %}
{{ topic.name }}
{% endunless %}
{% endfor %}
</p>
<h3 class="r-title">{{ post.name }}</h3>
</div>
</div>
{% endfor %}
</div>
Related
Display blog posts with a specific tag that blogs have - Shopify
For example, if the blog contains the tag Vegan, and needs to show related blogs that contain the tag Vegan,
if the blog has the tag is egg show related blogs with egg tag.
now my code now shows the same related blogs for all the blogs on the website, even if the tag doesn't match or is not applied to that blog. here is the blog with tags tinyurl.com/294769gb
<div class="wrapper">
<h4 style="margin-left: 1%;">Related Recipes</h4>
<div class="res">
{% for article in blogs.Recipes.articles limit:8 %}
{% if article.tags contains 'Vegan' %}
<div class="njohn_search_otherpage">
<a href="{{ article.url }}" title="{{ article.title | escape }}">
<div class="crop">{{ article.image.src | img_url: 'medium' | img_tag: article.title }}</div>
<div>{{ article.title }}</div> </a> </div>
{% endif %}
{% endfor %}
</div>
</div>
On the desktop version of our site, we have a 3 column section (the theme calls is text-adverts) with one about pickup, one about delivery, one about shipping. On mobile, it automatically converts to a flexslider with no arrows or really any way of knowing to swipe unless you watch it long enough. I'd much rather just have the 3 stacked so no users miss this critical info.
I've found the code dealing with the text-adverts on mobile but I don't know what to replace it with. Any help is much appreciated.
<div class="container d-block d-md-none">
<div class="row text-advert-section mobile-homepage-text-adverts flexslider text-adverts-alignment--{{ text-advert--alignment }}">
<ul class="slides">
{% for block in section.blocks %}
{%- assign advert_has_link = false -%}
{% if block.settings.link != blank %}
{%- assign advert_has_link = true -%}
{% endif %}
<li {{ block.shopify_attributes }}>
<div class="grid__item text-advert-section__item{% if advert_has_link %} text-advert-section__item--link{% endif %}">
{% if advert_has_link %}<a href="{{ block.settings.link }}">{% endif %}
{% if block.settings.icon != 'none' %}
<div class="text-advert-section__icon-wrapper {{ section.settings.icon-size }}">
<i data-feather="{{ block.settings.icon }}"></i>
</div>
{% endif %}
<div class="text-advert-section__text-wrapper">
{% if block.settings.heading != blank %}
<span class="text-advert-section__header type-subheading type-subheading--1">{{ block.settings.heading | escape }}</span>
{% endif %}
{% if block.settings.subheading != blank %}
<span class="text-advert-section__sub-header h6">{{ block.settings.subheading | escape }}</span>
{% endif %}
</div>
{% if advert_has_link %}</a>{% endif %}
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
The flexslider is being initialised by javascript. So you need to find the script that initialises the slider. Most likely it will look something like this: $('.flexslider').flexslider({})
You should also remove the flexslider class from the div with class text-advert-section - because it shouldn't utilise any flexslider code.
How can I make it so that the most recent comment display first? I haven't been able to find this in the documentation and currently my comments are out of order.
This is in my article template:
{% for comment in article.comments %}
<li id="{{ comment.id }}" class="comment{% unless number_of_comments > article.comments_count %}{% if forloop.first %} first{% endif %}{% endunless %}{% if forloop.last %} last {% endif %}">
{% include 'comment' %}
</li>
{% unless forloop.last %}
and in my comments include:
<div class="grid">
<div class="grid__item medium-up--one-quarter">
<span class="comment-author">{{ comment.author }}</span>
<span class="comment-date">
{{ comment.created_at | time_tag: format: 'month_day_year' }}
</span>
</div>
<div class="grid__item medium-up--three-quarters">
<div class="rte">
{% comment %}ly_code_replace_for_[ comment.content ]_begin{% endcomment %}{% include 'ly-content' with comment %}{{ ly_translation }}{% comment %}ly_code_replace_end{% endcomment %}
</div>
</div>
</div>
UPDATE: In order to resolve this I had to add:
{% assign artComments = article.comments | sort: "created_at" | reverse %}
You can use the reversed parameter in your for loop tag:
{% for comment in article.comments reversed %}
... do your thing
{% endfor %}
I have a shopify blog with over 150 articles in it
{% assign countItem = 0 %}
{% for article in blogs.recipes.articles %}
{% if countItem < 3 %}
{% if article.tags contains product.title %}
{% assign countItem = countItem | plus: 1 %}
<li class="article">
<a href="{{ article.url }}">
<img src="{{ article | img_url: 'grande' }}" alt="{{ article.title }}" />
<span class="title">{{ article.title }}</span>
</a>
</li>
{% endif %}
{% endif %}
{% endfor %}
However blogs.recipes.articles only returns 50.
Any way to remove this limitation?
Shopify limits the results to 50 so as to balance the server load. As per shopify docs.
Don't ever paginate a collection by more than 50, that's how many products maximum you should query per page. Be respectful of Shopify's app servers. If you are not using any paginate tags, pagination does kick in behind the scene and you will only receive the first 50 products in said collection.
However I have tried to load more than 50 products by using paginate tag. But that slows the page load and also the page may become unresponsive if the number of records is large. You can give it a try as following:-
{% paginate blogs.recipes.articles by 500 %}
{% assign countItem = 0 %}
{% for article in blogs.recipes.articles %}
{% if countItem < 3 %}
{% if article.tags contains product.title %}
{% assign countItem = countItem | plus: 1 %}
<li class="article">
<a href="{{ article.url }}">
<img src="{{ article | img_url: 'grande' }}" alt="{{ article.title }}" />
<span class="title">{{ article.title }}</span>
</a>
</li>
{% endif %}
{% endif %}
{% endfor %}
{% endpaginate %}
I'm trying to accomplish the following, but I can't seem to get the img src to populate correctly with the iteration number using Shopify's liquid language.
{% for i in (1..11) %}
<div class="item">
<img src="{{ 'item-{{i}}.jpg' | asset_url }}" alt="Item {{i}}" />
</div>
{% endfor %}
Try this instead, your Liquid is trying to assign a render {{i}} inside another render {{}} which is not correct as they do not nest:
{% for i in (1..11) %}
<div class="item">
{% capture src %}item-{{i}}.jpg{% endcapture %}
<img src="{{ src | asset_url }}" alt="Item {{i}}" />
</div>
{% endfor %}
This works for me...