Forum for discussing general topics related to Couch.
14 posts Page 1 of 2
Hello, I'm trying to set up the list view of my site and I want to list all pages belonging to a certain month under the heading of Month, Year and allow navigation between the different months (please see attached image). I have tried doing this archives but I've had no success. It won't allow navigation between the pages for some reason; furthermore, I want to use the date from a variable I set up not the publish date. Any help to achieve this would be greatly appreciated.

Here is the code for the static html section of the list view that shows the pages:
Code: Select all
              <div class="cell-lg-9 offset-top-70 offset-lg-top-0">
                <div data-child="#child-calendar-carousel" data-arrows="true" data-for="#child-calendar-carousel" data-loop="true" data-dots="false" data-swipe="true" data-items="1" data-slide-to-scroll="1" class="slick-slider carousel-parent calendar-carousel">
                  <div class="item">
                    <h2 class="text-bold">June 16, 2016</h2>
                  </div>
                  <div class="item">
                    <h2 class="text-bold">June 17, 2016</h2>
                  </div>
                  <div class="item">
                    <h2 class="text-bold">June 18, 2016</h2>
                  </div>
                </div>
                <!-- Slick Carousel-->
                <div class="hr divider bg-madison"></div>
                <div class="offset-top-60"></div>
                <div id="child-calendar-carousel" data-arrows="false" data-loop="true" data-dots="false" data-swipe="false" data-items="1" data-for=".carousel-parent" class="slick-slider">
                  <!-- June 2016-->
                  <div class="item">
                    <div class="range range-xs-center range-xl-left">
                      <div class="cell-sm-6 cell-md-5 cell-xl-4">
                        <article class="post-event">
                          <div class="post-event-img-overlay"><img src="images/blog/events-01-420x420.jpg" width="420" height="420" alt="" class="img-responsive">
                            <div class="post-event-overlay context-dark"><a href="apply.html" class="btn btn-primary">Book Now</a>
                              <div class="offset-top-20"><a href="event-page.html" class="btn btn-default">Learn More</a></div>
                            </div>
                          </div>
                          <div class="unit unit-lg unit-lg-horizontal">
                            <div class="unit-left">
                              <div class="post-event-meta text-center">
                                <div class="h3 text-bold reveal-inline-block reveal-lg-block">16</div>
                                <p class="reveal-inline-block reveal-lg-block">June</p><span class="text-bold reveal-inline-block reveal-lg-block inset-left-10 inset-lg-left-0">5:00pm</span>
                              </div>
                            </div>
                            <div class="unit-body">
                              <div class="post-event-body text-lg-left">
                                <h6><a href="event-page.html">Spacewalking Conference</a></h6>
                                <ul class="list-inline list-inline-xs">
                                  <li><a href="team-member-profile.html"><span class="icon icon-xxs mdi mdi-account-outline text-middle"></span><span class="inset-left-10 text-dark text-middle">Walter Stanley</span></a></li>
                                </ul>
                              </div>
                            </div>
                          </div>
                        </article>
                      </div>
                      <div class="cell-sm-6 cell-md-5 cell-xl-4 offset-top-50 offset-sm-top-0">
                        <article class="post-event">
                          <div class="post-event-img-overlay"><img src="images/blog/events-02-420x420.jpg" width="420" height="420" alt="" class="img-responsive">
                            <div class="post-event-overlay context-dark"><a href="apply.html" class="btn btn-primary">Book Now</a>
                              <div class="offset-top-20"><a href="event-page.html" class="btn btn-default">Learn More</a></div>
                            </div>
                          </div>
                          <div class="unit unit-lg unit-lg-horizontal">
                            <div class="unit-left">
                              <div class="post-event-meta text-center">
                                <div class="h3 text-bold reveal-inline-block reveal-lg-block">16</div>
                                <p class="reveal-inline-block reveal-lg-block">June</p><span class="text-bold reveal-inline-block reveal-lg-block inset-left-10 inset-lg-left-0">5:00pm</span>
                              </div>
                            </div>
                            <div class="unit-body">
                              <div class="post-event-body text-lg-left">
                                <h6><a href="event-page.html">International Conference on Biomolecular Engineering</a></h6>
                                <ul class="list-inline list-inline-xs">
                                  <li><a href="team-member-profile.html"><span class="icon icon-xxs mdi mdi-account-outline text-middle"></span><span class="inset-left-10 text-dark text-middle">Raymond Salazar</span></a></li>
                                </ul>
                              </div>
                            </div>
                          </div>
                        </article>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

