Alt Text for Background Row Images?

  • Dear Support,

    On pages with full width screen settings, we change an image depending on the screen:

    • desktop: 16:9 aspect ratio image
    • table: 1:1 ratio
    • mobile: 9:16

    We have found that for us the best way to do this is to set these different images as row backgrounds for different screens and then specify a min vH for each image.

    The difficulty we have is that for SEO purposes we would like to change the Alt text of the image, depending on the SEO keyword of the page.

    We can do this when we use an advanced image block, e.g. in a blog post with a restricted/boxed screen width.

    However, we can’t change the Alt text of the images set within row background blocks.

    Would you have solution that you could suggest?

    Many thanks for your help.
    Piet

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi,

    Backgrounds do not have alt text, this is an HTML thing not a settings thing. You have to add as an image html tag if you want to have alt text.

    You could try adding images as images and hiding certain ones based on screen size using css or the visibility settings in the section block.

    Ben

    Thread Starter Pieter Sand

    (@beachholiday)

    @britner

    Hi Ben,

    Many thanks for your suggestion.

    We have tried your idea of using the visibility settings. It works but we find it a bit clunky:

    • we need to create three rows just to display one row at the front end with the image chosen for the device, i.e. desktop/table/mobile.
    • there is no max-height setting that would allow us to set the image to a max height of 80% or 80vh.
    • to options to ‘contain’ or ‘cover’ or ‘auto’ are not available.

    In other words, we think the option of having 3 x different images in the background of a row works better for these reasons: displays better, allows us to overlay text, etc.

    Hence, we have the following feature requests:

    • Alt/Title: add a different title/alt tag to a background image on a page/post by post basis. Not every content writer has the programming skills to add an alt tag via html. For SEO it would be great to be able to use the same image on different pages but have a different alt / title tag, depending on the context within which it is used.
    • Max Height: we would like to see a max height option for a row under the structure settings. We already use the min height.

    Would you be open to adding these feature requests?

    Many thanks for your help on this.

    Piet.

    Plugin Author Ben Ritner – Kadence WP

    (@britner)

    Hey,

    Thanks for your feature request. However, let me try and explain there is no such thing as an alt text on a background. It’s not how html works. This doesn’t have anything to do with Kadence it’s simply how the web works. An alt text is for an image tag. Backgrounds are simply backgrounds and are not added via an image tag but instead applied through CSS.

    Kadence Image block does allow you to add images in a ratio instead of a specific size which could resolve your cover/contain issues.

    However I agree it’s a lot of work just to add an alt text to image which has minimal effect on SEO.

    Can you give me an example of how you would want to use a max height. Are you expecting the content that forces the row larger than your min height to be cut off by a max height or create an inner scroll?

    Ben

    Thread Starter Pieter Sand

    (@beachholiday)

    Dear @britner

    My apologies for the slow response. I somehow missed your reply.

    The max height would come into play to ensure that an image and a text below the image are displayed on every device (mob/tab/desktop). If we just use a row with 3 horizontally stacked columns and an advanced image in each, then the text is below the fold. A max height for the image with a vh setting would ensure the image is shown in its entirety, as well as the text below it.

    We don’t design rows where we lay text over an image. In our case, it is important to display the images as beautifully as possible, i.e. we place three different images (aspect ratios: 16-9, 1-1, 9-16) on the site and use the visibility setting (within Row Section) to define which one displays for laptop/tablet/mobile.

    Essentially, we are trying to find a way how we can display each image in its entirety, i.e. the ‘contain’ setting of the background.

    Many thanks for your help with this.

    Piet

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Alt Text for Background Row Images?’ is closed to new replies.