Forum

Thread tagged as: Question, Blog

Blog Posts Layout

Hello,

I thought I would ask before I went straight to CSS in case Perch had a possible solution that would make this easier. I would like to create this layout for my blog posts: https://zurimagazine.com/example.jpg however I have a couple of concerns of how it would actually work.

  • How will i tell perch to make every 3rd post a wide image?
  • Would it be easier to create a field that my content creators can tick to use the wide image template when publishing a post?
  • Is there a way to guarantee that the wide image style post will only be used on every 3rd post?

Any ideas are appreciated. Nathaniel

Nathaniel Nwosu

Nathaniel Nwosu 0 points

  • 6 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

How will i tell perch to make every 3rd post a wide image?

Use a <perch:every> tag in your template.

Would it be easier to create a field that my content creators can tick to use the wide image template when publishing a post?

Add both the wide and the regular image - you'll need both as when you add another post, the 3rd item will change.

Is there a way to guarantee that the wide image style post will only be used on every 3rd post?

Yes - as above.

Drew this is exactly what I was looking for, thank you very much

Hey Drew,

Just to double check, this would be the right way to do it


<perch:before> <ul class="hfeed listing"></perch:before> <li class="hentry"> <a href="<perch:blog id="postURL" />" rel="bookmark" class="entry-title"> <perch:if exists="image"><img src="<perch:blog id="image" type="image" width="325" height="244" crop="true" />" alt="<perch:blog id="postTitle" />" /></perch:if> </a> <div class="right"> <h2><a href="<perch:blog id="postURL" />" rel="bookmark" class="entry-title"><perch:blog id="postTitle" /></a></h2> <p class="entry-published date"><perch:blog id="postDateTime" format="%d %B %Y" /></p> <div class="description entry-summary"> <a href="<perch:blog id="postURL" />" rel="bookmark" class="entry-title" id="excerpt"> <perch:blog id="excerpt" type="textarea" textile="true" words="35" append="..." help="35 words max - make it snappy, exciting and interesting!" /> <!-- <p>Comments: <perch:blog id="postCommentCount"/></p> --> </a> </div> </div> </li> <perch:every count="3"> <li class="hentry"> <a href="<perch:blog id="postURL" />" rel="bookmark" class="entry-title"> <perch:if exists="image"><img src="<perch:blog id="image" type="image" width="620" height="297" crop="true" />" alt="<perch:blog id="postTitle" />" /></perch:if> </a> <div class="right"> <h2><a href="<perch:blog id="postURL" />" rel="bookmark" class="entry-title"><perch:blog id="postTitle" /></a></h2> <p class="entry-published date"><perch:blog id="postDateTime" format="%d %B %Y" /></p> <div class="description entry-summary"> <a href="<perch:blog id="postURL" />" rel="bookmark" class="entry-title" id="excerpt"> <perch:blog id="excerpt" type="textarea" textile="true" words="35" append="..." help="35 words max - make it snappy, exciting and interesting!" /> <!-- <p>Comments: <perch:blog id="postCommentCount"/></p> --> </a> </div> </div> </li> </perch:every>
Drew McLellan

Drew McLellan 2638 points
Perch Support

I think you want something along the lines of

<perch:every count="3">
    ... wide image ...
<perch:else />
    ... normal image ...
</perch:every>

Ah, thank you