[Assigned] Image size

[Author]

Posts

[JorgeE7101]

Hello.

1 - I'm having issues setting the proper size for the images on mobile and because of that my Core Web Vitals is failing. The images on the homepage are displaying a larger version than they should.

I have a custom class named:

penci-thumb and it renders like this:

Rendered size: 375 × 250 px
Rendered aspect ratio: 3∶2
Intrinsic size: 585 × 390 px
Intrinsic aspect ratio: 3∶2

However, if I use the size=large I get this.

Rendered size: 375 × 246 px
Rendered aspect ratio: 125∶82
Intrinsic size: 1024 × 672 px
Intrinsic aspect ratio: 32∶21

2 - Also, I need help how to output the alt tag, since it's not working properly. It does not output the ALT value on the page.

The code I have on the template is this:

<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' resize='proportional' 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'm using a content template.

All this can be seen on the website homepage.

Thanks.

[Christopher Amirian]

Hi,

Welcome to Toolset support. The wpv-post-featured-image shortcode can not have custom size names as you used in the example you showed.

Instead, you either need to use one of the values below:

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

Or you can use 'custom' for the size attribute value. If you use custom then you need to use the width and height attributes in conjunction with the shortcode to specify the exact image size you want to use. As an example:

[wpv-post-featured-image size='custom' width='300' height='200']

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

For the Alt tag I will need more context on where you used the code and what is the URL of the page so I can check.

Thanks.

[JorgeE7101]

Hi,

Nothing of that works for me.

If I use a thumbnail or medium is too small for the viewport (on mobile), if I use a large or full the pictures are being rendered like this:

Rendered size: 300 × 197 px
Rendered aspect ratio: 300∶197
Intrinsic size: 1024 × 672 px

The Intrinsic size is 1024 × 672 px, so it's pulling a larger image and this causing issues on mobile.

Also, at the moment, I have the first image of the layout with these values:

Rendered size: 360 × 240 px
Rendered aspect ratio: 3∶2
Intrinsic size: 585 × 390 px

And the image on the next column shows like this:

360 × 236 px
Rendered aspect ratio: 90∶59
Intrinsic size: 1170 × 768 px
Intrinsic aspect ratio: 195∶128

But if I preview it on a different device I get this:

Rendered size: 430 × 282 px
Rendered aspect ratio: 215∶141
Intrinsic size: 1170 × 768 px
Intrinsic aspect ratio: 195∶128

So, this needs to be responsive and it's not doing it.

The images are using this loop:

	<wpv-loop wrap="2" pad="true">
		[wpv-item index=1]
		<div class="row ">
			<div class="col-sm-6">[wpv-post-body view_template="Loop item in Home/Blog"]</div>
		[wpv-item index=other]
			<div class="col-sm-6">[wpv-post-body view_template="Loop item in Home/Blog"]</div>
		[wpv-item index=2]
			<div class="col-sm-6">[wpv-post-body view_template="Loop item in Home/Blog"]</div>
		</div>
		[wpv-item index=pad]
			<div class="col-sm-6"></div>
		[wpv-item index=pad-last]
			<div class="col-sm-6"></div>
	</wpv-loop>

2 - As I mentioned, all of this is on the homepage and the ALT is also on the same code I sent you on this ticket.

Thanks.

[Christopher Amirian]

Hi,

Toolset does not have any other method from what I already explained regarding the size of the image for the shortcode in question.

You can actually create separate views for mobile and desktop if you are interested:

https://toolset.com/forums/topic/choosing-view-output-in-view-editor-depending-on-wp_is_mobile/#post-1368517

The details are explained here:

https://toolset.com/documentation/programmer-reference/views-filters/#wpv_view_settings

Maybe that can help you use the custom attribute for the feature image and add a proper width/height for mobile.

For the ALT tag I think the issue is that the %%ALT%% only works in a context of using one of the Toolset shortcodes to create the whole image and not using the image tag.

What would you want to use for the alt tag in this scenario? For example, you can use the [wpv-post-title] shortcode to add the title of the post for the ALT.

But if you want to use something else please tell me and I will find a solution.

[JorgeE7101]

Hi,

