Hello fellow members.

I have the following issue I run into. I have a client, who wants to have similar to facebook timeline. here is how it looks.



IN other words, One blog entry on the left, next on the right, and so on..

I know, how to show all blog entries (thanks to the detailed documentation) but how would i go about this one.

[KK]

Hi,

Let us take Couch out of the equation for a while.
Begin with creating a static HTML/CSS page that displays 4-5 posts in format you mentioned.

Once you are satisfied with the way the posts are displayed, please share the HTML markup here and I'm sure we'll be able to retrofit Couch into the design to make it dynamic.

That is the standard way of using Couch.

Thanks.

Here is the list for html of it.

Code: Select all

<!-- BLOG TIMELINE -->
                        <h2 class="text-center">BLOG TIMELINE</h2>
                        <div class="double-clear"></div>
                        <div class="dima-timeline clearfix dima-timeline-blog boxed-blog blog-list">
                            <div class="line"></div>

                            <div class="timeline_element-left ">
                                <div class="timeline_element-content">
                                    <div class="post ">
                                        <div class="post-img ">
                                            <img src="images/posts/post-list-1.jpg" alt="Brand Consulting">
                                            <div class="link_overlay  ">
                                                <ul class="icons-media">
                                                    <li><a data-animated-link="fadeOut" href="#"><i class="fa fa-link"></i></a>
                                                    </li>
                                                </ul>
                                                <span class="topaz-hover"></span>
                                            </div>
                                        </div>
                                        <div class="post-meta box">
                                            <ul>
                                                <li class="post-on">Posted by Admin on 09 Sept 2014</li>
                                                <li class="post-view"><i class="fa fa-eye"></i> 122 Views</li>
                                                <li class="post-comments"><i class="fa fa-comments"></i> 12 Comments</li>
                                            </ul>
                                        </div>
                                        <div class="post-content box text-start">
                                            <h4><a data-animated-link="fadeOut" href="#">The Psychology of Branding</a>
                                            </h4>
                                            <p>Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris...</p>
                                            <p>Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris...</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="timeline_element-content">
                                    <div class="post ">
                                        <blockquote class="blog-style">
                                            <div class="topaz-border"></div>
                                            <p>“A designer is an emerging synthesis of artist, inventor, mechanic,”</p>
                                            <cite><a data-animated-link="fadeOut" href="">Buckminster Fuller</a>
                                            </cite>
                                        </blockquote>
                                        <div class="post-meta box">
                                            <ul>
                                                <li class="post-on">Posted by Admin on 09 Sept 2014</li>
                                                <li class="post-view"><i class="fa fa-eye"></i> 122 Views</li>
                                                <li class="post-comments"><i class="fa fa-comments"></i> 12 Comments</li>
                                            </ul>
                                        </div>
                                        <div class="post-content box text-start">
                                            <h4><a data-animated-link="fadeOut" href="#">The Psychology of Branding</a>
                                            </h4>
                                            <p>Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris...</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="timeline_element-right">
                                <div class="timeline_element-content">
                                    <div class="post ">
                                        <blockquote class="blog-style">
                                            <div class="topaz-border"></div>
                                            <p>“A designer is an emerging synthesis of artist, inventor, mechanic,”</p>
                                            <cite><a data-animated-link="fadeOut" href="">Buckminster Fuller</a>
                                            </cite>
                                        </blockquote>
                                        <div class="post-meta box">
                                            <ul>
                                                <li class="post-on">Posted by Admin on 09 Sept 2014</li>
                                                <li class="post-view"><i class="fa fa-eye"></i> 122 Views</li>
                                                <li class="post-comments"><i class="fa fa-comments"></i> 12 Comments</li>
                                            </ul>
                                        </div>
                                        <div class="post-content box text-start">
                                            <h4><a data-animated-link="fadeOut" href="#">The Psychology of Branding</a>
                                            </h4>
                                            <p>Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris...</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="timeline_element-content">
                                    <div class="post ">
                                        <div class="post-meta box">
                                            <ul>
                                                <li class="post-on">Posted by Admin on 09 Sept 2014</li>
                                                <li class="post-view"><i class="fa fa-eye"></i> 122 Views</li>
                                                <li class="post-comments"><i class="fa fa-comments"></i> 12 Comments</li>
                                            </ul>
                                        </div>
                                        <div class="post-content box text-start">
                                            <h4><a data-animated-link="fadeOut" href="#">The Psychology of Branding</a>
                                            </h4>
                                            <p>Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris...</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- BLOG TIMELINE -->

[KK]

Hi,

From the markup it is clear that we need to output two groups of posts (left and right) -

Code: Select all

<div class="timeline_element-left ">
    <div class="timeline_element-content">
        <div class="post ">
            ..
        </div>
    </div>

    <div class="timeline_element-content">
        <div class="post ">
            ..
        </div>
    </div>
</div>


<div class="timeline_element-right">
    <div class="timeline_element-content">
        <div class="post ">
            ..
        </div>
    </div>

    <div class="timeline_element-content">
        <div class="post ">
            ..
        </div>
    </div>
</div>

Can be done either by using cms:pages twice or using cms:capture to hold the pages in the two groups.

However, I'm not sure about the criteria on which the posts are to be divided into the two groups - e.g.
a. is it like the first post goes in left, the second in right with the third into the first and so on or
b. if there are 10 posts to display, place the first 5 in left and the next five in right.

It is not clear from the screenshot or the markup.
So could you please let me know how is it going to be?
If possible, get me a link to a live site somewhere where exactly this markup is being used.

Thanks.

Hi KK,

and thanks for your reply.

the theme I am using is http://theme.dima-lab.com/okab/blog-timeline.html
there is no yet the live version of the site I am working on now.

The temporary solution, that I used was the following (with clonable pages, not linked to a full page):

Code: Select all

<cms:set number="<cms:mod k_count '2' />" />
       <cms:if number = '0' >
              <cms:set position="right" />
       <cms:else />
              <cms:set position="left" />
        </cms:if>

However, what I really want to achieve is to get the height of the element (whole mini post) and based on that to move left and right. Kind of like Masonry style.

Thanks, Andrey