How to Show Blog Posts, Videos, and Podcast like Timeline on the Blog Page?

[RahulDubey137]

Hello,

I want to Show Blog Posts, Videos, and Podcast like Timeline on Blog Page like Neil Patel does on his blog. How can I do that?

I'm using a custom child theme and here is my blog page: https://learndigitalwithrahul.com/blog

Looking forward to your help.

Thanks!

https://learndigitalwithrahul.com/blog

[Victor Font]

Neil is displaying his posts as list items. He's not even using the standard markup for articles. All he is doing is displaying an image and title within a h2 element linked to the post/podcast.

To do this in a Genesis based theme, you have to create your own custom blog template where only the title and featured image are retrieved in the loop. The opening and closing list item tags would go before and after the loop respectively. The left/right display is handled by CSS classes.

Creating a template of this complexity requires a lot of custom programming work. You could try searching for a plugin that can modify the loop this way, but I won't be surprised if you can't find one.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[RahulDubey137]

Thanks for your response Victor. I remember that during the last 3 years of me using Genesis, every time I posted in this community, you are the one who responded first. I'm grateful to you for this, Victor.

Coming back to my query,

That sounds complex and since I don't have the required skills, I would better retain my current design.

However, with my current design, I'm able to see the featured image of each blog post 2 times on the blog page. And to my surprise, this is happening on mobile devices only.

How can I fix this?

[Victor Font]

You have a custom theme. I can tell from the source code, the first featured image is not coming from Genesis. This is what I see in the source:

<div class="trp-entry-image">

That class, "trp-entry-image", is not a Genesis class. It's a custom class the someone added to your style sheet. It could be coming from a custom code your developer added or a plugin. I can't tell from the front end.

Either way, you can remove the display by deleting this CSS at line 1619 in bk.css:

.trp-entry-image {
    display: block;
}

Whatever is loading the image will continue to do so, it just won't display any longer. Best case, you should find what loading the second image and remove the code.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[RahulDubey137]

This reply has been marked as private.

[Author]

Posts