Best approach to designing a parent page that displays content from a custom page type
Created 6 years ago by kiltedup

Afternoon, Seeking some Friday inspiration if anyone has a moment to spare. This is a recurring scenario for me and one I need to settle on a best approach. As an example, I have the following structure in pages ....


    Case Study 1 ( Page Type = case_study )
    Case Study 2 ( Page Type = case_study )
    Case Study 3 ( Page Type = case_study )
    Case Study 4 ( Page Type = case_study )
    Case Study 5 ( Page Type = case_study )
    Case Study 6 ( Page Type = case_study )```

Each case study page uses the 'case_study' page type as there are whole bunch of extra fields to populate. Thats all good.

But I want the parent Case Studies page to have a section that displays all Case Studies and links to them.

There seems to be multiple ways to do this but wondering what is considered best approach ?

1. Create a 'case_studies' page type and add the code to the page type layout
2. Create a 'case_studies' layout in the theme and have the case studies page use that layout
3. Or default page type already has a Grid Field type so could add a new grid as one of the options ??
4. Or another approach ........ ?????

End user doesn't want to be seeing / editing Twig so need it to be built in to site/theme.

Any thoughts. Anyone done anything similar?

TIA

Dave
edster  —  6 years ago Best Answer

I would use sub pages.

Do what you were thinking, master directory page, with sub pages.

First off, your page type layout for your root page use the page.children syntax. Example below.

Note the batch(3) will group entries together, so you can easily do row and columns as below.

{% for cols in page.children|batch(3) %}
            <div class="row same-height-row">
                {% for child in cols %}
                    <div class="col-md-4">
                        <div class="box-simple box-white same-height v-margin">
                            <h3>{{ child.title }}</h3>
                            <p class="text-center">$ {{ child.course_price }}</p>   
                            <p>{{ child.lead.text|slice(0,150) ~ '...' }}</p>
                            <a href="{{ url(child.path) }}" class="btn btn-template-main">More Info!</a>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% endfor %}

Then make sure your pages are actually children of the root page. Which you do from the pages module. You can tell they are child pages by them being indented below the root page.

kiltedup  —  6 years ago

Bad cut'n'paste formatting !!!!

Case Studies / ( Page Type = default ) Case Study 1 ( Page Type = case_study ) Case Study 2 ( Page Type = case_study ) Case Study 3 ( Page Type = case_study ) Case Study 4 ( Page Type = case_study ) Case Study 5 ( Page Type = case_study ) Case Study 6 ( Page Type = case_study )

edster  —  6 years ago Best Answer

I would use sub pages.

Do what you were thinking, master directory page, with sub pages.

First off, your page type layout for your root page use the page.children syntax. Example below.

Note the batch(3) will group entries together, so you can easily do row and columns as below.

{% for cols in page.children|batch(3) %}
            <div class="row same-height-row">
                {% for child in cols %}
                    <div class="col-md-4">
                        <div class="box-simple box-white same-height v-margin">
                            <h3>{{ child.title }}</h3>
                            <p class="text-center">$ {{ child.course_price }}</p>   
                            <p>{{ child.lead.text|slice(0,150) ~ '...' }}</p>
                            <a href="{{ url(child.path) }}" class="btn btn-template-main">More Info!</a>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% endfor %}

Then make sure your pages are actually children of the root page. Which you do from the pages module. You can tell they are child pages by them being indented below the root page.

kiltedup  —  6 years ago

WT????

Case Studies / ( Page Type = default )

 Case Study 1 ( Page Type = case_study ) 

 Case Study 2 ( Page Type = case_study ) 

 Case Study 3 ( Page Type = case_study ) 

 Case Study 4 ( Page Type = case_study ) 

 Case Study 5 ( Page Type = case_study ) 

 Case Study 6 ( Page Type = case_study )
kiltedup  —  6 years ago

Thanks for that. I have code that is pretty similar but where I'm stumped is whether I should be dropping this the layout of a custom page type, or drop it in a layout in theme/views/layouts and then select that layout from the page ????

edster  —  6 years ago

This would be in a page type layout, not a theme layout.

Updated above for clarity

kiltedup  —  6 years ago

Cheers. I think I was having some mental block towards creating a page type that would only be used once !

ryanthompson  —  6 years ago

This SCREAMS Streams Module to me. Setup your case studies stream - one page for viewing the list and one page (non-exact URI matching) to handle the view. Then in the page content / layout you'd do this assuming your page structure is like /case-studies/view/{slug} (view is the page in this example):

{% set case = entries('case_studies').findBySlug(request_segments()|last) %}

That will be a little easier to manage (we usually have customers use streams for custom object management).

ryanthompson  —  6 years ago

Using pages makes it harder to pull this stuff out to maybe feature one on a page or in a block or whatever. It's a page and it stays there.

kiltedup  —  6 years ago

Thanks Ryan. Revisiting streams approach right now.

Main reason I had not considered this was no longer having the SEO options as are there in each page and I didn't want to have to start adding extra bits to handle this.

Plus some additional options were being added to page for Twitter Cards (requested to do this - different copy needed). Also, the streams module gets confusing for end users who only really want to edit content, as the layout doesn't make it clear to them what namespace / stream is active.

kiltedup  —  6 years ago

OK - set this up now. Back to SEO. Is there any way to push the stream entry title as the meta title instead of the title of the 'view' page that was created as above?

TIA

ryanthompson  —  6 years ago

Sure - so all you would do is set the template used typically in the metadata.twig partial:

{% do template.set('meta_title', entry.example_title.value) %}

Within the content block.. magic. The template is just a collection of data 😊