Blog image slider with specific blog list

[Juan_Garza]

Hi.

We are working on our new blog page, and we need to develop an image carrousel o gallery witch need to have the following statements:

1. It needs to be feed by a specific list on our blogs.

2. Each image or content needs to be clickable to the Blog post.

here is a graphic example of what we need.

By the way, we have already got the code for the image slider but we haven't been able to make it work under the feed parameters we need.

I will appreciate if you can help me with this

[TRooInbound · Accepted solution]

Hi @Juan_Garza,

It looks like you have to create feed slider with specific categories/topics wise.

Implement slider code on feed its depends on which slider plugin used.

We are using owl carousel plugin where required slider in our HubSpot Projects. I believe in everyone uses only one Slider plugin in all slider requirement because developer use with HTML Structure of that plugin and no need to an investigation in every time do something different.

As per my point of I don't know which slider plugin you will use.

I going to give you Blog Feed with Owl Slider

follow this reference link steps -  demo

now compare your blog listing code structure with this code.

<div class="post-listing owl-carousel owl-theme">
    <div class="post-item item">
	   {{ some HubL code }}
	</div>
</div>

just add classes in your page listing code

in your case you have to create multiple sliders with diffrent diffrent class name like 

<div class="post-listing owl-carousel01 owl-theme">
    <div class="post-item item">
	   {{ some HubL code }}
	</div>
</div>

<div class="post-listing owl-carousel02 owl-theme">
    <div class="post-item item">
	   {{ some HubL code }}
	</div>
</div>

let know if this is not working than kindly send us your test page or like a link so I can tell a perfect solution for this problem.

Did my post help answer your query? Help the Community by marking it as a solution.

Team TRooInbound

[Jsum · Accepted solution]

@Juan_Garza,

You already of the code ready so you probably wouldn't want to switch to a new setup...

If you have ensured that your sliders are working from your static html code, all you need to do is integrate it into your blog listing page.

The blog list is essentially a loop. {% for content in contents %} {# listing markup & html #}  {% endfor %}.

If you are familiar with other content management systems, WordPress for instance, than you should understand the basic concepts of a forloop. Your wrapper html goes outside the loop, the code creating the single item of the list goes instead the list so it repeats. 

<div class="slider_wrapper_code">

{% for content in contents %}
   
    <div class="slider_item_code"></div>

{% endfor %}

</div>

The contents loop is a generally loop that pulls all blog items of the blog you are using. This will list out all of your blogs.

You want to break your blogs up. If you want one of your lists to contain all blogs then use the above loop. For the other lists, you need to decide how you want to break them up. I would suggest by topic as this is really your only/best option. 

for this you can use a custom HubL function, which can be found in the functions section of the HubL docs:

{% set topic_posts = blog_recent_topic_posts('default', 'marketing-tips', 5) %}
{% for topic_post in topic_posts %}
    <div class="post-title">{{ topic_post.name }}</div>
{% endfor %}

While the contents loop is available by default in your blog template, you can create you own version of this loop and define parameters. Also, because you are creating this yourself it can be used anywhere, not just the blog page.

This is pretty simple and you can literally copy and paste this. The first part "set" creates a new loop and sets it to the "topic_post" variable. The parameters of this loop are that it will use the default blog (can change to blog id), only blogs with the topic 'marking-tips' will be included (notice the hyphen '-' because it takes the topic slug not name), and only 5 posts will be included in the list. 

After that it is no different than the contents loop, only instead of contents you would use your new loop name, 'topic_post', in this case. 

You can create one of these for each of your lists, wrap the loop in your slider wrapper code, put your individual item code inside the loop, and everything should work for you.

[TRooInbound · Accepted solution]

Hi @Juan_Garza,

It looks like you have to create feed slider with specific categories/topics wise.

Implement slider code on feed its depends on which slider plugin used.

We are using owl carousel plugin where required slider in our HubSpot Projects. I believe in everyone uses only one Slider plugin in all slider requirement because developer use with HTML Structure of that plugin and no need to an investigation in every time do something different.

As per my point of I don't know which slider plugin you will use.

I going to give you Blog Feed with Owl Slider

follow this reference link steps -  demo

now compare your blog listing code structure with this code.

<div class="post-listing owl-carousel owl-theme">
    <div class="post-item item">
	   {{ some HubL code }}
	</div>
</div>

just add classes in your page listing code

in your case you have to create multiple sliders with diffrent diffrent class name like 

<div class="post-listing owl-carousel01 owl-theme">
    <div class="post-item item">
	   {{ some HubL code }}
	</div>
</div>

<div class="post-listing owl-carousel02 owl-theme">
    <div class="post-item item">
	   {{ some HubL code }}
	</div>
</div>

let know if this is not working than kindly send us your test page or like a link so I can tell a perfect solution for this problem.

Did my post help answer your query? Help the Community by marking it as a solution.

Team TRooInbound