Modular News Feed - Methods

Archive
1

Hi , Sorry really struggling as I try and learn grav.
I have been looking at trying to use a way to get to loop through a child under a module to get post items, then use a simple scroller / slide idea to display the articles of news

I tried doing this with starting with a modular item called _features taken from the woo template.

The page layout from under admin

_testimonials
Where i have then created a sub dir called 01.blog then added the pages below it
so _testimonials
_modular_blog 01.blog
_modular_blog/item sub directory non prefixed

Is this the correct way or I dont need to use the 01.blog entry and just have the items listed as sub directories underneath

I have then looked at the code in blogs and item twig and seem to get really lost in it

because the testimonials (user/theme/woo/templates/modular/testimonals.twig.html)

could some one point us how to loop through the articles and get the heading title and the content as I just cant seem to return anything!

So please the best practises for accomplishing something like this would be appreciated
Thank you

2

Can you please edit the post and use backticks around your code? As missing _ before the folder name can change the result.

3 
_testimonials
modular/blog/01.blog
modular/blog/item

Since posting I found that it doesn't need to be in a sub-directory of 01.blog I can just leave the folders in the route of _testimonials

I have just included a image of the current layout of pages

but struggle to work out to loop through the directories and access the page content etc Grav

I kinda of understand that I need to get the items as collection of pages and then step through them outputting the fields of title and content in to a bullet list

but struggling how to do it and find anything to give me direction even after looking at the blog code of antimatter

thanks for replying though

4

The testimonials twig, in that theme, iterates and outputs an array of testimonial quotes taken from its own page header. See https://github.com/getgrav/grav-theme-woo/blob/develop/templates/modular/testimonials.html.twig

So by default it won’t show anything related to its child pages.

An example of how such thing works can be found in the Antimatter theme: https://github.com/getgrav/grav-theme-antimatter/blob/develop/templates/blog.html.twig#L22-L24

You can download the “Blog site” skeleton which has a working example of a blog page: https://raw.githubusercontent.com/getgrav/grav-skeleton-blog-site/develop/pages/01.blog/blog.md

5

Finally got a kinda of solution, it may not be pretty, but I am not the best programmer / designer, but someone might find it useful.

Top Level
01.Page

title: Testimonals
content:
    items: '@self.modular'
    order:
        by: default
        dir: asc
        custom:
            - _testimonials
menu: Home

SubDirectory
_testimonals

testiomonals.md

title: testimonials

sitemap:
    changefreq: monthly 
    priority: 1.03

content:
    items: @self.children
    order:
        by: date
        dir: desc
    limit: 4

then create modular subpages under _testimonals

subpage

title: 'Testimonals 1'
content:
    items: '@self.modular'
    order:
        by: default
        dir: asc
        custom:
            - _testimonials

Another fantastic little bit of code

google this click here

Subpage

title: 'Sunshine in the Hills'
content:
    items: '@self.modular'
    order:
        by: default
        dir: asc
        custom:
            - _testimonials

sunshine

testing a link this here

the code for the template is as follows

{% block content %}
{% set collection = page.collection() %}

{{ content }} 
                <ul class="slides">
                    {% for post in collection %}
                        <li>
                            <blockquote>
                            <h4>{{ post.title }}</h4>
                                <p> {{ post.content }}</p>
                                
                            </blockquote>
                        </li> 
                    {% endfor %}
                </ul>

            </div>
        </div>
    </div>
    <span><i class="quote-right fa fa-quote-right"></i></span>
</div>
{% endblock %} 

css 

This was using / devolped created with a the woo theme which has the font-awesome included so css used

#testimonials .quote-left {
    left: 5%;
}

#testimonials .quote-left, #testimonials .quote-right {
    position: absolute;
    top: 50%;
    color: #fff;
    font-size: 40px;
    margin-top: -25px;
}

.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

file can be downloaded by https://1drv.ms/u/s!Asx43U2CMes5gXFvdaL0au9t4Lsg
this doesnt included the woo theme, so that will need to be downloaded first and this will just update the files to work