Using The Grid with dynamic content for nested portfolios

[janand]

Hi,

I’ve looked through all of the documentation for The Grid, as well as the videos, but can’t find an answer to this question.

This was one of my pre-purchase questions and I was assured this was possible with the Pro theme but I cannot figure it out.

First, I’d like to create a home page featuring a masonry-type portfolio layout with each cell displaying a featured image of a specified post assigned to that cell with a rollover heading determined by the title and category of that same specified post. Something like this example.

Secondly, I’d like to have each cell link to another sub-portfolio when clicked.

Is this possible? And if so, how would I go about this or learn how to do this?

Thanks,

Natasha

[ruenel]

Hey Natasha,

Thanks for reaching out. With TheGrid plugin, you can create the same layout. You can check the example here: https://theme-one.com/the-grid/praia/

Or you can make use of the Posts (Tiles) dynamic element to create this layout. With a little tweak, you can achieve like the example site.

We would be happy to give you a demonstration. To better assist you with your issue, kindly provide us access to your site so that we can create an example page. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[janand]

Thanks! Sent a secure note with the requested info! Thank-you!

[christian]

Hey Natasha,

Upon checking, you currently have 1 post and no portfolio so it would be hard to demonstrate without content. Please get back to us if you have filled your site with posts or portfolios.

I’d also recommend that you get familiar with the usage of the Post Elements by watching the tutorial video in our here https://youtu.be/cMnCiVV3zCA. More tutorials are available on our Youtube Channel.

If you wish to uses The Grid plugin, the general setup instruction is here https://theme.co/docs/the-grid

Hope that helps.

[janand]

Yes, I have gone through all those videos and the documentation but neither explains what I want to do. That’s why I have posted here… asking for help. I noted that in my very first post. If I had found the answer in those videos, I would not have posted here.

I didn’t want to waste time putting up content before I knew I could actually set up the site I wanted. This site isn’t a blog, it’s just an art site. I’ve also tried installing Design Cloud templates in hopes I could find the answer to what I want to do there but I could not. So I used WP Reset to reset the site. I have been struggling with this for two weeks now.

I can upload some example media but that’s all I can do at this point. I’m setting up this site for somebody else but at this point, I’m feeling very frustrated because I’m being sent in circles. I emailed for support on this issue and was sent to the documentation and the videos. When I replied I had already watched them and read the support documentation, I was sent to the forum for help. Now I’m being sent to the videos and documentation again.

I’d be happy to input demo content. Do you have demo content I can import?

EDIT: I can set up some dummy posts and upload some images. Would that suffice?

[ruenel]

Hey Natasha,

Yes, please do upload some dummy posts with images so we can create a demo grid for you.

Thank you in advance.

[janand]

So just regular posts with dummy text and a feature image? Would that work?

[christian]

Hey Natasha,

Yes, dummy text and featured image would do. If you don’t want to use Post, you can use the Porfolio Post Type.

By the way, I’m sorry if you felt being sent in circles but I specifically asked that you fill in some post OR portfolio on your site for us to create a demo. The rest were just specific links that serve as a recommendation and reminder not only for you but to other readers as well because this is a forum so it might be of use to them get started also. I hope you understand.

Thanks.

[janand]

I did not know you meant that I was required to make posts for you to do a demo. For me, I misunderstood your post as providing two options to get the example layout or you could create a demo I could learn from using imported demo content. I had thought this because themes typically come with demo content to provide examples. As Pro is unlike any theme or site building system I had worked with before, I did not understand that I had to create this demo content for you to provide a demonstration. It’s been overwhelming and confusing and I’ve already reset the site multiple times.

I’ll look into creating those dummy posts.

[christian]

Hey Natasha,

We actually have “demo content” available in our Design Cloud but it’s part of a design set. That means you’ll begin with a predesigned site. The grid that you want still needs setting up though and that setup is what we’ll “demonstrate” as there’s no automatic way to achieve it. If you’re okay with this, read on.

To import “demo content with predesigned site”, import a Site from our Design Cloud.

If you have no Site to import in particular, just search for look for Crafty and click the picture to import it. Forgive me for providing another documentation link for you but I need to confirm that you’ve learned the Design Cloud usage from this link https://theme.co/docs/design-cloud.

Once you’ve imported a Site, you won’t have to create demo content manually. Just note again the Site settings will be imported too. I’ve read you can reset your site anyway so I believe it won’t be a problem for you.

Get back to us once you’ve finished importing a site and we’ll “demonstrate” the grid part.

Thank you for your patience in learning Pro.

[janand]

