[Resolved] alt tags not showing in view

[Author]

Posts

[markR-7]

I am trying to: Create a view that uses the alt tags on images on this page

Link to a page where the issue can be seen:hidden link

I expected to see:images that when inspected, have alt tags associated with them.

Instead, I got: the image each says alt="%%ALT%%"

The template for the view is below.

[fusion_builder_column_inner type="1_3" layout="1_3" spacing="15px" center_content="no" hover_type="none" link="" target="_self" min_height="" hide_on_mobile="small-visibility,medium-visibility,large-visibility" class="" id="" background_color="" background_image="" background_position="left top" undefined="" background_repeat="no-repeat" border_size="1" border_color="#dae3e2" border_style="solid" border_position="all" border_radius_top_left="" border_radius_top_right="" border_radius_bottom_left="" border_radius_bottom_right="" box_shadow="no" box_shadow_vertical="" box_shadow_horizontal="" box_shadow_blur="0" box_shadow_spread="0" box_shadow_color="" box_shadow_style="" padding_top="10" padding_right="10" padding_bottom="10" padding_left="10" margin_top="" margin_bottom="" animation_type="" animation_direction="left" animation_speed="0.3" animation_offset="" last="no"]
[fusion_imageframe image_id="1350|full" max_width="" style_type="" blur="" stylecolor="" hover_type="none" bordersize="" bordercolor="" borderradius="" align="center" lightbox="no" gallery_id="" lightbox_image="" lightbox_image_id="" alt="%%ALT%%" link="[wpv-post-url item='@perfect-hotel-offer.parent']" linktarget="_self" hide_on_mobile="small-visibility,medium-visibility,large-visibility" class="" id="" animation_type="" animation_direction="left" animation_speed="0.3" animation_offset=""]
[wpv-conditional if="( empty($(wpcf-offer-image)) )"]
[types field='hotel-image' alt='%%ALT%%' resize='proportional' item='@perfect-hotel-offer.parent' url='true'][/types]
[/wpv-conditional]
[wpv-conditional if="( NOT(empty($(wpcf-offer-image))) )"]
[types field='offer-image' resize='proportional' url='true'][/types]
[/wpv-conditional]
[/fusion_imageframe]
<h2>[wpv-post-title]</h2>
<h3 class="ts-h3-tight">[wpv-post-link item="@perfect-hotel-offer.parent"]</h3>
<h3 class="ts-h3-tight">[types field='hotel-star-rating' item='@perfect-hotel-offer.parent' option="wpcf-fields-radio-option-72557446e5ed094dd2c11bb72f525dad-1"]<i class="fas fa-star"><i class="fas fa-star"><i class="fas fa-star">[/types][types field='hotel-star-rating' item='@perfect-hotel-offer.parent' option="wpcf-fields-radio-option-bbbfe4d56a29c9c651083d1f9c4f69dd-1"]<i class="fas fa-star"><i class="fas fa-star"><i class="fas fa-star"><i class="fas fa-star">[/types][types field='hotel-star-rating' item='@perfect-hotel-offer.parent' option="wpcf-fields-radio-option-9f25a92627ea6cbd2b9729d50ff9c226-1"]<i class="fas fa-star"><i class="fas fa-star"><i class="fas fa-star"><i class="fas fa-star"><i class="fas fa-star">[/types]</h3>
<h3 class="ts-h3-tight">[wpv-post-body view_template="destination-for-a-given-hotel" item="@perfect-hotel-offer.parent"]</h3>
[fusion_separator style_type="single solid" hide_on_mobile="small-visibility,medium-visibility,large-visibility" class="" id="" sep_color="" top_margin="0" bottom_margin="10" border_size="" icon="" icon_circle="" icon_circle_color="" width="" alignment="center" /]
<h3 class="ts-h3-tight"></h3>
<h3 class="ts-h3-tight">Offers from £[types field='offer-price' format='FIELD_VALUE'][/types] per person</h3>
<h3 class="ts-h3-tight">[types field='offer-duration' format='FIELD_VALUE'][/types] nights, [types field='offer-board-basis'][/types]</h3>
<h3 class="ts-h3-tight">[types field='offer-availability-start-date' style='text' format='F j, Y'][/types] to [types field='offer-availability-end-date' style='text' format='F j, Y'][/types]</h3>
<h3 class="ts-h3-tight">[types field='offer-promotion'][/types]</h3>
[fusion_separator style_type="" hide_on_mobile="small-visibility,medium-visibility,large-visibility" class="" id="" sep_color="" top_margin="0" bottom_margin="10" border_size="" icon="" icon_circle="" icon_circle_color="" width="" alignment="center" /]
[fusion_button link="[wpv-post-url item='@perfect-hotel-offer.parent']" text_transform="" title="" target="_self" link_attributes="" alignment="" modal="" hide_on_mobile="small-visibility,medium-visibility,large-visibility" class="" id="" color="custom" button_gradient_top_color="#f05172" button_gradient_bottom_color="#f05172" button_gradient_top_color_hover="" button_gradient_bottom_color_hover="" accent_color="" accent_hover_color="" type="" bevel_color="" border_width="" size="" stretch="yes" shape="" icon="" icon_position="left" icon_divider="no" animation_type="" animation_direction="left" animation_speed="0.3" animation_offset=""]VIEW OFFER[/fusion_button]
[/fusion_builder_column_inner]

