Display data on parent page from child pages

SOLVE
tstrack
Contributor | Platinum Partner

I'm curious to know if there has been any headway on this issue (https://community.hubspot.com/t5/Content-Design-Questions/Ways-to-Loop-Through-Collections-of-Landin...) with the recent changes to the Design Manager.

 

Let's say I have a Project Listing page (i.e. /projects) with many child Project pages beneath it (i.e. /projects/project-name).

 

Other than using a Blog or HubDB, is there a way to get page data from the child Project pages and display it on the parent Project Listing page? For example, the parent Project Listing page would loop through all child Project pages, and display the child Project's title, featured image, URL, etc.

0 Upvotes
1 Accepted solution

Accepted Solutions
Jsum
Solution
Key Advisor

In the new design manager, you would create a custom module. in the module you would create a series of fields to create the info for one project. Project title, Project Image, Project what ever; for both the summary and the main content. 

 

You would then group the fields, and in the group settings towards the bottom repeater on. 

 

Copy the group snippet from just below the top of the group settings and paste it into your html area. It will be a for loop containing slugs for all of the fields in your repeater group.

 

Here you get to be creative. First, you need a link to open the main content. You can use a HubL variable to link back to this page, add a query, and use the project title field from you custom module as the value to that query. ex.:

<a href="{{ content.absolute_url }}?project={{ reference_to_title|lower|replace(' ', '-') }}">See Project</a>

Where project is the name of the query so could be anything and reference_to_title would be the system name for your title field, filtered to be lower case and replace spaces with '-'.

 

For the next part there is probably better options but I'm doing this off of the top of my head. You want to hide your main project content until one of the project summary links (above) has been click on, and then only show the main content for that specific project.

 

first capture your query in a variable:

{% set query = request.query_dict.project %}

copy the for loop containing your project fields, paste below this variable. In the first loop, delete your main project content fields, in the second delete your project summary content fields. Now your summaries are separate from your main content so you have much more flexibility. for instance, you could list your projects out in a tile grid, but when someone clicks on a summary link you could have those tiles move to one side of the page and stack vertically to give the main area of the page to the main project content.

 

To hide the main content you just need to wrap the main content's for loop inside an if statement that looks for the "project" variable containing the query. If the query is empty, i.e. does not exist, anything inside the condition will be omitted. 

{% if project %}
    
    {# Main project content for loop #}

{% endif %}

Again, because this is it's own chunk of code you can choose to where you want to display this content when it shows. 

 

Right now, if the project query exists, you will simply loop out all of the projects main content. You need a filter inside the main content loop that will only show the content matching the query. I'm using the project title but you could use a project id or some other peice of info for comparison.

{% if project %}
    
    {% for item in forloop %}

        {% if project equals item.title|lower|replace(' ', '-') %}

            {# show content #}

        {% endif %}

    {% endfor %}

{% endif %}

The basic idea being to compare the query, which is a filtered version of the project title, to the same filtered of the project title so the matching one would be exactly the same and the that project's content would show in the content area. 

 

This is fun and cool, and I have used versions of this in various cases, but keep in mind that a url query is not a unique url to a new page, it is an altered version of the url to one page and I'm pretty sure google isn't indexing query's. because the content filtering is happening on the server, the none of the main project content exists (it's not hidden, it is omitted entirely) on the page so if you are at all concerned about seo then I would suggest just using Hubspot's blogging tool to create a portfolio.

 

You can, however, share a url with a query, or link to a specific project using a query and it can be click on and the page will open with that specific project showing. That is useful for emails and such.

View solution in original post

4 Replies 4
Jsum
Key Advisor

You are describing a blog, or rather a blog repurposed as a portfolio. If you don't want to go that route then you are left with using HubDB or a repeater field with url queries for dynamic content. 

0 Upvotes
tstrack
Contributor | Platinum Partner
Thanks, Jsum. Can you explain the process of using a repeater field with url queries for dynamic content? Sounds interesting.
0 Upvotes
Jsum
Solution
Key Advisor

In the new design manager, you would create a custom module. in the module you would create a series of fields to create the info for one project. Project title, Project Image, Project what ever; for both the summary and the main content. 

 

You would then group the fields, and in the group settings towards the bottom repeater on. 

 

Copy the group snippet from just below the top of the group settings and paste it into your html area. It will be a for loop containing slugs for all of the fields in your repeater group.

 

Here you get to be creative. First, you need a link to open the main content. You can use a HubL variable to link back to this page, add a query, and use the project title field from you custom module as the value to that query. ex.:

<a href="{{ content.absolute_url }}?project={{ reference_to_title|lower|replace(' ', '-') }}">See Project</a>

Where project is the name of the query so could be anything and reference_to_title would be the system name for your title field, filtered to be lower case and replace spaces with '-'.

 

For the next part there is probably better options but I'm doing this off of the top of my head. You want to hide your main project content until one of the project summary links (above) has been click on, and then only show the main content for that specific project.

 

first capture your query in a variable:

{% set query = request.query_dict.project %}

copy the for loop containing your project fields, paste below this variable. In the first loop, delete your main project content fields, in the second delete your project summary content fields. Now your summaries are separate from your main content so you have much more flexibility. for instance, you could list your projects out in a tile grid, but when someone clicks on a summary link you could have those tiles move to one side of the page and stack vertically to give the main area of the page to the main project content.

 

To hide the main content you just need to wrap the main content's for loop inside an if statement that looks for the "project" variable containing the query. If the query is empty, i.e. does not exist, anything inside the condition will be omitted. 

{% if project %}
    
    {# Main project content for loop #}

{% endif %}

Again, because this is it's own chunk of code you can choose to where you want to display this content when it shows. 

 

Right now, if the project query exists, you will simply loop out all of the projects main content. You need a filter inside the main content loop that will only show the content matching the query. I'm using the project title but you could use a project id or some other peice of info for comparison.

{% if project %}
    
    {% for item in forloop %}

        {% if project equals item.title|lower|replace(' ', '-') %}

            {# show content #}

        {% endif %}

    {% endfor %}

{% endif %}

The basic idea being to compare the query, which is a filtered version of the project title, to the same filtered of the project title so the matching one would be exactly the same and the that project's content would show in the content area. 

 

This is fun and cool, and I have used versions of this in various cases, but keep in mind that a url query is not a unique url to a new page, it is an altered version of the url to one page and I'm pretty sure google isn't indexing query's. because the content filtering is happening on the server, the none of the main project content exists (it's not hidden, it is omitted entirely) on the page so if you are at all concerned about seo then I would suggest just using Hubspot's blogging tool to create a portfolio.

 

You can, however, share a url with a query, or link to a specific project using a query and it can be click on and the page will open with that specific project showing. That is useful for emails and such.

View solution in original post

tstrack
Contributor | Platinum Partner

Thanks for the detailed response @Jsum! You always come through!

0 Upvotes