[Resolved] Replicate a page using Toolset

[Author]

Posts

[JorgeE7101]

Hello.

I'm trying to replicate a page using toolset, but I think I need some input from the team.

Basically, I'm trying to recreate this portfolio page: {link removed}

What I need the page to do:

Display the images in a grid
Link each image to the taxonomy page
Filter the images using the parent taxonomy (as in the link above)
Have the call to action on each image (as in the link above)

Can I recreate this with toolset? If yes, what is the procedure? What should I use? Views, blocks, layouts?

That is the staging site, but is an exact copy of the live site.

Thanks.

PS - Please hide the page link.

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

To recreate a similar page, I'll recommend the following structure:

1. Custom Taxonomy:
- Regions ( e.g. Central America, North America, Asia, etc )

2. Custom Post Types:
- Countries ( Armenia, Azerbaijan, Cambodia, etc )

Note: I'm suggesting to use a post type for "Countries" and not a taxonomy since taxonomy views can't have front-end search filters as post views.

Once you'll have the information saved for each country in this post type, you'll be able to create a post view with a similar layout and search filter, as explained in this guide:
https://toolset.com/documentation/getting-started-with-toolset/create-and-display-custom-lists-of-content/

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[JorgeE7101]

Hello.

Thanks for your reply. At the moment the taxonomy already exists (for cities, countries, continents). I can easily create the custom type to include only the page title and the image. It's all I need for this page to display.

However, I'm having other problems.

1 - how do I put a CTA over the image (like in the page I sent before)

2 - How do I create the filterable options at the top of the page for the regions? The custom taxonomy does not show up on the list of filterable options. I have only post title, post type, etc

3 - And how can I link each of the headings to the custom taxonomy page? It seems I can only link to the custom type posts.

I created a dummy page, following your instructions:

hidden link

PS - Please hide all page links in my replies. Thanks.

[JorgeE7101]

Please ignore issue number 2.

But, I have another question how the filter options works:

I would like the filter to be instant. When someone selects one of the options it displays the correspondent posts, but without having to hit the submit button and without reloading the page.

[Waqar]

Hi,

Thanks for writing back and I apologize for the delay in getting back on this.

1 - how do I put a CTA over the image (like in the page I sent before)

- To make the single field block, show as CTA over the image, you'll need to include some custom CSS code, in the view's "Custom JS and CSS" section:
( example screenshot: hidden link )

.wpv-block-loop-item {
position: relative;
}

.wpv-block-loop-item div.tb-field,
.wpv-block-loop-item div.tb-fields-and-text {
position: absolute;
text-align: center;
top: 50%;
width: 80%;
padding: 0 10px;
margin: 0 auto;
z-index: 12;
left: 10%;
}

Note: To add a filled background color to this text, you can use the "Single Field" block's "Style Settings".
( example screenshot: hidden link )

To check which CSS code is applying to different page elements, you can use Google Chrome's inspect element tool, as explained in this guide:
hidden link

3 - And how can I link each of the headings to the custom taxonomy page? It seems I can only link to the custom type posts.

- Your observation is correct and through the "Single Field" block, you can't link to the attached term's archive page.

For this, you can include a "Fields and Text" block and then select the target taxonomy for the link.
Example screenshot 1: hidden link
Example screenshot 2: hidden link
Example screenshot 3: hidden link

4 - I would like the filter to be instant. When someone selects one of the options it displays the correspondent posts, but without having to hit the submit button and without reloading the page.

- You'll find the settings to control the search behavior under the "View Search" block's settings:
Example screenshot: hidden link
( ref: https://toolset.com/documentation/getting-started-with-toolset/filter-content-lists-and-add-custom-search/ )

5 - PS - Please hide all page links in my replies.

- The links that you share in your replies are already hidden from the public. But if you'd still not like to make them visible to anyone, you can share them without the base URL, for example: /lugares-page/

For future reference, please note that as per our support policy ( https://toolset.com/toolset-support-policy/ ), only one question or issue can be addressed through a single ticket.

You're welcome to open a new ticket for each new question or concern.

regards,
Waqar