[Resolved] Make a view that outputs a gallery

[Author]

Posts

[jesseH-3]

I am creating a single post template for my CPT. In it, I need to show images taken from a custom image field from a connected taxonomy.

Without going into too much detail (as I don't think this is a specific query but a more general one) -- this is incredibly painful. I can't insert nested views, so I have to use legacy views. This has been an issue for YEARS. Is there any timeline you can promise on this? You want us to use Blocks but this missing functionality makes it nearly impossible, and we end up with a mish-mash of various pieces (views blocks, shortcodes, fields, content templates created in legacy views, content templates created in Blocks, etc.) to create a template.

Anyway, I have to create a legacy view because I can't seem to query taxonomy fields in a single post type template. I created a legacy view but I am not seeing any way to output the results to a WordPress gallery, or a Toolset gallery, or a block, or an Elementor gallery (I am using Elementor Pro). Any of these galleries would be fine with me. I have other galleries in the single post template and would like them all to be consistent in their look and functionality. I can use any of the above-mentioned modules to create the other galleries since they aren't pulling nested content. So, how do I output the resulting images of my view into a gallery? I'd think this would be very basic functionality but I am not finding it anywhere.

[Waqar]

Hi,

Thank you for sharing your feedback and concerns.

I can understand that blocks-based views are limiting when it comes to taxonomy and user views. And classic views require extra customization work to design the output in a certain format.

Unfortunately, we don't have a timeline to share for when the development of new features is resumed for Toolset. But, we announce all major updates and news through our email newsletter and the blog.

For what you're trying to achieve, you'll need to design the HTML output of the classic taxonomy view to that of the target gallery block and add necessary CSS and JS code.

If you could share example of a gallery block from your website's page, I can share some pointers on how to make this work.

regards,
Waqar

[Nigel]

Hi there

Both the Toolset Gallery block and the Elementor Gallery module are designed for a scenario where a single post has multiple images attached to it. (The WordPress gallery block is different inasmuch as it is for whatever images are manually added to the block, it doesn't work as a template for dynamically-sourced images.)

The scenario you are talking about is different in that the source of the images is a taxonomy term not a post, and it is not possible to use the block editor in this case, it is necessary to use the legacy editor and shortcodes, and that involves working with HTML markup to achieve the result required.

I think you know how to create a legacy View to query the taxonomy terms.

So in the output section of the View, the loop will be iterating over taxonomy terms.

You can output custom term fields, including your image field, in that context.

What markup is output is up to you. (You will want to use CSS to transform the look as required.)

Say for example you want to output the img tags within an unordered list, so that the output looks something like

<ul>
  <li>
    <img src="...">
  </li>
  <li>
    <img src="...">
  </li>
  <li>
    <img src="...">
  </li>
</ul>

To achieve that the output section of your View might look something like this:

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
		<wpv-loop>
          <ul>
            <li>
          	[types termmeta='my-image-field' title='%%TITLE%%' alt='%%ALT%%' size='medium' resize='proportional' separator='</li><li>'][/types]
            </li>
          </ul>
		</wpv-loop>
	<!-- 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]

I used the Fields and Views button to insert the shortcode to output my image field. It will output multiple image tags (the custom field has several image values), and the trick in this case is to specify

</li><li> 

as the separator between each img tag.

So for each iteration of the loop (each term, possibly only one) the View outputs an opening ul tag and an opening li tag for the first image, then instead of the default comma to separate the "list" of img tags output by the shortcode, each img will be separated by a tag which closes the previous li tag, and a new opening li tag.

Or you could wrap the img tags in divs (with classes) instead, where the separator would be

</div><div class='some class'>

[jesseH-3]

Thank you both for your insight. I am disappointed that outputting a gallery from a view isn't straightforward. I understand Nigel's recommendation but didn't want to have to design the output in this way as I was looking for a simple solution that would quickly match my other Toolset galleries (made with Blocks).

Please prioritize Blocks for nested views. I don't see this as a new feature – it should have been part of the transition to Blocks. (I realize it is much more complicated than this -- I am just giving you my thoughts from a user's point of view.) Blocks will feel like a step backwards for me until this is resolved.

In addition, I must say that I have to use much more code than anticipated with Toolset. I would find a GUI or drag-and-drop system for views and their outputs highly useful. It seems as though things that I think are fairly basic actually require support to help develop custom shortcodes, HTML and CSS. Just my two cents on what I would like to see in the future.

P.S. Still can't choose a radio button under "How your issue was resolved?" below.