topic Re: Blog Post Listing Fix in CMS Development

Blog Post Listing Fix

bstock98 — Wed, 15 Apr 2020 00:33:22 GMT

Hey Everyone,

I have a blog post listing module that I am trying to change the display with. Currently it is trying to display each listing in a collumn within one row. I'd rather it display each listing in a row of its own, but I cannot seem to figure out how to do this.

Below are the HTML and CSS for the module. If you are able to show me which sections need altering in order to make this change, I would greatly appreciate it.

HTML:

{% set blog_selector = blog_by_id(module.select_blog) %}

{% if module.filter == 'id_only' %}
{% set blogPosts = blog_recent_posts(module.blog_id, 3) %}
{% else %}
{% set blogPosts = blog_recent_tag_posts(module.blog_id, module.tag, 3) %}
{% endif %}

<div class="news-listing">
<div class="news-listing__header">
{% icon
extra_classes='news-listing__header-icon',
name='newspaper',
purpose='decorative',
style='SOLID',
%}
<h3>{{ module.title_text }}</h3>
<a href="{{ blog_selector.absolute_url }}">{{ module.button_text }}</a>
</div>

<div class="news-listing__body">
{% for post in blogPosts %}
<div class="news-listing__entry">
<div class="news-listing__entry-row">
{% icon
name='calendar',
purpose='decorative',
extra_classes='news-listing__entry-icon'
%}
<h6 class="news-listing__entry-date">
{{ post.publish_date_localized }}
</h6>
</div>
<h4>{{ post.title }}</h4>
<div class="news-listing__entry-row news-listing__entry-row--author">
{{ post.author_name }}  |  Author
</div>
<div class="news-listing__entry-summary">
{{ post.post_list_content|safe|truncatehtml(300, '...', false) }}
</div>
<a href="{{ post.absolute_url }}">Read more</a>
</div>
{% endfor %}
</div>
</div>

CSS:

.news-listing {
background-color: #FFF;
border: 1px solid #CCC;
}

.news-listing__header {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-bottom: 1px solid #CCC;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 2rem;
}

.news-listing__header h3 {
margin: 0;
}

.news-listing__header-icon > svg {
fill: #ff8210;
margin-right: 0.5rem;
width: 2rem;
}

.news-listing__header a {
margin-left: auto;
}

.news-listing__body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 2rem;
}

.news-listing__entry {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin: 1rem 0;
width: 100%;
}

.news-listing__entry-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}

.news-listing__entry-icon > svg {
width: 1rem;
margin-right: 0.5rem;
}

Thank you for all your help,

Ben S.

Re: Blog Post Listing Fix

sharonlicari — Thu, 23 Apr 2020 09:13:53 GMT

Hey @bstock98

Apologies for the delayed answer. Do you still need help with this matter?

Thank you

Sharon

Re: Blog Post Listing Fix

bstock98 — Thu, 23 Apr 2020 14:10:24 GMT

Sharon,

Yes I would appreciate any help you can give.

Thank you,

Ben S.

Re: Blog Post Listing Fix

sharonlicari — Thu, 23 Apr 2020 15:06:09 GMT

Hey @bstock98

Thank you for your prompt response!

I'll tag a few of our experts that can help you with this.

Hey @alyssamwilie @david_eic @ajchapman20 could you please share your thoughts with @bstock98 ?

Thank you & Stay Safe

Sharon

Re: Blog Post Listing Fix

alyssamwilie — Thu, 23 Apr 2020 15:13:05 GMT

Hi @bstock98

If you want each post to show on it's own row you'll want to remove the display: flex from your news-listing__body -

.news-listing {
background-color: #FFF;
border: 1px solid #CCC;
}

.news-listing__header {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-bottom: 1px solid #CCC;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 2rem;
}

.news-listing__header h3 {
margin: 0;
}

.news-listing__header-icon > svg {
fill: #ff8210;
margin-right: 0.5rem;
width: 2rem;
}

.news-listing__header a {
margin-left: auto;
}

.news-listing__body {
padding: 2rem;
}

.news-listing__entry {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin: 1rem 0;
width: 100%;
}

.news-listing__entry-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}

.news-listing__entry-icon > svg {
width: 1rem;
margin-right: 0.5rem;
}

Re: Blog Post Listing Fix

bstock98 — Thu, 23 Apr 2020 15:39:54 GMT

Thank you @sharonlicari and @alyssamwilie !

That worked like a charm. I appreciate your help.

Re: Blog Post Listing Fix

SSherph3 — Tue, 06 Apr 2021 03:35:23 GMT

I assume the fastest, easiest option would be to build a international custom repeater module with a view to permit you to upload and get rid of classes as you see suit. I see you already positioned display