Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Trick To Add Alt Text To Your Banner On Homepage Rate Topic   - - - - -

 
  • kaltersia
  • Advanced Member
  • Members
  • Join Date: 07-Feb 18
  • 114 posts

Posted 18 October 2020 - 11:22 AM #1

This will alloy you to insert the alt text you write when you create the banner

 

you can change the div class to whatever you want "in this case div class is alt "

 

First create a smarty block  name it as you wish and add to your home page "Important " after banner block 

 

insert the script in the block

 

insert the style to your header of home page or in the css you created for your theme.

 

 

 

have a look at the attached pictures 

 

 

This is just a free way to have text on your banners on homepage.... for better text on your banners there are some great addons on the marketplace.

 

You can use  font-size: 28px; for Desktop devices and  font-size: 14px; For Mobile devices

 

the style is up to you 

<script>
[].forEach.call(document.querySelectorAll('.banner__link img'), (img) => {
  let wrap = document.createElement('div');
  wrap.classList.add('alt');
  img.parentNode.insertBefore(wrap, img);
  wrap.appendChild(img)
  img.parentNode.dataset.alt = img.alt;
});
</script>
<style>
.alt::after {
content: attr(data-alt);
    position: absolute;
    left: 0px;
    bottom: 6%;
    width: max-content;
    max-width: 100%;
    padding: 5px 2%;
    text-align: center;
    font-size: 28px;
    color: #fff;
    background-color: rgba(32,32,32,0.5);
    word-break: break-word;
}
</style>

Attached Files