Sie können die oum_location_bubble_image Hook, um die Ausgabe des Standortbildes zu manipulieren. So können Sie zum Beispiel eine Lightbox-Funktion hinzufügen.
Beispiel: Leuchtkasten mit WP Featherlight
Ich würde empfehlen, die WP Featherlight-Plugin um einen Lightbox-Effekt für Bilder zu erhalten. Und mit dem folgenden PHP-Skript (fügen Sie es in die functions.php Ihres Themes ein oder verwenden Sie ein Code Snippet Plugin) können Sie den Lightbox-Effekt für die Standortbilder aktivieren. Es fügt den data-featherlight="image" Attribut zu den Bildern hinzufügen.
PHP
add_filter('oum_location_bubble_image', function ($image, $location) {
// Define the data attribute to be added
$data_attribute = 'data-featherlight="image"';
// Add the data attribute to images that do not already have it
$image = preg_replace('/<img(?![^>]*data-featherlight=)([^>]+)>/', '<img$1 ' . $data_attribute . '>', $image);
return $image;
}, 10, 2);
Beispiel: Hinzufügen einer benutzerdefinierten Klasse zu Bildern
PHP
add_filter('oum_location_bubble_image', function ($image, $location) {
// Define the class to be added
$custom_class = 'lightbox';
// Add the custom class to images that already have a class attribute
$image = preg_replace('/<img(.*?)class="([^"]*)"(.*?>)/', '<img$1class="$2 ' . $custom_class . '"$3', $image);
return $image;
}, 10, 2);
Beispiel: Bilder in einen Link einbinden
PHP
add_filter('oum_location_bubble_image', function ($image, $location) {
// Wrap images inside <a class="lightbox" href="image-src">
$image = preg_replace_callback(
'/<img([^>]*?)src=["\'](.*?)["\'](.*?)>/',
function ($matches) {
$imgTag = '<img' . $matches[1] . 'src="' . $matches[2] . '"' . $matches[3] . '>';
return '<a class="lightbox" href="' . $matches[2] . '">' . $imgTag . '</a>';
},
$image
);
return $image;
}, 10, 2);