Attachments

I think this task can be solved with <cms:archives />. It is exactly the kind of task that tag was created for. ;)
Here are two samples of its use, and although they do not match exactly your use-case, they could help understand it a bit further.
viewtopic.php?f=4&t=10200#p24505
viewtopic.php?f=8&t=7620&p=26908#p26901
It will be essential to employ k_next_archive_date variable from the <cms:archives /> to build a link to next period with the help of archive-view by <cms:link />:
Code: Select all
<a href="<cms:link masterpage='news.php' year='2010' month='8' />" >Testing Link tag</a>

<a href="<cms:link masterpage='news.php' year="<cms:date k_next_archive_date format='Y' />" month="<cms:date k_next_archive_date format='n' />" />" >Testing Link tag</a>


Unfortunately, archive-view of templates can rely exclusively upon system publish-dates. Kindly reconsider using publish-dates as designed.

Custom editable of date would be used in <cms:pages /> with custom_field parameter, where you'd find pages between 2 dates (if editable with custom date is a datetime type) - usually between first day of month and the first day of next month. Finding dates of previous-next pages (in case some months do not contain any pages) would not be a problem with another <cms:pages /> code, which looks for one page with custom date less or more than known one and sorting desc/asc by that custom date.

I think to get our help in coding this, kindly start with smaller steps, one at a time. :)
Thanks for the quick reply, I'll post the code below of what I have so far (this is my first project with CouchCMS so I'm not very familiar with how everything works just yet). This is showing me a single page under each month and only scrolls through two months even if all the pages belong to the same month or several different ones, with the pages belonging to each month being assigned in no particular order. Can you please point out where I'm going wrong? I really appreciate all the help!

