Skip Navigation

[Resolved] Nested views in Astra Pro

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Kolkata (GMT+05:30)

This topic contains 5 replies, has 1 voice.

Last updated by erikd-6 1 day, 4 hours ago.

Assisted by: Minesh.

Author
Posts
#2835964

Tell us what you are trying to do?

I am trying to build a view in Astra Pro that shows a listing of a certain custom post type, where the view type is a responsive grid. The items in the view consist of a Post Featured Image and a Post title with link. I want to add a link to the post to the featured image. Both the Post Featured Image and the Post title with link are Toolset Fields and Text blocks. I tried to add the link under the featured image by editing the Post Featured Image Fields and Tekst block in HTML-mode and tried what I used to do in the now called 'legacy view': [wpv-post-featured-image] but this caused an error and didn't give the desired result.

Is there any documentation that you are following?

I have read up on the views documentation here on Toolset.com.

Is there a similar example that we can see?

No, as this doesn't seem to work I haven't been able to create a working solution. Of course this was and is possible in a 'legacy view', and I have used it on many sites there.

What is the link to your site?

I will provide the credentials to this development site if requested.

I also tried to build the view in the legacy view mode. There I get the link under the featured image as expected. However, the problem is I cannot get this view to behave as a flexbox based grid like the grid type Toolset view in the Gutenberg editor. So I see two possible solutions: either there is a way to nest the shortcodes in the Gutenberg editor Toolset view, or there is a way to add the flexbox structure to the legacy view.

#2835968

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Hello. Thank you for contacting the Toolset support.

Nested views should work with legacy views only..

While using Toolset Blocks, if you want to build views in legacy mode, please check the following doc:
- https://toolset.com/course-lesson/enabling-legacy-version-of-toolset-views/

Once you enable legacy views, build your nested views and add your view to your desired place with the view's shortcode: [wpv-view name="your-view-slug"]

#2835994

Hello Minesh, thank you for your answer, however this doesn't solve my problem. As I wrote in my original post, the problem with the legacy views is that they don't display in a flexbox grid such as offered by the Toolset View block in Gutenberg (grid loop style). Do you have a solution to output the legacy view in a responsive grid, that does not use Bootstrap but the flexbox grid as offered in the Gutenberg editor?

#2836084

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

When using legacy view's the possible display format for the view's loop you can check with the following Doc:
-https://toolset.com/documentation/legacy-features/views-plugin/view-layouts-101/#the-output-formats

That does not include the flexbox grid. Toolset Blocks does not support nested views.

Here is a sandbox site and you can auto-login to it using the following link:
- hidden link

On the Toolset's Settings page:
- hidden link

I've set the "Bootstrap Loading" section option to "Toolset should load Bootstrap 4".

Then I've created a view:
- hidden link

The view's loop editor set to display bootstrap flex:
Loop Editor section:

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<div class="container wpv-loop js-wpv-loop">
	<wpv-loop wrap="3" pad="true">
		[wpv-item index=1]
		<div class="d-flex" style="height:250px">			
          <div class="col-md-4">[wpv-post-body view_template="loop-item-in-test-bootstrap4"]</div>
		[wpv-item index=2]
			<div class="col-md-4">[wpv-post-body view_template="loop-item-in-test-bootstrap4"]</div>
		[wpv-item index=3]
			<div class="col-md-4">[wpv-post-body view_template="loop-item-in-test-bootstrap4"]</div>
		</div>
		[wpv-item index=pad]
			<div class="col-md-4"></div>
		[wpv-item index=pad-last]
			<div class="col-md-4"></div>
		</div>
	</wpv-loop>
	</div>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

Template for this view section:

 <div class="p-2 bg-info flex-fill">Flex item 1</div>
  <div class="p-2 bg-warning flex-fill">Flex item 2</div>
  <div class="p-2 bg-primary flex-fill">Flex item 3</div>

You can see the result on the frontend:
- hidden link

More info:
- hidden link

You can customize it this way and otherwise there is no other option I can see.

#2836108

Hello Minesh, Thank you for your answer. However, this is not what I asked. I specifically wrote in my previous post that I don't want to use the Bootstrap grid because Astra uses a flexbox grid and loading Bootstrap would add a lot of Javascript to the site that I don't want to add for performance reasons. That's why I asked for a solution how to style an unformatted legacy view with the CSS necessary to make it work as an ASTRA flexbox grid. I have built many sites with Toolset views and Bootstrap and the Loop structure you presented in your previous answer I know very well, but this is not what I want.

In general I am not happy with the loss of versatility in the Toolset Views since Toolset moved to the block editor. In the old editor I could do anything with nested fields and conditionals to build exactly the way I wanted. The possibilities with the Toolset blocks are much more limited, the workflow and interface is not logical and I sometimes get the impression that Toolset development at Onthego systems is on a very low level.

This support thread has been a disappointment for me, because two times you didn't seem to have read my posts thoroughly and only presented standard answers that for me as a seasoned Toolset developer with 9 years of Toolset experience are already well known but didn't address what I was asking for.

#2836112

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

I'm sorry if you feel so but I just tried to show the demo in front of you in order to demonstrate whats possible in your case.

If that is not what actually you are looking for, its because as you already know (block) view do not support nested view and legacy view do not have flex grid that's the fact and I need to try to find some workaround if possible.

I need to have eye on your view structure in order to see that what could be the best possible solution, if any, and I will check if we can hook in shortcode or there is another way.

For that, I need problem URL where I can see the issue and what is your expected result on that page, how you want the nested view should behave. Maybe few screenshot will be helpful and once I review your current structure and requirement I will be able to guide you in right direction.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

#2836129

Hi Minish, nevermind, I have decided to study the flexbox syntax myself as this is not part of the Toolset support. Thank you for your support and I hope you will convey my remarks about the loss of flexibility and the unlogical user interface in the block editor compared to the legacy editor to the Toolset developers.