Regarding the ALT is a basic thing that I need the page to do. Deploy an image and the alt field. I don't think it can be very complicated. Using [wpv-post-title] is useless. It doesn't output the alt text and it immediately raises a red flag by Google, not to mention that it penalizes the site in the SEO rankings.

In some other pages I've got this code and the ALT field is working fine.

[wpv-conditional if="( '[types termmeta='image' output='raw'][/types]' ne '' )"]<div class="post-image">[types termmeta='imagem-da-atraccao-turistica-1' alt='%%ALT%%' title='%%TITLE%%' size='penci-full-thumb' align='center' resize='proportional'][/types]</div>[/wpv-conditional]

Regarding the image sizes, I don't need different views. The page has the same content, regardless it is mobile or note. I just need the images to display at a proper size when in mobile or desktop.

Perhaps can a senior colleague give a hand? Or someone else in the team?

I've been with Toolset for a few years and my renewal is coming soon, but if Tooset is not helping any more, there's no point in keeping it.

[Christopher Amirian]

Hi,

Thank you and sorry for the late reply due to the weekend time.

I will ask my colleagues to take a look into the page.

I'd appreciate it if you could give me the URL/User/Pass of your WordPress dashboard after you make sure that you have a backup of your website.
It is absolutely important that you give us a guarantee that you have a backup so if something happens you will have a point of restore.

Make sure you set the next reply as private.

Also tell us which page to check. By the way regarding the ALT code again the example you gave is in context of using it inside a Toolset shortcode and not direct HTML code that you use.

Thanks.

[Christopher Amirian]

Hi,

Thank you for the login information but unfortunately it is not working for me:

Erro: O nome de utilizador ---- não está registado neste site. Se não tem a certeza sobre o seu nome de utilizador, tente com o seu endereço de email em alternativa.

I asked my colleague to check and he also could not login.

Would you please ste the next reply as private and provide the correct login information?

Thanks.

[Minesh]

I checked your initial post and I see this is how you are displaying the image tag:

<a href="[wpv-post-url]"><img class="card-img-top" alt='%%ALT%%' src="[wpv-post-featured-image size='penci-thumb' resize='proportional' output="url"]" /></a>

As you can see you are using HTML image tag and passing image src using shortcode: [wpv-post-featured-image size='penci-thumb' resize='proportional' output="url"]

What if you try to replace the above code that you added to your view with the following:
=> url removed

<a href="[wpv-post-url]">
[wpv-post-featured-image class="card-img-top" size='penci-thumb' attr="title=[wpv-post-featured-image output=title']&alt=[wpv-post-featured-image output='alt']"]
</a>

With the above code I can see the alt tag.

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

[JorgeE7101]

Hi,

Yes, the ALT field is now working fine. Thanks for fixing that!

I only have the other issue where it seems the images being published are larger than they should be. If have size="thumbnail" is too small for the viewport, if use "medium", then some of the images do not display properly, but the rest do. Maybe something wrong the loop code that I have?

<wpv-loop wrap="2" pad="true">
		[wpv-item index=1]
		<div class="row ">
			<div class="col-sm-6">[wpv-post-body view_template="Loop item in Home/Blog"]</div>
		[wpv-item index=other]
			<div class="col-sm-6">[wpv-post-body view_template="Loop item in Home/Blog"]</div>
		[wpv-item index=2]
			<div class="col-sm-6">[wpv-post-body view_template="Loop item in Home/Blog"]</div>
		</div>
		[wpv-item index=pad]
			<div class="col-sm-6"></div>
		[wpv-item index=pad-last]
			<div class="col-sm-6"></div>
	</wpv-loop>

And because of this I have the red warning (to serve Properly sized images) in the Google page speed insights.

I left it as "medium" size, so you can see what I mean, if you have a look at the home page.

Do you mind having a look at the code and help me serve the properly sized images and understand why some images are not being displayed properly?

Thank you.

[Minesh]

In that case what if you use the custom size image:

 [wpv-post-featured-image size='custom' width='400' height='265' crop='true' attr="alt=[wpv-post-featured-image output='alt']"]

Do you see it working as expected: url removed

[JorgeE7101]

Hi,

No, it doesn't work. I've tested it for iPhone 14, for example and the image doesn't fill the whole space.

Could you please hide the URL from public view.

Thanks.