Blog Layout

Thanks Drew, much appreciated.

I've got the 'featured post' listed out and styled separately but it' still outputting it to the list below, so i've a duplicate post situation going on...any ideas?

<perch:if exists="perch_item_first">
<perch:before>
<div class="featured-post header-blocks" >
    <div class="row">       
        <div class="medium-7 columns">
</perch:before>
            <div class="featured article-image">
                <perch:if exists="image"><img src="<perch:blog id="image" type="image" width="50" height="50" crop="true" />" alt="<perch:blog id="postTitle" />" /></perch:if>
                <p class="featured meta">
                    <span class="day"><perch:blog id="postDateTime" format="%d" /></span> 
                    <span class="month"><perch:blog id="postDateTime" format="%b" /></span>
                </p>
            </div><!-- /feature-image -->
        </div><!-- /medium-7 -->

        <div class="medium-5 columns">
            <div class="featured excerpt-container">
                <h2><a href="<perch:blog id="postURL" />" rel="bookmark" class="entry-title"><perch:blog id="postTitle" /></a></h2>
                <perch:blog id="excerpt" type="textarea" textile="true" />
                <a class="lrg-btn-b" href="<perch:blog id="postURL" encode="false" />">Read More</a>
            </div><!-- /excerpt-container -->
        </div><!-- /medium-5 -->                    
<perch:after>
    </div>
</div><!--/featured-posts -->           
<perch:else />

<div class="main-content section">
    <div class="row">
</perch:before>
    <div class="small-4 columns">
        <div class="article-image">
            <perch:if exists="image"><img src="<perch:blog id="image" type="image" width="50" height="50" crop="true" />" alt="<perch:blog id="postTitle" />" /></perch:if>
            <p class="meta">
                <span class="day"><perch:blog id="postDateTime" format="%d" /></span>
                <span class="month"><perch:blog id="postDateTime" format="%b" /></span>
            </p>
        </div>
        <div class="excerpt-container">
            <h3><a href="<perch:blog id="postURL" />" rel="bookmark" class="entry-title"><perch:blog id="postTitle" /></a></h3>
            <perch:blog id="excerpt" type="textarea" textile="true" />
            <a class="lrg-btn-b" href="<perch:blog id="postURL" encode="false" />">Read More</a>
        </div><!--/ excerpt-container -->
    </div><!--/ small-4 --> 
<perch:after>
    </div>
</div><!--/ main-content -->
</perch:if>

<perch:if exists="paging">
    <div class="paging">
        Page <perch:blog id="current_page" /> of <perch:blog id="number_of_pages" />
        <perch:blog id="page_links" encode="false" />
        <perch:if exists="not_first_page">
            <a href="<perch:blog id="prev_url" encode="false" />">Previous</a>
        </perch:if>
        <perch:if exists="not_last_page">
            <a href="<perch:blog id="next_url" encode="false" />">Next</a>
        </perch:if>
    </div>
</perch:if>
</perch:after>

Hi Drew,

Sorry to be a pain, but i can't seem to figure this one out. Any changes i make to the nesting causes the layout to break.

I know this is probably out with the scope of your support. But, could you pin point where I've gone wrong?

Thanks again,

Hi Drew,

Thanks for getting back to me on that. You were right, it was a complete mess. I've tidied it up the best i can and it's now displaying the correct way but it's still not 100% there.

It's stopped duplicating the 1st post (yay) and is listing out the remaining items underneath the 'featured post' but now the code outputs the items (small-4) outwith it's parent div (main-content).

Any ideas?

<perch:before>
<div class="featured-post header-blocks" >
    <div class="row">       
        <div class="medium-7 columns"></perch:before>
        <perch:if exists="perch_item_first">
        <div class="featured article-image">
                <a href="<perch:blog id="postURL" />" rel="bookmark"><perch:if exists="image"><img src="<perch:blog id="image" type="image" width="635" crop="true" />" alt="<perch:blog id="postTitle" />" /></perch:if></a>
                <p class="featured meta">
                    <span class="day"><perch:blog id="postDateTime" format="%d" /></span> 
                    <span class="month"><perch:blog id="postDateTime" format="%b" /></span>
                </p>
            </div><!-- /feature-image -->
        </div><!-- /medium-7 -->

        <div class="medium-5 columns">
            <div class="featured excerpt-container">
                <h2><a href="<perch:blog id="postURL" />" rel="bookmark" class="entry-title"><perch:blog id="postTitle" /></a></h2>
                <perch:blog id="excerpt" type="textarea" textile="true" />
                <a class="lrg-btn-b" href="<perch:blog id="postURL" encode="false" />">Read More</a>
            </div><!-- /excerpt-container -->
        </div><!-- /medium-5 -->                    
    </div>
