This forum has moved to a new location and is in read-only mode. Please visit talk.octobercms.com to access the new location.
I would like to change the default blog post list to include the featured image of each post. I copied the contents of the blogPosts and blogPost components to make a new partial.
I changed this section in blogPosts:
<ul class="post-list">
{% for post in posts %}
<li>
<h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
<p class="info">
Posted
{% if post.categories.count %} in {% endif %}
{% for category in post.categories %}
<a href="{{ category.url }}">{{ category.name }}</a>{% if not loop.last %}, {% endif %}
{% endfor %}
on {{ post.published_at|date('M d, Y') }}
</p>
<p class="excerpt">{{ post.summary }}</p>
</li>
{% else %}
<li class="no-data">{{ noPostsMessage }}</li>
{% endfor %}
</ul>To this, which includes the featured images code from blogPost:
{% for post in posts %}
<div class="custom-posts">
{% if post.featured_images.count %}
<div class="posts-image">
{% for image in post.featured_images %}
<a href="{{ post.url }}"><img data-src="{{ image.filename }}" src="{{ image.path }}" alt="{{ image.description }}"></a>
{% endfor %}
</div>
{% endif %}
<div class="posts-info">
{{ post.published_at|date('M d, Y') }} {% if post.categories.count %} in {% endif %}
{% for category in post.categories %}
<a href="{{ category.url }}">{{ category.name }}</a>{% if not loop.last %}, {% endif %}
{% endfor %}
</div>
<div class="posts-text">
<h4><a href="{{ post.url }}">{{ post.title }}</a></h4>
{{ post.summary }}
</div>
</div>
{% endfor %}However, there is one issue. This code now completely removes the visibility of my existing blog post that was originally shown on my front page. My news page still shows the post in the original list format just fine. I am still relatively new to October CMS, so I am having a hard time finding how to fix my problem. Any help would be greatly appreciated. :)
Last updated
I would also like to know, and how to style the post list with css. Because that is the only thing keeping me from finishing my website and creating future projects with octobercms now.
Hi !Mandyrobin! I also customize my post lists to show featured image/images too. These codes of mine work beautifully: {% set posts = blogPosts.posts %}
<ul class="h-entry" id="post-list" itemscope itemtype="http://schema.org/Blog">
{% for post in posts %}
<li itemprop="blogPost">
{# NOTE THIS SECTION #}
{% if post.featured_images.count %}
<div id="post-list-featured-images-top">
{% for image in post.featured_images|slice(0, 1) %}
<a href="{{ image.path }}">
<img data-src="{{ image.filename }}" src="{{ image.path }}" alt="{{ image.description != null ? image.description : image.filename }}" title="{{ image.title != null ? image.title : post.title }}">
</a>
{% endfor %}
</div>
{% endif %}
<ul class="post-list-categories p-category">
{% for category in post.categories %}
<li>
<a href="{{ category.url }}">{{ category.name }}</a>
</li>
{% endfor %}
</ul>
<h3 class="post-list-title p-name" itemprop="headline">
<a class="u-url" href="{{ post.url }}" itemprop="url">{{ post.title }}</a>
</h3>
<div class="post-list-date">
- <time class="dt-updated" datetime="{{ post.published_at|date('Y-m-d\TH:i:sP') }}" itemprop="dateModified">{{ post.published_at|date('M d, Y') }}</time>
</div>
</li>
{% else %}
<div class="no-post-message">{{ noPostsMessage }}</div>
{% endfor %}
</ul>Also note that I use slice in my markup --> {% for image in post.featured_images|slice(0, 1) %} . This ensures that I only get one featured image in case I have many.
Hi @subdesu16299! To style it with CSS, simply give a class in the HTML markup, then style that by refer to the class in CSS. If you use the default markup, and want to know the class name used, simply inspect element on your browser.
Hello, thx for the information. So if you like to know how to keep the original AND your own custom layout go: plugins/rainlab/blog/components/posts and simply creat another default_2.htm. Afterwords just go to your page and do this '{% component 'blogPosts::default_2.htm' %}'. Works like a charm. Good luck
Is not a good idea create a new default.htm inside the plugin component folder, because the plugins are designed for work out of the box, and, if the plugin is updated by the author, this folder is overwritten
The good practice is: You create a partial inside Partial Folder in the Theme Folder. Attach the Blog Component to this partial. That's it! the Component will inject all the post objects and you can do whatever you want with them
Here is an example:
This a partial file in: themes/pollozen/partials/example.htm
[blogPosts]
pageNumber = "{{ :page }}"
categoryFilter = "local-news"
postsPerPage = 5
noPostsMessage = "No posts found"
sortOrder = "published_at desc"
categoryPage = "categoryPage"
postPage = "singlePost"
==
/*In this point, the blogPost component has been injected all the posts objets, the next step is display them in my own style*/
<div class="row">
<ul class="small-grid">
{% for post in posts %}
<li class="col-md-6 col-sm-6">
<div class="small-post">
{% for image in post.featured_images|slice(0,1) %}
<div class="cp-thumb"><img src="{{image.path}}" alt=""></div>
{% endfor %}
<div class="cp-post-content">
<h3><a href="{{post.url}}">{{post.title}}</a></h3>
<ul class="cp-post-tools">
<li><i class="icon-1"></i> {{post.published_at | date('d M, Y') }}</li>
</ul>
</div>
</div>
</li>
{% endfor %}
</ul>
</div>And you can use this partial as many times you need in your websites pages
This has helped me a lot!
Thanks to @Mandyrobin for asking that question and to @Atok and @PolloZen for answering it!
TailWind style.
<div class="post-list">
{% for post in posts %}
<div class="max-w-md lg:flex">
{% for image in post.featured_images|slice(0, 1) %}
<div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden"
style="background-image: url('{{ image.path }}')"
data-alt="{{ image.description != null ? image.description : image.filename }}"
title="{{ image.title != null ? image.title : post.title }}">
</div>
{% endfor %}
<div class="border-r border-b border-l border-grey-light lg:border-l-0 lg:border-t lg:border-grey-light bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
<div class="mb-8">
<p class="text-sm text-grey-dark flex items-center">
<!--
<svg class="fill-current text-grey w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20">
<path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z"/>
</svg>
Members only
-->
</p>
<div class="text-black font-bold text-xl mb-8"><a href="{{ post.url }}">{{ post.title }}</a></div>
<p class="text-grey-darker text-base">{{ post.excerpt }}</p>
</div>
<div class="flex items-center">
<!--<img class="w-10 h-10 rounded-full mr-4"
src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg"
alt="Avatar of Jonathan Reinink">-->
<div class="text-sm">
<p class="text-black leading-none">{% if post.categories.count %} in {% endif %}
{% for category in post.categories %}
<a href="{{ category.url }}">{{ category.name }}</a>{% if not loop.last %}, {% endif %}
{% endfor %}</p>
<p class="text-grey-dark">on {{ post.published_at|date('M d, Y') }}</p>
</div>
</div>
</div>
</div>
{% else %}
<div class="no-data">{{ noPostsMessage }}</div>
{% endfor %}
</div>
<div class="post-list">
{% for post in posts %}
<div class="max-w-md lg:flex">
{% for image in post.featured_images|slice(0, 1) %}
<div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden"
style="background-image: url('{{ image.path }}')"
data-alt="{{ image.description != null ? image.description : image.filename }}"
title="{{ image.title != null ? image.title : post.title }}">
</div>
{% endfor %}
<div class="border-r border-b border-l border-grey-light lg:border-l-0 lg:border-t lg:border-grey-light bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
<div class="mb-8">
<p class="text-sm text-grey-dark flex items-center">
<!--
<svg class="fill-current text-grey w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20">
<path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z"/>
</svg>
Members only
-->
</p>
<div class="text-black font-bold text-xl mb-8"><a href="{{ post.url }}">{{ post.title }}</a></div>
<p class="text-grey-darker text-base">{{ post.excerpt }}</p>
</div>
<div class="flex items-center">
<!--<img class="w-10 h-10 rounded-full mr-4"
src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg"
alt="Avatar of Jonathan Reinink">-->
<div class="text-sm">
<p class="text-black leading-none">{% if post.categories.count %} in {% endif %}
{% for category in post.categories %}
<a href="{{ category.url }}">{{ category.name }}</a>{% if not loop.last %}, {% endif %}
{% endfor %}</p>
<p class="text-grey-dark">on {{ post.published_at|date('M d, Y') }}</p>
</div>
</div>
</div>
</div>
{% else %}
<div class="no-data">{{ noPostsMessage }}</div>
{% endfor %}
</div>
1-9 of 9