Блог

В настоящее время я пытаюсь добавить заголовок изображения в медиа-виджет слайд-шоу в elementor pro с помощью кода, прикрепленного здесь :

 jQuery('.elementor-carousel-image').attr('id','slideshowImage')

var slideshowDiv = document.querySelectorAll("#slideshowImage");

for (var i = 0; i<slideshowDiv.length; i  ) {
    var content = document.createTextNode("Title");
  slideshowDiv[i].appendChild(content);
}
 

На данный момент он может отображать текст «Заголовок» в верхней части каждого изображения. Однако я хочу прикрепить фактический заголовок изображения в медиа WordPress. Есть ли способ добиться этого? Слайд-шоу показывает изображения, основанные на свойстве background в css.

Удалось решить эту проблему путем извлечения заголовка через URL-адрес фонового изображения и добавления заголовка к тегу, за которым следует некоторый css

 /***********
ADDING TITLE TO BOTTOM OF EVERY image
***********/

function addImageTitle(e) {
    
    const imageCarousels = document.querySelectorAll('.elementor-carousel-image');
    
    imageCarousels.forEach(imageCarousel => {
        
        // To fetch image title
        let imageURL = window.getComputedStyle(imageCarousel,false).backgroundImage;
        let imageTitle = imageURL.slice(imageURL.lastIndexOf('/') 1,imageURL.lastIndexOf('.')).split('-').join(' ');
        
        //To append title to image carousel
        let titleElement = document.createElement("h1");
        let titleText = document.createTextNode(imageTitle);
        titleElement.appendChild(titleText);
        
        imageCarousel.append(titleElement);
        
        
    })

}

addImageTitle();
 

CSS — код

 .elementor-carousel-image>h1{
    font-size:30px;
    position:absolute;
    bottom:0;
    color:white;
    background:black;
    padding:10px;
}
.elementor-fit-aspect-ratio.elementor-carousel-image>h1{
    font-size:0px;
    background:none;
}