Forum
Image alt text displaying, when I do not want it to?
Hi,
I thought this was a CSS issue, but after investigating I'm wondering if the issue is to do with something I have set wrong in Perch?
I have set images to have alt text in the following manner:
<img class="img-page-head" style="background-image: url(<perch:if exists="image"><perch:content id="image" type="image" label="Event Image" crop="false" /><perch:else/>/perch/resources/events-img.jpg</perch:if>)" alt="<perch:content id="alt" type="text" label="Alt text" />" />
Diagnostic
Perch Runway: 3.0.11, PHP: 7.1.8, MySQL: mysqlnd 5.0.12-dev - 20150407 - $Id: b396954eeb2d1d9ed7902b8bae237b287f21ad9e $, with PDO
Server OS: Darwin, apache2handler
Installed apps: content (3.0.11), assets (3.0.11), categories (3.0.11), perch_blog (5.6.1), perch_forms (1.10)
App runtimes: <?php $apps_list = [ 'perch_blog', 'perch_forms', ];
PERCH_LOGINPATH: /perch
PERCH_PATH: /Users/Grant/Sites/the-globe/public/perch
PERCH_CORE: /Users/Grant/Sites/the-globe/public/perch/core
PERCH_RESFILEPATH: /Users/Grant/Sites/the-globe/public/perch/resources
Image manipulation: GD
PHP limits: Max upload 32M, Max POST 32M, Memory: 128M, Total max file upload: 32M
F1: 3b606135b33e6a102526838f4152a807
Resource folder writeable: Yes
HTTP_HOST: dev.theglobelibrarystokesley.org
DOCUMENT_ROOT: /Users/Grant/Sites/the-globe/public
REQUEST_URI: /perch/core/settings/diagnostics/
SCRIPT_NAME: /perch/core/settings/diagnostics/index.php
Hi Grant
May I ask why you setting a background image on an image? I'm not sure that's even possible. You'll get the alt showing as text because there's no actual image being displayed.
If you are trying to display a background image then you will need to apply it to a block level element like a
divand size that using css.If not, then it should be something like:
Hi,
As soon as I read your reply, I thought DOH! Of course, its showing as it's the only physical object there.
So, what I am trying to achieve, is that, when the client uploads an image to an event, blog, whatever. The images cover the area it's displayed. This is currently a couple of places, the preview of the item, and then when clicked, it's displayed full width across the header of the content area. So two very different sizes.
I coded this as a background image so I could make use of the following css:
If you have a better solution that would be great.
In case I'm not making sense: here is the site URL: https://staging.theglobelibrarystokesley.org/
Yep, that's the gist. So you can take that chuck of code and add it to the style attribute's background property. You may need to add a proper dimension to the height as height:auto might not be able to workout the background image height.
Jon
Hi Jonathan,
Sorry, I'm a little lost now. If I add fix widths to the images, then they will no longer be responsive. Unless I'm not understanding something correctly?
Not the images, the div container that you are adding the background image to. Otherwise it will collapse and not show anything.
Sorry, I'm really not following. I set a div container to have a background image, and as I suspected, it produces the same results as having a background image in the original code. Plus Alt Text appears above the image, for exactly the reason you originally stated.
Maybe there is a different way to achieve the same responsive image goal without having a background image?
You can't have an alt tag on a background image, so don't use it and it won't display!
Your existing example doesn't work in all browsers (Safari and Chrome are very gentle on html usage – Firefox is more sniffy, for example), just swap out img for a div and you should be cool.
From an SEO point of view, alt text is a must. Thanks for the help. But there must be a better solution to this issue.
I don't know what SEO benefit you'll gain from an alt tag on a background image but it will be very small. For accessibility sure, but sometimes you can't have it all! You can always put a title tag on the div to help users out.
If you need it to be an image with an alt tag then consider clipping the image with a div container or using multiple images that swap in and out as the viewport changes.
If an image is content it should be inline and include descriptive alt text for accessibility purposes and so search engines know what the image is for image search.
If an image isn't content - for example a background image then it should not have alt text. To give it alt text would add unnecessary noise for screen reader users.
So, you need to structure your HTML accordingly. You may find object-fit helpful: https://css-tricks.com/almanac/properties/o/object-fit/
Thanks, Rachel,
That is fantastic. There is even a Polyfill object-fit/object-position on <img>: IE9, IE10, IE11, Edge, Safari. https://github.com/bfred-it/object-fit-images