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;
}

Wordpress 根据背景获取图片标题 url

Wordpress fetching image title based on background url

javascript

php

wordpress

jquery

elementor