[SOLVED] Remove "Title" from image tag (in TAL)

Plone Support Customizing Plone
1

If a template is showing an image with:

<img tal:replace="structure python:scaled_image.tag()"/>

Is it possible to remove/override "Title" or do I need to "construct all of it (url, alt, class)?

I want this because it makes no sense to show a title in a slider or gallery on mouse over.

2

You can set this as a param in the tag function:

<img class="lead-image" alt="" src=""
    tal:on-error="nothing"
    tal:define="scale entry/@@images;"
    tal:replace="structure python:scale.scale('teaser_image', scale='preview').tag(css_class='lead-image', title=None)" />
3

Thanks!

Works like a breeze

4

Just for reference, this is the method used: https://github.com/plone/plone.namedfile/blob/master/plone/namedfile/scaling.py#L88

5

is there a way to remove width and height attributes? Passing None doesn't work, It will use the namedblobfield tag which will use the original image width and height. Looking at the code, it is not possible, meanwhile I'm using a regexp to remove them.

6

Why do you want to remove width and height? Even when the displayed width and height don’t match the image dimensions, it gives browsers a hint which aspect ratio the image will have. Knowing the aspect ratio beforehand (before the actual image is loaded, especially on slow networks) will let the browser know how much space to reserve for the block. This prevents layout shifts and reduces your LCP and CLS metrics.

1 Like
7

I agree but with responsive images (for example .card-img-top in a BS card) it can be a problem. Here:

images width & height are not set and usually they are not. With css, height and width attributes should be unset. For browser hint (responsive images), just set the container. Also intrinsic sizes and other techniques are available.