Forum

Thread tagged as: Question, Blog

Blog - Two Columns

I'm trying to set blog up with two columns. I've attached my goal and what I currently have.

Perch: 2.8.23, PHP: 5.4.45, MySQL: mysqlnd 5.0.10 - 20111026 - $Id: c85105d7c6f7d70d609bb4c000257868a40840ab $, with PDO
Server OS: Linux, cgi-fcgi
Installed apps: content (2.8.23), assets (2.8.23), categories (2.8.23), perch_blog (5.0)
App runtimes: <?php $apps_list = array( 'content', 'categories', 'perch_blog', );
PERCH_LOGINPATH: /perch
PERCH_PATH: /home/mutualme/public_html/perch
PERCH_CORE: /home/mutualme/public_html/perch/core
PERCH_RESFILEPATH: /home/mutualme/public_html/perch/resources
Image manipulation: GD Imagick
PHP limits: Max upload 128M, Max POST 32M, Memory: 168M, Total max file upload: 32M
F1: dc1fef2ad0fcd9f943c02ebb43d85dbc
Resource folder writeable: Yes
DOCUMENT_ROOT: /home/mutualme/public_html
HTTP_HOST: www.mutualmemoir.com
REQUEST_URI: /perch/core/settings/diagnostics/
SCRIPT_NAME: /perch/core/settings/diagnostics/index.php

Intentions:

<!-- Open row -->
            <div class="row clearfix">

                <!-- Open col one -->
                <div class="col-one">
                    <article>
                        <header class="article-header">
                            <h1>Article Title</h1>
                            <h2>Posted by Trevor on Saturday, January 23rd, 2016</h2>
                        </header>
                        <p>Post content</p>
                    </article>
                </div>
                <!-- //Close col one -->

                <!-- Open col two -->
                <div class="col-two">
                    <article>
                        <header class="article-header">
                            <h1>Article Title</h1>
                            <h2>Posted by Trevor on Saturday, January 23rd, 2016</h2>
                        </header>
                        <p>Post content</p>
                    </article>

                </div>
                <!-- //Close col two -->
            </div>
            <!-- //Close row -->

post_in_list.html Template >> I'm not sure how to bring in the second column.

<perch:before>
<!-- Open row -->
            <div class="row clearfix">

                <!-- Open col one -->
                <div class="col-one">
</perch:before>
    <article>
        <header class="article-header">
        <h1><a href="<perch:blog id="postURL" />" rel="bookmark" class="entry-title"><perch:blog id="postTitle" /></a></h1>
        <h2><perch:blog id="postDateTime" format="%d %B %Y" /></h2>
        </header>
        <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><perch:blog id="excerpt" type="textarea" textile="true" /></p>
        <p>Comments: <perch:blog id="postCommentCount"/></p>
   </article>
<perch:after>
            </div>
    <perch:if exists="paging">
        <p>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>
        </p>
    </perch:if>
</perch:after>

Thanks in advance.

Trevor Brandt

Trevor Brandt 0 points

  • 5 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

Thanks Drew.

Is this looking right?

<perch:before>
<!-- Open row -->
            <div class="row clearfix">
</perch:before>
<perch:every nth-child="odd">
        <!-- Open col one -->
                <div class="col-one">
    <article>
        <header class="article-header">
        <h1><a href="<perch:blog id="postURL" />" rel="bookmark" class="entry-title"><perch:blog id="postTitle" /></a></h1>
        <h2><perch:blog id="postDateTime" format="%d %B %Y" /></h2>
        </header>
        <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><perch:blog id="excerpt" type="textarea" textile="true" /></p>
        <p>Comments: <perch:blog id="postCommentCount"/></p>
   </article>
        </div>
<perch:else />
    <!-- Open col two -->
                <div class="col-two">
    <article>
        <header class="article-header">
        <h1><a href="<perch:blog id="postURL" />" rel="bookmark" class="entry-title"><perch:blog id="postTitle" /></a></h1>
        <h2><perch:blog id="postDateTime" format="%d %B %Y" /></h2>
        </header>
        <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><perch:blog id="excerpt" type="textarea" textile="true" /></p>
        <p>Comments: <perch:blog id="postCommentCount"/></p>
   </article>

                </div>
                <!-- //Close col two -->
</perch:every>

    <perch:if exists="paging">
        <p>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>
        </p>
    </perch:if>
</perch:after>

It's only displaying one post (and I have three) and I have it set to display up to 10.

Drew McLellan

Drew McLellan 2638 points
Perch Support

If it's only the class that changes, I'd do this instead:

<perch:before>
<!-- Open row -->
            <div class="row clearfix">
</perch:before>

    <perch:every nth-child="odd">    
        <!-- Open col one -->
        <div class="col-one">
    <perch:else />
        <!-- Open col two -->
        <div class="col-two">
    </perch:if>

        <article>
            <header class="article-header">
            <h1><a href="<perch:blog id="postURL" />" rel="bookmark" class="entry-title"><perch:blog id="postTitle" /></a></h1>
            <h2><perch:blog id="postDateTime" format="%d %B %Y" /></h2>
            </header>
            <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><perch:blog id="excerpt" type="textarea" textile="true" /></p>
            <p>Comments: <perch:blog id="postCommentCount"/></p>
       </article>

   </div>


<perch:after>
            </div>
    <perch:if exists="paging">
        <p>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>
        </p>
    </perch:if>
</perch:after>

Thank you for the help. It isn't giving me the result I'm going for. I'm new to this so I'll have to sit and look through the code a bit.

https://www.mutualmemoir.com/ << is the result it produced

Where this is what I'm trying to do: https://mutualmemoir.com/index2.html

I put the code you provided in the template post_in_list.html. Any other suggestions? Thanks in advance.

Drew McLellan

Drew McLellan 2638 points
Perch Support

Looks like a typo:

<perch:every nth-child="odd">    
        <!-- Open col one -->
        <div class="col-one">
    <perch:else />
        <!-- Open col two -->
        <div class="col-two">
    </perch:if>

Should be:

<perch:every nth-child="odd">    
        <!-- Open col one -->
        <div class="col-one">
    <perch:else />
        <!-- Open col two -->
        <div class="col-two">
    </perch:every>