Custom Portfolio Layouts

[BillK]

Hi guys,
I’m migrating a client’s existing site to X, but can’t figure out how to re-create their existing portfolio layout.

The existing portfolio item looks like this: https://jtarchitecture.com/projects/melkerson-house/
It has a grid of 3 thumbnails, plus a side area with description text and a button.
The theme is Striking Multiflex.

Here is the staging site with X pro and the same portfolio item, exactly as it came in from the previous theme: https://staging2.jtarchitecture.com/portfolio-item/mt-baker-house/
As you can see on that page, clicking on any image launches a nice slideshow.

I need the client to use the standard “add portfolio item” to update things automatically for them. They choose their images for the gallery/slideshow, enter their text, select a category, and be done.

As you can see I have started to create a new portfolio layout on the staging site, but it is still not quite what I need. The layout needs to pull the images from the portfolio item into the left 2/3, and pull the text into the right hand column, and the image thumbnails, when clicked, should launch a nice lightbox slideshow.

I’ve tried to customize “the content” so that I can pull the images in one place, and the text in another but I can’t see how to pull individual elements in.

I also am not entirely sure how to add the navigation to the custom layout so that they can breadcrumb their way back to where they just were.

I need just a general approach to how I should best recreate the original site portfolio structure here to get as close as possible.
Thanks!

[tristup]

Hi @BillK,

Thanks for reaching out.
What you are expecting that can be achieved using the custom Layout build through Layout Builder and assign it to the Single Portfolio page. I would suggest you go through the following articles and the videos that help.

Layout Builder Overview | Themeco Docs

Layout Builder: Single Templates

Hope it helps.
Thanks

[BillK]

Thank you-- I am well into building a layout with the layout builder currently.
But-- I can’t seem to be able to separate data (gallery ID for one column, and portfolio text in another column). All the data from a portfolio item comes into one container only.

If i need to pick and choose very specific bits of data to put in the layout, how do I do that? Is this where I might need to implement ACF?

[friech]

Hi Bill,

Yes, you’re going to need ACF for the gallery. I believe this tutorial would help (Loopers: Setting up an ACF Pro Gallery)

Regarding the lightbox, you can use the native Cornerstone Responsive Lightbox Shortcode feature. Its not a very flexible lightbox, but I think this will do the trick for this project.

Let us know how it goes,
Cheers!