So we should all know that when using images in HTML it is good practice to provide alternative text... recently I have been looking at WebP... a new image format and the advantage is smaller file size, maintain quality and quicker websites.
However when I began looking into best practice for accessibility I couldn't find anything... no advice, no top tips on creating alternative text for screen readers for WebP images.
My code to serve alt text looks like this currently...
{% set optimizedImages = item.itemImage.one().imageVariantsThumb %}
{% set imageTitle = item.itemTitle %}
{% set imageClass = "br-100 h4 dib pa2" %}
<picture>
{% if craft.imageOptimize.serverSupportsWebP() %}
<source srcset="{{ optimizedImages.srcsetWebP() }}"
sizes="100vw"
type="image/webp"
class="{{ imageClass }}"
title="{{ item.itemTitle }}"
alt="{{ item.itemTitle }}" />
{% endif %}
<img src="{{ optimizedImages.src() }}"
srcset="{{ optimizedImages.srcset() }}"
sizes="100vw"
class="{{ imageClass }}"
title="{{ item.itemTitle }}"
alt="{{ item.itemTitle }}" />
</picture>
The source element does not have an alt attribute, unlike the img element, where you have correctly added that attribute.
On the source element, you could try adding the aria-label attribute.
no top tips on creating alternative text for screen readers for WebP images
Because there is nothing about the image format which would affect how you write alternative text.
It is the same for any other <img> or <picture> element.
Related
I'm very new to drupal 8 and I'm doing my first custom template, but I'm having some trouble at the very beginning.
I'm trying to get in the page.html.twig the site_logo, but that is always null. I've checked that in my block setting the checkbox "Toggle branding elements" is enabled.
The code is simply the following but no way to show the logo. What am I missing?
{% if site_logo %}
<a class="logo navbar-btn pull-left" href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">
<img src="{{ site_logo }}" alt="{{ 'Home'|t }}" />
</a>
{% endif %}
{% if site_name %}
<a class="name navbar-brand" href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
{% endif %}
{% if site_slogan %}
<p class="navbar-text">{{ site_slogan }}</p>
{% endif %}
This code is within a standard page.html.twig template.
Sorry if this is a silly question, but we all need to start somewhere...
Thank you
Luca
There is no site_logo variable in page.html.twig, if you wish to customize site_logo you can use block--system-branding-block.html.twig
I'm trying add Lightbox plugin to my proyect, I need to use it on users images, but when I load the page Ligthbox another div without images which have position absolute and superimpose on all page. So, plugin
behavior continues being normally. You can see the problem on this image:
Lightbox2 Bad Behavior
The funniest thing that I have other page with Lightbox implemented, but there is no problems. I use the exactly same code on both parts of proyect, so here you have:
{% if image != null and image != '' %}
<a id="avatar" href="{{ asset(item.getWebPath) }}" data-lightbox="image" data-title="{{ 'field.avatar'|trans }}">{{ image }}</a>
{% endif %}
{% set image2 = entity_field(item, 'path2', definition_fields['path2']) %}
{% if image2 != '' and image2 != null %}
<a id="handwriting" href="{{ asset(item.getWebPath2) }}" data-lightbox="image" data-title="{{ 'field.image_writting'|trans }}">{{ image2 }}</a>
{% endif %}
{% endif %}
This block have Twig code, but the main it's just on the links. Do you find any problem or have any ideas?
Do you have http:// at the beginning of your url inside the Twig string? Need the full path to load correctly. Greetings.
I searched a lot but could not find a solution to achieve this:
{% for i in 1..6 %}
<li>
{% image '#MyBundle/Resources/public/images/college/demo/facilities/thumbs/laboratory/'~i~'.jpg' %}
<img class="facThumb" src="{{ asset_url }}" alt="Facilitiy"/>
{% endimage %}
</li>
{% endfor %}
Name of the images should be dynamic. Please help.
The above code throws error:
Unexpected token "operator" of value "~"
Solution:
According to what #Nic posted (accepted answer), the only workaround seems to be this:
{% for i in 1..6 %}
<li>
<img src="{{ asset('bundles/digicreekil/images/college/demo/facilities/thumbs/laboratory/t'~i~'.jpg') }}" alt='demo'/>
</li>
{% endfor %}
You can't use variables in Assetic (and therefore in the {% image %} tag).
The reason is, according to Kris Wallsmith (creator of Assetic):
(...) that Assetic needs to be able to parse a Twig template and extract any assets that are defined there. This is not possible if you use a variable in the tag.
Christophe Coevoet adds:
The assets are dumped when using the CLI command for this, not when rendering the page. So you cannot use variables as you don't have their values.
See this GitHub issue for the complete conversation.
Remember that Assetic creates and optimizes the assets when you run app/console assetic:dump, not when the page is actually rendered. Therefore, it cannot know of any values, it can only work with static assets.
So if you want to work with dynamic assets, you'll have to do something like this:
{% for i in 1..6 %}
<li>
<img class="facThumb" src="{{ asset('images/college/demo/facilities/thumbs/laboratory/'~i~'.jpg') }}" alt="Facilitiy"/>
</li>
{% endfor %}
In this case, you can iterate through the numbers 1-6 and use the variable in the asset's URL because you're not using Assetic, but Twig's asset() function. asset() simply returns the full URL of the asset, it doesn't do any optimizations so it can be executed during runtime.
But if you want to use Assetic's optimizations and filters, you can also give it the static assets:
<li>
{% image '#MyBundle/Resources/public/images/college/demo/facilities/thumbs/laboratory/1.jpg' %}
<img class="facThumb" src="{{ asset_url }}" alt="Facilitiy"/>
{% endimage %}
</li>
<li>
{% image '#MyBundle/Resources/public/images/college/demo/facilities/thumbs/laboratory/2.jpg' %}
<img class="facThumb" src="{{ asset_url }}" alt="Facilitiy"/>
{% endimage %}
</li>
<li>
{% image '#MyBundle/Resources/public/images/college/demo/facilities/thumbs/laboratory/3.jpg' %}
<img class="facThumb" src="{{ asset_url }}" alt="Facilitiy"/>
{% endimage %}
</li>
(etc.)
This way, you'll have to copy the same code 6 times, but it allows you to use Assetic.
How to display an image by passing a variable path to twig?
{% image '{{path}}' %}
<img src="{{ asset_url }}" width=100 height=100/>
{% endimage %}
The above code is not working where
path =#Bundle/Resources/public/images/image.jpg
Or how to convert variable path to asset_url?
have you tried with asset('images/image.jpg')?
It's possible to use a Twig result in asset sentence? See what I'm trying below:
{% for entity in entities %}
<li title="{{ entity.getName }}" data-id="{{ entity.getId }}" class="categories-first"><img src="{{ asset('bundles/dashboard/img/categories/{{ entity.getName|lower|replace("ó":"o") }}.gif') }}"></li>
{% endfor %}
But it's not loading the image since this {{ entity.getName|lower|replace("ó":"o") }} isn't evaluated, it's possible? How?
Also related to this same topic, it's possible to remove special characters from output? Let said á, é, í, ó, ú and so on?
It will work if you use twig's concatenation.
{% for entity in entities %}
<li title="{{ entity.getName }}" data-id="{{ entity.getId }}" class="categories-first"><img src="{{ asset('bundles/dashboard/img/categories/' ~ entity.getName|lower|replace({"ó":"o"}) ~ '.gif') }}"></li>
{% endfor %}
You can't put your twig result inside asset. If you put this code below
bundles/dashboard/img/categories/{{ entity.getName|lower|replace("ó":"o") }}.gif
to your asset, then the result for image source is exactly as this code above.