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

6 years ago

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.
Nathaniel Nwosu

Nathaniel Nwosu 0 points

6 years ago

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

Nathaniel Nwosu 0 points

6 years ago

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

6 years ago

I think you want something along the lines of

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

Nathaniel Nwosu 0 points

6 years ago

Ah, thank you