plugins - Wordpress: customize caption inside the fancybox slide with html elements

admin管理员组

文章数量:1122832

I'm locally developing on wordpress version 6.4.3 a gallery page showing sculpture images. The theme is twentytwentythree and I'm using Fancybox for wordpress (version 3.3.4) as a plugin for the gallery and slideshow.

Inside each picture of the gallery, there is a text with only the artwork name, such as

This is the name of the sculpture

Each image in the gallery should have a title attribute showing the artwork name plus other information, formatted this way:

Name of the sculpture\n\nYear: 2024\nSize (length x width x height): 25cm x 30cm x 40cm

when clicking on the image, the opened layer (which is a part of the slideshow) shows a bigger image with the caption inside that should be formatted as HTML and showing the same text of the title, such as:

Name of the sculpture

Year: 2024
Size (length x width x height): 25cm x 30cm x 40cm

(after Name of the sculpture there are two <br> tags and after 2024 there is one <br> tag)

I managed to get the only artwork name inside the image and the title attribute formatted with \n by placing inside each image the full text containing a special character # as a separator, such as

Name of the sculpture##Year: 2024#Size (length x width x height): 25cm x 30cm x 40cm

then included a javascript function in Header and Footer (as a part of plugin WPCode) which makes two things after loading the page:

• replaces the character # with \n to obtain the title attribute for each image in the gallery
• extracts from the full text the substring starting from the first character up to the character preceeding ## to obtain the artwork name inside each gallery image

The problem is the full text formatted as HTML inside each slide: I cannot find a way to replace # with <br> and have the caption properly formatted.

I looked into the plugin file fancybox.php and found a function named mfbfw_init() which has the following variable defined:

$caption = 'function( instance, item ) {var title ="";' .
           'if("undefined" != typeof jQuery(this).context ){var title = jQuery(this).context.title;} else { var title = ("undefined" != typeof jQuery(this).attr("title")) ? jQuery(this).attr("title") : false;}' .
           'var caption = jQuery(this).data(\'caption\') || \'\';' .
           'if ( item.type === \'image\' && title.length ) {' .                
           'caption = (caption.length ? caption + \'<br />\' : \'\') + \'<p class="caption-title">\'+title+\'</p>\' ;' .
           '}' .
           'return caption;' .
           '}';

I noticed that the title variable placed inside <p class="caption-title"> and </p> is the the full text which appears with # as a caption inside each slide; if I could somehow replace

<p class="caption-title">\'+title+\'</p>

with

<p class="caption-title">\'+title.replace('\#\g', '<br />')+\'</p>

I'd get what I need, but unfortunately I cannot modify directly the fancybox.php as it will be overwritten on updates.

I also tried defining PHP code inside functions.php on a child theme, but nothing.

Hope I've been clear.

Thanks to anybody could give me helpful hints.

本文标签： pluginsWordpress customize caption inside the fancybox slide with html elements