Code: Select all
            <cms:archives masterpage='event.php' type='monthly' >
              <div class="cell-lg-9 offset-top-70 offset-lg-top-0">
                <div data-child="#child-calendar-carousel" data-arrows="true" data-for="#child-calendar-carousel" data-loop="true" data-dots="false" data-swipe="true" data-items="1" data-slide-to-scroll="1" class="slick-slider carousel-parent calendar-carousel">
                  <div class="item">
                    <h2 class="text-bold"><cms:date k_archive_date format='F Y' /></h2>
                  </div>
                  <div class="item">
                    <h2 class="text-bold"><cms:date k_next_archive_date format='F Y' /></h2>
                  </div>
                </div>
                <!-- Slick Carousel-->
                <div class="hr divider bg-madison"></div>
                <div class="offset-top-60"></div>
                <div id="child-calendar-carousel" data-arrows="false" data-loop="true" data-dots="false" data-swipe="false" data-items="1" data-for=".carousel-parent" class="slick-slider">
                  <!-- June 2016-->
              <cms:set compare_event_date="<cms:date k_page_date format='F Y' />" />
              <cms:if compare_event_date = "<cms:date k_archive_date format='F Y' />" >
                <cms:pages masterpage='event.php' start_on=k_archive_date stop_before=k_next_archive_date >
                  <div class="item">
                    <div class="range range-xs-center range-xl-left">
                      <div class="cell-sm-6 cell-md-5 cell-xl-4 offset-top-50 offset-sm-top-0 offset-xl-top-0">
                        <article class="post-event">
                          <div class="post-event-img-overlay"><img src="<cms:show event_image />" width="420" height="420" alt="" class="img-responsive">
                            <div class="post-event-overlay context-dark"><a href="apply.html" class="btn btn-primary">Book Now</a>
                              <div class="offset-top-20"><a href="<cms:show k_page_link />" class="btn btn-default">Learn More</a></div>
                            </div>
                          </div>
                          <div class="unit unit-lg unit-lg-horizontal">
                            <div class="unit-left">
                              <div class="post-event-meta text-center">
                                <div class="h3 text-bold reveal-inline-block reveal-lg-block"><cms:date event_date format='j' /></div>
                                <p class="reveal-inline-block reveal-lg-block"><cms:date event_date format='F' /></p><span class="text-bold reveal-inline-block reveal-lg-block inset-left-10 inset-lg-left-0"><cms:date event_date format='g:i A' /></span>
                              </div>
                            </div>
                            <div class="unit-body">
                              <div class="post-event-body text-lg-left">
                                <h6><a href="<cms:show k_page_link />"><cms:show k_page_title /></a></h6>
                                <ul class="list-inline list-inline-xs">
                                  <li><a href="#"><span class="icon icon-xxs mdi mdi-account-outline text-middle"></span><span class="inset-left-10 text-dark text-middle"><cms:show speaker_name/></span></a></li>
                                </ul>
                              </div>
                            </div>
                          </div>
                        </article>
                      </div>
                    </div>
                  </div>
                <cms:else />
                <div class="item">
                    <div class="range range-xs-center range-xl-left">
                      <div class="cell-sm-6 cell-md-5 cell-xl-4 offset-top-50 offset-sm-top-0 offset-xl-top-0">
                        <article class="post-event">
                          <div class="post-event-img-overlay"><img src="<cms:show event_image />" width="420" height="420" alt="" class="img-responsive">
                            <div class="post-event-overlay context-dark"><a href="apply.html" class="btn btn-primary">Book Now</a>
                              <div class="offset-top-20"><a href="<cms:show k_page_link />" class="btn btn-default">Learn More</a></div>
                            </div>
                          </div>
                          <div class="unit unit-lg unit-lg-horizontal">
                            <div class="unit-left">
                              <div class="post-event-meta text-center">
                                <div class="h3 text-bold reveal-inline-block reveal-lg-block"><cms:date event_date format='j' /></div>
                                <p class="reveal-inline-block reveal-lg-block"><cms:date event_date format='F' /></p><span class="text-bold reveal-inline-block reveal-lg-block inset-left-10 inset-lg-left-0"><cms:date event_date format='g:i A' /></span>
                              </div>
                            </div>
                            <div class="unit-body">
                              <div class="post-event-body text-lg-left">
                                <h6><a href="<cms:show k_page_link />"><cms:show k_page_title /></a></h6>
                                <ul class="list-inline list-inline-xs">
                                  <li><a href="#"><span class="icon icon-xxs mdi mdi-account-outline text-middle"></span><span class="inset-left-10 text-dark text-middle"><cms:show speaker_name/></span></a></li>
                                </ul>
                              </div>
                            </div>
                          </div>
                        </article>
                      </div>
                    </div>
                  </div>
                  </cms:pages>
                </cms:if>
                </div>
              </div>
            </cms:archives>
Hey, kindly simplify anything posted here. Without complete css/html/js we can't replicate the same look and therefore can't properly match you request. Furthermore, please withdraw from posting bloated html if all we need is to discuss logical solution.

Let's start with the code sample that outputs all pages of each month, sorted by date, grouped by month.
Code: Select all

<cms:archives masterpage=k_template_name type='monthly' >
    <p>Print out of pages of: <cms:date k_archive_date format='F, Y' />
    <cms:pages masterpage=k_template_name start_on=k_archive_date stop_before=k_next_archive_date orderby='publish_date' order='asc'>
        <div class="item">
            <h2 class="text-bold"><cms:show k_page_title />: <cms:date k_page_date format='F j, Y' /></h2><!--Spacewalking Conference: June 18, 2016-->
        </div>
    <cms:if k_paginated_bottom><hr/></cms:if>
    </cms:pages>
</cms:archives>



Here's how it looks with 3 sample pages of the template:
2017-08-16-020830.png
2017-08-16-020830.png (14.09 KiB) Viewed 6490 times


Now, we can move on from this starting point. What kind of comparison do you want to add here? I saw <cms:if /> in your latest post and can't figure out what is expected.
Sorry for posting "bloated HTML", the reason I did this is that I've already tried what you suggested (and several other variations of it) and I keep getting, as I said, either only one page showing up on the current month and another one on the next (September), or I get 3 pages showing up on August (regardless of their publish date). This depends on whether the pages tag is before or after a certain div, hence I posted the code for that entire section so that I could be corrected on any possible mistake that could be causing this. I've accomplished what you showed on your last post with simple examples but I can't translate it to my actual site. I wanted to use the js Owl carousel to list the pages according to the month but I can't get it to work with couch.
@PedroC97, the code @trendoman provided in his last post is perfect for listing out pages the way you want.