Thank-you but I think my issue with importing from Design Cloud is there’d be no way to keep your demo around as a reference point and wipe the site back to default values so it’s no longer using Crafty or its values. As I’ve seen on this forum, deleting a Design Cloud template can be tedious, troublesome, and may not always work unless the site is wiped clean using something like WP Reset. In that way, I think it’s different from the example pages a user typically gets when importing a theme’s demo content wherein the settings remain at default and the demo content doesn’t determine the look of the site everywhere. I could be wrong though?

So I’ll look into creating some Portfolio post types and hope I get that right.

Thanks for staying with me and for your patience as I get through this stuff.

[friech]

Hi Natasha,

I did not see portfolio posts on your site, so I installed a plugin named FakerPress to create dummy portfolio items, you can’t create a portfolio Grid without portfolio items. Please note dummy portfolio items are not demo from Design Cloud, Design Cloud has nothing to do with this, I just want to put that aside.

At this stage, I think you realize that this is a bit tricky to do with THE GRID plugin, not impossible but tricky.

I see that you have Essential Grid installed as well, if you ask me, I would suggest using Essential Grid because it has this Cobble Layout feature.

Another possibility is to use the CSS GRID ELEMENT (see this example here), this is more advance though so I would still recommend the Essential Grid.

But if you’re up for the challenge here is a Crash Course on how the CSS GRID element works. And because this GRID needs to be dynamic you’re going to power this GRID with the Looper feature.

And you need to Effects Module for the animation of the Images inside the Grid.

@janand

Secondly, I’d like to have each cell link to another sub-portfolio when clicked.

This part of your specification needs a customization because as you know by default the Grid Items/cell link to the portfolio items itself not, to its category.

Now please decide first, what feature you’re going to use so we can guide you in the right direction, will you continue with the THE GRID plugin? or switch to Essential Grid or CSS GRID element.

Thanks,

[janand]

Hi,

Thanks! I had come here to say that I had just uploaded five portfolio items just now with dummy text (the watercolour illustrations).

As I’ve watched two of the Themeco video tutorials on CSS Grid Element (crash course and cell placement/overlapping) and I believe it’s native to the builder (is that right?), I think going with CSS Grid Element would be best. I’ve watched the crash course several times, trying to get the approx. hang of it.

I think the most important features are feeding in dynamic content and being able to link each cell to a sub-portfolio. I remember the Post Elements video introduces the usage of loopers and effects but should I watch the more in-depth series on loopers and effects?

Eg. You’ll see ‘Animals’ as one of the portfolio items and it being in the category ‘animals’. I’d like this cell to link to a sub-portfolio of paintings featuring animals – ideally with the ability to add WooCommerce functionality per each painting.

Thanks so much for all of your help on this.

Natasha

[christian]

Hey Natasha,

You mentioned that each painting will have WooCommerce functionality. Only the Products post type can have WooCommerce functionality so with that said, instead of Portfolio, set each of your painting as Products.

Products would be the best you’ll use anyway as WooCommerce has a Featured Image or Thumbnail for Product Categories. You’ll see this is important for what you need below.

I’ve created the demo page (see link in the secure note). The demo page has.

1. Cell to link to a sub-portfolio of paintings.
2. The sub-portfolio is a WooCommerce archive containing the paintings with WooCommerce functionality.

---

Now the setup of the page is this:

1. The Grid Element is the Looper Provider responsible for outputting Product Categories (or what you mean by main portfolio).

2. The Cell is setup up as a link by setting <a> as the tag.

3. The link then is a Dynamic Content outputting the URL of the Product Archive page or what you mean by Sub Portfolio.

4. The Cell’s background is the Product Category Thumbnail I’ve mentioned above. This is also a Dynamic Content. Powering this is the Term Meta thumbnail_id.

5. The Cell then contains a Text element which also contains the Category Title which is also Dynamic Content.

The rest of the setup is just styling. We can proceed with styling once you get a hang of the:

1. Grid setup: Documentation | Tutorial Video
2. Looper setup Documentation | Tutorial Videos
3. Dynamic Content setup. Documentation | There’s no specific tutorial video for the Dynamic Content yet but you can see it being used in the Looper tutorial videos as well as the usage of the Post element here.

With all that said, the next thing you need to do is just fill up the Product Categories (Main Portfolio) and Products (Sub Portfolio). I’ve already set 2 categories as an example. You can fill that in with products.

Just note that because that because the Cell is the Looper Consumer, you can’t control the Cell settings individually so it’s not possible for you to re-order a main portfolio (product category). With that said, you might want to manually setup the Grid Element rather than using the Looper and Dynamic Content setup. Manual setup is also simpler for this case.

Hope that helps.

[janand]

Awesome! Thank-you so much! Can I have about a week or so to study this and then get back to you for help on styling?

[christian]

Glad to hear that, Natasha. Feel free to get back to us when you’re ready to move on to styling.