[Resolved] How to display Taxonomy Images in a Block View?

[Author]

Posts

[michaelW-23]

Tell us what you are trying to do?

I have a custom taxonomy with a custom field for images. I want to display these images in an animated, auto-playing 'carousel' style view. The purpose is to display client logos.

Is there any documentation that you are following?

I tried to follow the advice in this topic: https://toolset.com/forums/topic/display-taxonomy-image-in-a-view/
but it refers to legacy views. I want to know if it's possible to use TS Blocks.
I added the snippet to TS custom code and tried to add the shortcode to a "fields and text" block (see attached screenshot), but WordPress keeps changing the html.

Is there a similar example that we can see?

I'm trying to re-produce this old Drupal website: hidden link
You can see the client logos at the bottom of the page, under the heading: "organisations I've worked with"

What is the link to your site?
hidden link

[Shane]

Hi Michael,

Thank you for getting touch.

Unfortunately, no you won't be able to do this with the block view, you will need to use the classic view in order to display the taxonomy images.

For clarity are you storing these images in a custom field ? or are the images the default image field for the taxonomy.

Please let me know.
Thanks,
Shane

[michaelW-23]

Does WordPress have default image fields for taxonomy?

I used the FG Drupal to WordPress Premium and CCK plugins to migrate a Drupal site. After migration, an image field appeared in a custom taxonomy (which matched my Drupal setup). I assume the FG migration plugin created the custom image field. However, I could not use it to build a view, so I tried to build a view using the Category Images plugin as described here: https://toolset.com/forums/topic/display-taxonomy-image-in-a-view/

Can I run TS Block Views and Legacy Views on the same site? If so, I can try build it with Legacy views

[michaelW-23]

Oh, I see that I can't use Blocks and Views on the same site... so I guess that means I would have to use Layouts instead and would have to rebuild the entire site.... so my question: When does Toolset expect to stop developing the legacy plugins and implement the same functionality in Blocks?

I built the original Drupal site 5 years ago and was hoping to switch to WP and Toolset Blocks... but perhaps I need to wait a bit longer

[Shane]

Hi Michael,

Does WordPress have default image fields for taxonomy?

No wordpress doesn't have a default image fields for taxonomies, you will need to use our Types plugin to add the image fields to the taxonomy. However given that the image field was created then a custom meta for that field was added.

Can I run TS Block Views and Legacy Views on the same site? If so, I can try build it with Legacy views

Toolset Blocks and Toolset Views are the same plugin, so if you're using Blocks then you can enable the legacy features by going to Toolset -> Settings and scrolling to Editing Experience then enable the 3rd option. This will allow you to use both the block and classic editors.

For the image field I will need for you to provide me with admin access so that I can have a look in a bit further detail for you.

I've enabled the private fields for your next response. Also please let me know the taxonomy that has the fields.

Thanks,
Shane

[michaelW-23]

The taxonomy I want to use is "clients"

hidden link

I want a conditional view that only displays clients with an image. For some clients, I've added images to the "company logo" custom field and to the field created by the Category Images plugin.

The images are svgs (but I could change them to pngs if necessary)

[Shane]

Hi Michael,

I see how the images are setup now. They are in custom fields.

To display these images you will need to create a taxonomy view by going to Views -> Add New and select taxonomy then select your taxonomy term that you want your view to list.

Following this you can use the Loop Wizard to display elements from the taxonomy.

However to display the field name "Image" you will need to use the shortcode below.
[wpv-taxonomy-field name='zci_taxonomy_image']

This will give the URL of the field. To get it to display as an image you will use this below.

<img src="[wpv-taxonomy-field name='zci_taxonomy_image']" />

Finally to get the view to display based on what page you are viewing you will need to add a query filter to the view. Scroll up on the edit view page and click on Add A filter then select Taxonomy Term and ensure "Set by the page where this View is inserted" is selected.

The only thing thats left is to add the view to your page using the view's shortcode.
[wpv-view name='my-view']

Where 'my-view' is the slug of the view that was created.

Please let me know if this helps.
Thanks,
Shane

[michaelW-23]

OK thanks for the correct field name, but as I said before, I STILL cannot use TS Blocks and TS Legacy Views on the same site - even though I configured the editing experience settings as you suggested. I still get the following error when I try to activate Legacy Views:

"Toolset Blocks is a different flavour of Toolset Views. You can not use both versions at the same time, so we have deactivated one."

Please see the attached screenshots. I raised this in another support thread and that has not been answered either. Why can't I use Blocks and Legacy Views together?

[Shane]

Hi Michael,

As mentioned in my response in the post below.
https://toolset.com/forums/topic/how-to-display-taxonomy-images-in-a-block-view/#post-2110265

Toolset Blocks and Toolset Views are the same plugins. The only difference is that they are named differently. Now if you have Blocks and Views installed on your site, you can only activate one. I recommend keeping the blocks plugin as the views plugin is now in Legacy even though it is still the same plugin as Blocks.

Please let me know if this clarifies this issue for you.
Thanks,
Shane

[michaelW-23]

OK, I see the misunderstanding now. When you said: "...won't be able with the block view, you will need to use the classic view..." - I thought you were taking about the View Block and the classic (legacy) Views.

I now remember that a "legacy style" view can be built outside of the block editor. I'm trying it now. Thanks for your patience. It's been a while since I did this.

[michaelW-23]

I've built the view but I can't work out how to filter it to only display images when they exist. Not all terms have an image. I only want to display the terms which have an image in the "company logo" field.

I've tried various things including variations of this code:

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop wrap="5">
[wpv-conditional if="( $(wpcf-company_logo) ne '' )" evaluate="false"]
<div class="wp-block-image">
<a class="wp-block-toolset-blocks-container tb-container" href="[wpv-taxonomy-url]">
	<figure class="alignleft">
  		<img loading="lazy" src="[wpv-taxonomy-field name='zci_taxonomy_image' width='120' height='100' url='true']" />
   <figcaption>[wpv-taxonomy-title]</figcaption>
  </figure>
 </a> 
</div>
  [/wpv-conditional]
	</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]

[michaelW-23]

Further to me reply above, please not that the custom term field that I need to display is not named "image". The field slug is "company_logo". I don't know how you identified the shortcode mentioned in this post: https://toolset.com/forums/topic/how-to-display-taxonomy-images-in-a-block-view/#post-2112307, but you refer to the field name "Image", which is not the field that I want to filter or display.

However, I am able to select and display the company_logo field... I just don't know how to conditionally output only terms that contain a 'company_logo image'

[Shane]

Hi Michael,

There is a trick to doing this. You can use the Order options on the view to order by the company logo. This will automatically omit any taxonomy that doesn't have the logo attacted.

Please let me know if this helps.
Thanks,
Shane

[michaelW-23]

Hi. Thanks, that works. I was hoping to order by parent term (i.e. group all commercial sector clients together, etc.) but that's fine. I can use filters for that instead.

Now I'm struggling to build the view to display the logos in tb grid style layout. I suppose I should start a new thread to get views layout support?

[Shane]

Michael,

Yes it would be best to mark this one as resolved and start a new thread.

This is to ensure that the issues can be tracked separately.

Thanks,
Shane