Your problem seems to be integrating it with the HTML/JS mandated by the particular carousel you are using.

So let us do this -
Create a *fully functioning* but static (no Couch tags in it) example showing at least three months of dummy data (i.e three slides of carousel).

Either host it somewhere on the web where we can take a look at it or zip and post the complete design here (it should be complete enough for us to see it functioning).

I am sure it won't be too difficult to retrofit Couch tags into it to make it dynamic.
Hi KK, I suspected it was my integration with the carousel that was causing the problem. As you requested, I will attach a link (it wont let me directly upload since file is over 2 MiB) to download the zip of the static page with all the relevant js/css/fonts/images so that it appears identical to what I see! Thank you and @trendoman for all the help, I really appreciate it!

https://www.dropbox.com/s/6flqfoi205f033y/Event%20List%20Page%20%28Static%29.zip?dl=0
I am already looking at it. *Working* static design helps a lot in understanding the task.

I will explain how this carousel works:
First, it has a list of months with the following markup:
Code: Select all
<div class="item">
    <h2 class="text-bold">June, 2016</h2>
</div>
<div class="item">
    <h2 class="text-bold">July, 2016</h2>
</div>
<div class="item">
    <h2 class="text-bold">August, 2016</h2>
</div>


Then slick-slider's js-script looks for posts that belong to each month expecting posts to be grouped by months in the same order.
Code: Select all
<!-- Start listing events of the first month (correspondent to the previous list of months) -->

<div class="item">

    <!-- First event of the topmost month-->

    <article class="post-event">
        <div class="post-event-img-overlay">
            <img ... >
        </div>
        <div class="unit unit-lg unit-lg-horizontal">
            <div class="unit-left">
                ...
            </div>
            <div class="unit-body">
                ...
            </div>
        </div>
    </article>

    <!-- Second event of the topmost month-->

    <article class="post-event">
        <div class="post-event-img-overlay">
            <img ... >
        </div>
        <div class="unit unit-lg unit-lg-horizontal">
            <div class="unit-left">
                ...
            </div>
            <div class="unit-body">
                ...
            </div>
        </div>
    </article>   
</div>

<!-- End of listing events of the first month -->

<!-- Start listing events of the next month (correspondent to the list of months) -->

<div class="item">

    <!-- First event of the second month-->

    <article class="post-event">
        <div class="post-event-img-overlay">
            <img ... >
        </div>
        <div class="unit unit-lg unit-lg-horizontal">
            <div class="unit-left">
                ...
            </div>
            <div class="unit-body">
                ...
            </div>
        </div>
    </article>

    <!-- Second event of the second month-->

    <article class="post-event">
        <div class="post-event-img-overlay">
            <img ... >
        </div>
        <div class="unit unit-lg unit-lg-horizontal">
            <div class="unit-left">
                ...
            </div>
            <div class="unit-body">
                ...
            </div>
        </div>
    </article>   
</div>

<!--  etc  -->


Now this structure-recognition helps to build up relevant code for the CouchCMS.
..
Continuation of previous post.

Now, having done the html-decomposition, let's get to CouchCMS coding.

Below is what we expect to see in code (skipping irrelevant html) in the place of our months and monthly posts:
Code: Select all
<div class="cell-lg-9 offset-top-70 offset-lg-top-0">
    <div data-child="#child-calendar-carousel" data-arrows="true" data-for="#child-calendar-carousel" data-loop="true" data-dots="false" data-swipe="true" data-items="1" data-slide-to-scroll="1" class="slick-slider carousel-parent calendar-carousel">

        <cms:show list_of_months />

    </div>
    <!-- Slick Carousel-->
    <div class="hr divider bg-madison"></div>
    <div class="offset-top-60"></div>
    <div id="child-calendar-carousel" data-arrows="false" data-loop="true" data-dots="false" data-swipe="false" data-items="1" data-for=".carousel-parent" class="slick-slider">

        <cms:show list_of_posts />

    </div>
</div>


Let's get to actual building of the lists:

Code: Select all


