Alt Text for Repeater Image

Ask the community
, ,
1

Hey there,

I’ve setup a repeater that generates similar articles to which the user is reading. Everything has been working except I can’t figure out how to code in the alt text for the images. Every time I run a page speed test, a bunch of missing alt texts are always flagged.

The code is generating articles from the wix blog. Dynamic pages would be a little easier since you can see the ID…

Any help would be much appreciated!

Here’s my code:
import wixLocation from ‘wix-location’ ;
import wixData from ‘wix-data’ ;

let currentPost

$w . onReady ( function () {

wixLocation . onChange (() => { 
    **return**  loadPostPage () 
}) 

**return**  loadPostPage ()

});

function loadPostPage () {
return $w ( “#post1” ). getPost (). then ( post => {
currentPost = post
return LoadRelatedPosts ()
})
}

function LoadRelatedPosts () {
return wixData . query ( “Blog/Posts” )
. ne ( “_id” , currentPost . _id )
. hasSome ( “hashtags” , currentPost . hashtags )
. limit ( 6 )
. find ()
. then ( results => {
$w ( “#relatedPostsRepeater” ). data = results . items ;
})
}

export function relatedPostsRepeater_itemReady ( $item , itemData , index ) {
$item ( “#imageRelated” ). src = itemData . coverImage ;
$item ( “#titleRelated” ). text = itemData . title ;
$item ( “#buttonRelated” ). link = itemData . postPageUrl ;
}

2

The alt attribute is meant to provide “alternative text” descriptions. It required attributes for accessibility ( a11y ) and alt text improving SEO

More here: https://www.a11yproject.com/posts/2013-01-14-alt-text/

You can add alt text with alt property in the image:
https://www.wix.com/velo/reference/$w/image/alt

export functionrelatedPostsRepeater_itemReady($item,itemData,index) {
  $item("#imageRelated").src = itemData.coverImage;
  $item("#imageRelated").alt = "your image description"; // <- here

  $item("#titleRelated").text = itemData.title;
  $item("#buttonRelated").link = itemData.postPageUrl;
}
3

Awesome! Thanks a lot.