[Nigel]

Hi Mark

There was an issue with this fixed some versions ago and I wouldn't expect to see it with the current versions, which you are using.

Could you check whether this works if you simply output the field directly without using your page builder or the conditional shortcode which it is currently wrapped in, just the types shortcode alone?

[markR-7]

Sure
I added it here, and instead of adding an actual alt tag I filled the fiel with "%%ALT%%"

[Nigel]

I'm not sure what you mean, in the screenshot the alt attribute appears to have been correctly populated.

Let me check this on my own site with and without wrapping the field in a conditional shortcode.

[markR-7]

yes it is working as expected when I add one image on one page, and do not involve Toolset. To me that proves that WordPress and my theme do not have an issue with the "%%ALT%%" syntax.

So I'm asking you why it isn't working in Toolset?

Please, could you check the way I've written the view as I suspect I have done it incorrectly.

Thanks

[Nigel]

Looking more closely at your code, it looks like I'm missing something.

You are not outputting the image tags using the types shortcode, you are simply outputting the image URL.

I guess that is an input into something else which actually outputs the image tag, but if that's the case I'm not sure how Types can affect the output or not of an ALT tag.

What am I missing?

[markR-7]

did our messages cross? I'm not sure you responded to my latest?

[Nigel]

Seemingly yes. But it seems like you are not inserting images using the types shortcode, you are using a fusion builder image module?

I don't know how that is supposed to work, it looks like you just give it the image URL and it outputs the image, is that how it works?

I can see in the media library that you've added an ALT description to the media.

I don't know where fusion builder tries to get the ALT attribute from, or is it something that you can specify in the image module you are using?

[markR-7]

Yes I added an image using Fusion builder, and used the syntax %%ALT%% to satisfy myself that the website pulls the tag from the media library, and it did.

So where am I going wrong with the view I've written, please?
specifically this one
hidden link

[Nigel]

I don't know! That's the View I was looking at, and the img tag is not being generated by Types it is being generated by Fusion Builder, and I don't know how it generates the img tag nor where it gets the alt attribute from.

The types shortcode is outputting the URL of the full-sized image not one of the other sizes so it tallies with the entry in the Media Library, and that has an alt description.

This is the URL of the image for the first result: hidden link

What happens if you just paste in the image URL directly instead of using a types shortcode?

Is that how you tested other images that worked?

[Nigel]

By the way, instead of using the types shortcode as an input to a fusion module to output the image tag, why don't you just use the types shortcode to output the image tag?

[markR-7]

why don't you just use the types shortcode to output the image tag?

I don't know Nigel. If I knew what I was doing I wouldn't be contacting support. :o)

Please, could you look at the view, and tell me exactly what you mean, or better still re-write it so that it works as expected?

[Nigel]

Sure, I'll take a look soon and get back to you a little later this morning, hopefully with it working.

[Nigel]

Hi Mark

This should be working now.

You had the following:

[fusion_imageframe image_id="1350|full" max_width="" style_type="" blur="" stylecolor="" hover_type="none" bordersize="" bordercolor="" borderradius="" align="center" lightbox="no" gallery_id="" lightbox_image="" lightbox_image_id="" link="[wpv-post-url item='@perfect-hotel-offer.parent']" linktarget="_self" hide_on_mobile="small-visibility,medium-visibility,large-visibility" class="" id="" animation_type="" animation_direction="left" animation_speed="0.3" animation_offset=""]
				[wpv-conditional if="( empty($(wpcf-offer-image)) )"]
					[types field='hotel-image' alt='%%ALT%%' resize='proportional' item='@perfect-hotel-offer.parent' url='true'][/types]
				[/wpv-conditional]
				[wpv-conditional if="( NOT(empty($(wpcf-offer-image))) )"]
					[types field='offer-image' resize='proportional' url='true'][/types]
				[/wpv-conditional]
[/fusion_imageframe]

So the image tag and link were being output by a Fusion Builder "image frame" module where the image URL was provided by a types field. I can't say why it wasn't adding the alt attribute, because it's an Avada module and I don't know the mechanics of how it works.

So I replaced this section so that the images are simply being output by types shortcodes directly (within your conditional tests).

It is necessary to manually construct the links using the wpv-post-url shortcode for the href attribute, and then the types shortcode to output the img tag itself.

So this is what I have:

				[wpv-conditional if="( empty($(wpcf-offer-image)) )"]
					<a href="[wpv-post-url item='@perfect-hotel-offer.parent']">[types field='hotel-image' title='%%TITLE%%' alt='%%ALT%%' size='medium' item='@perfect-hotel-offer.parent'][/types]</a>
				[/wpv-conditional]
				[wpv-conditional if="( NOT(empty($(wpcf-offer-image))) )"]
					<a href="[wpv-post-url item='@perfect-hotel-offer.parent']">[types field='offer-image' title='%%TITLE%%' alt='%%ALT%%' size='medium' resize='proportional'][/types]</a>
				[/wpv-conditional]

It all seems to work as expected, if you could please verify.

[markR-7]

My issue is resolved now. Thank you!