<cms:set list_of_months = '' scope='global' />
<cms:set list_of_posts  = '' scope='global' />

<cms:archives masterpage=k_template_name type='monthly' >
    <cms:capture into='each_month' >
        <div class="item">
            <h2 class="text-bold"><cms:date k_archive_date format='F, Y' /></h2>
        </div>
    </cms:capture>
    <cms:set list_of_months = "<cms:concat list_of_months each_month />" scope='global' />

    <cms:ignore>
        // When the cms:archives tag finishes its iteration routine,
        // we are gonna have a full list of available months.
        // Sample:
        <!--
                  <div class="item">
                    <h2 class="text-bold">June, 2016</h2>
                  </div>
                  <div class="item">
                    <h2 class="text-bold">July, 2016</h2>
                  </div>
                  <div class="item">
                    <h2 class="text-bold">August, 2016</h2>
                  </div>
        -->

        // Next, let's build up a similar list with posts.
    </cms:ignore>

    <cms:capture into='monthly_posts'>

        <!-- <cms:date k_archive_date format='F Y' /> -->
        <cms:pages masterpage=k_template_name start_on=k_archive_date stop_before=k_next_archive_date orderby='publish_date' order='desc'>
            <cms:if k_paginated_top>
            <div class="item">
                <div class="range range-xs-center range-xl-left">
            </cms:if>

                    <div class="cell-sm-6 cell-md-5 cell-xl-4">
                        <article class="post-event">
                          <div class="post-event-img-overlay"><img src="<cms:show event_image />" width="420" height="420" alt="" class="img-responsive">
                            <div class="post-event-overlay context-dark"><a href="apply.html" class="btn btn-primary">Book Now</a>
                              <div class="offset-top-20"><a href="<cms:show k_page_link />" class="btn btn-default">Learn More</a></div>
                            </div>
                          </div>
                          <div class="unit unit-lg unit-lg-horizontal">
                            <div class="unit-left">
                              <div class="post-event-meta text-center">
                                <div class="h3 text-bold reveal-inline-block reveal-lg-block"><cms:date k_page_date format='j' /></div>
                                <p class="reveal-inline-block reveal-lg-block"><cms:date k_page_date format='F' /></p><span class="text-bold reveal-inline-block reveal-lg-block inset-left-10 inset-lg-left-0"><cms:date k_page_date format='g:i A' /></span>
                              </div>
                            </div>
                            <div class="unit-body">
                              <div class="post-event-body text-lg-left">
                                <h6><a href="event-page.html"><cms:show k_page_title /></a></h6>
                                <ul class="list-inline list-inline-xs">
                                  <li><a href="team-member-profile.html"><span class="icon icon-xxs mdi mdi-account-outline text-middle"></span><span class="inset-left-10 text-dark text-middle"><cms:show speaker_name/></span></a></li>
                                </ul>
                              </div>
                            </div>
                          </div>
                        </article>
                    </div>

            <cms:if k_paginated_bottom>
                </div><!-- /range -->
            </div><!-- /item -->
            </cms:if>

        </cms:pages>
    </cms:capture>

    <cms:set list_of_posts = "<cms:concat list_of_posts monthly_posts />" scope='global' />

</cms:archives>




The code above can be placed in template above anything, to make it easier to review, like this:
Code: Select all
<cms:template .... />
   
<cms:set list_of_months = '' scope='global' />
<cms:set list_of_posts  = '' scope='global' />

<cms:archives masterpage=k_template_name type='monthly' > 
    ...
</cms:archives>

<!DOCTYPE html>
...


It is working in my setup with sample pages. Hopefully it works for you as well.

With this approach, you should be able to couchify other elements, for example - calendar on the page.
Let us know if you need more help.
Hi trendoman, this actually makes a lot more sense now and it works quite well! However, I'm having two issues; I can't get events past August 16 to appear on the page, if the date is August 17 or above they just wont show up on the list for some reason. The second problem is that the months show up out of order if they are not posted sequentially (i.e if I post events for February before January, February shows up first when scrolling through the months). This is problematic because sometimes we get events that are months in advance and we have to put them in before others that are happening sooner. Thanks a lot for all the help so far, you're a lifesaver!
14 posts Page 1 of 2