Wordpress 基于背景获取图像标题 url

Question

我目前正在尝试通过此处附加的代码将图像标题添加到 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 媒体中附加实际图像标题。 有没有办法做到这一点？ 幻灯片显示基于 css 中的背景属性的图像。

Answer 1

设法通过背景图像 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;
}