Skip Navigation

[Resolved] Alt output and homepage image size

This thread is resolved. Here is a description of the problem and solution.

Problem:

I need to confirm if the ALT attribute (alt='%%ALT%%') correctly outputs the ALT text for images in Toolset Views. Additionally, I want to ensure that the featured image displays at the correct size and does not appear larger than necessary in Google Console.

Solution:

The ALT attribute (alt='%%ALT%%') is correctly set if used within a Toolset View. To control the image size, use the size attribute in [wpv-post-featured-image] with predefined values like 'thumbnail', 'medium', 'large', or 'full'. You can also define custom dimensions using size='custom' along with width and height parameters to ensure proper scaling and cropping.

Relevant Documentation:

https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#vf-153425

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.

This topic contains 1 reply, has 1 voice.

Last updated by JorgeE7101 12 hours, 28 minutes ago.

Assisted by: Christopher Amirian.

Author
Posts
#2797561

Hello. I have the following code:

<article id="[wpv-post-id]">  
<div class="card">
<a href="[wpv-post-url]"><img class="card-img-top" alt='%%ALT%%' src="[wpv-post-featured-image size="penci-thumb" output="url"]" /></a>
<div class="card-body">
<div class="post-taxonomy-terms"><div class="d-inline">[wpv-view name="category-term-grid-home" limit="1" orderby="name"]
</div>
</div>
<h2 class="card-title">[wpv-post-link]</h2><a href="[wpv-post-url]">[wpv-post-excerpt length="150"]</a>
</div>
</div>
</article>

I have two questions about with this code.

1- Is the alt code correct to output the alt field? (alt=’%%ALT%%’)

2 - How can I make sure the image showing is the correct size and not bigger than it should? Because the intrinsic size in the Google console is always much bigger than the rendered size.

Please make this topic private.

Thanks.

#2797800

Christopher Amirian
Supporter

Languages: English (English )

Hi,

Welcome to Toolset support. The ALT tag content is added correctly if you are talking in the context of using the code in a view.

Regarding the image size, according to the documentation below the size attribute takes items as below:


'thumbnail' (default) | 'medium' | 'large' | 'full' | 'custom'

https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#vf-153425

So you need to use one of the values above.

Examples:

[wpv-post-featured-image size="medium" raw="false"]
 
[wpv-post-featured-image attr="class=my-custom-class"]
 
[wpv-post-featured-image size='custom' width='300' height='200']
 
[wpv-post-featured-image size='custom' width='300' height='200' crop='true' crop_horizontal='right' crop_vertical='bottom']

Thanks.

#2797858

Thanks Christopher. All solved.