</div><!--/featured-posts -->

<div class="main-content section">
    <div class="row">
        <perch:else />
        <div class="small-4 columns">
            <div class="article-image">
                <a href="<perch:blog id="postURL" />" rel="bookmark"><perch:if exists="image"><img src="<perch:blog id="image" type="image" width="50" height="50" crop="true" />" alt="<perch:blog id="postTitle" />" /></perch:if></a>
                <p class="meta">
                    <span class="day"><perch:blog id="postDateTime" format="%d" /></span>
                    <span class="month"><perch:blog id="postDateTime" format="%b" /></span>
                </p>
            </div>
            <div class="excerpt-container">
                <h3><a href="<perch:blog id="postURL" />" rel="bookmark" class="entry-title"><perch:blog id="postTitle" /></a></h3>
                <perch:blog id="excerpt" type="textarea" textile="true" />
                <a class="lrg-btn-b" href="<perch:blog id="postURL" encode="false" />">Read More</a>
            </div><!--/ excerpt-container -->
        </div><!--/ small-4 -->
        </perch:if>
    </div>
</div><!--/ main-content -->

<perch:after>
    </ul>
    <perch:if exists="paging">
        <div class="paging">
            Page <perch:blog id="current_page" /> of <perch:blog id="number_of_pages" />
            <perch:blog id="page_links" encode="false" />
            <perch:if exists="not_first_page">
                <a href="<perch:blog id="prev_url" encode="false" />">Previous</a>
            </perch:if>
            <perch:if exists="not_last_page">
                <a href="<perch:blog id="next_url" encode="false" />">Next</a>
            </perch:if>
        </div>
    </perch:if>
</perch:after>

Hi Drew,

Thanks for getting back to me on this. I tried that previously and it didn't' work. What happens there is the 'main-content' div gets repeated, so all the news items are piled onto of each other instead of repeating within 'main-content'.

Not sure if it'll be helpful but here's a link to the site.

Thanks again.

Sure thing, Drew. I've stripped it down to the bare bones.

<perch:before>
<div class="featured-article-container" >
    <div class="row"></perch:before>
        <perch:if exists="perch_item_first">
            <div id="featured-post"></div>
    </div>                  
</div><!--/featured-article -->

<div class="main-content-container">
    <div class="row">
        <perch:else />
            <div class="small-articles"></div>
        </perch:if>
    </div>
</div><!--/ main-content -->

Tried that as well. But when i did, the featured-article works just fine but for the lower articles it repeats the "main-content-container" (which is set to width 100%) with every new post, creating a stacking effect.

The way we had it before creates the exact layout i'm looking for but it doesn't render "small-articles" within "main-content-container".

I'm really stumped on this one. Thanks again for all your help.

p.s - not sure if you meant to remove the <perch:before> tag but i gave that a go just in case and it caused all kinds of craziness.

Tried this as well

<perch:if exists="perch_item_first">
    <div class="featured-article-container" >
        <div class="row">
            <div id="featured-post"></div>
        </div>
    </div><!--/featured-article -->

    <div class="main-content-container">
        <div class="row">
            <perch:else />
            <div class="small-articles"></div>
        </div>
    </div><!--/ main-content -->
</perch:if>

Which outputs this html

<div class="featured-article-container" >
    <div class="row">
            <div id="featured-post"></div>
        </div>                  
</div><!--/featured-article -->

<div class="main-content-holder">
    <div class="row">
            <div class="small-articles"></div>
    </div>
</div><!--/ main-content -->

<div class="small-articles"></div>

<div class="small-articles"></div>

So that way only works for the second latest news post but then anything older falls outwith the "main-content-holder".

That's the one! Thanks Drew.

Ugh, so simple. Oh well, lesson learned. :)

Thanks again.