[Resolved] Lightbox/slideshow/titles+text for gallery with repeated image field

[Author]

Posts

[Lykke Scavenius]

I've created a gallery as suggested in an article here at toolset.com by creating a post type with a custom image field that can be repeated.

Basically it's working fine, but:

1. The images doesn't open in a lightbox, it goes to the image URL. I'm not sure why
2. When it opens in a lightbox I want to be able to see the gallery images by clicking arrows and/or displaying gallery thumbs.
2. I would like to add some text/info to display below or maybe on the images, making the gallery a little bit more interesting.

Hope you can help, see an example of the gallery here
hidden link

Best regards
Lykke

[Waqar]

Hi Lykke,

Thank you for waiting.

I've performed some testing and research on my website and found "WP jQuery Lightbox" plugin to be a good fit for your requirements.
( ref: https://wordpress.org/plugins/wp-jquery-lightbox/ )

After activating the plugin, you can update your code for the gallery images from:

<a href="[types field='billede' size='full' url='true' separator=''][/types]">[types field='billede' output='normal'  align='none' size='full'  proportional='true' resize='proportional' title='%%TITLE%%' alt='%%ALT%%'][/types]</a>

To:

<a href="[types field='billede' size='full' url='true' separator=''][/types]" rel="lightbox[group1]" title="my caption text">[types field='billede' output='normal'  align='none' size='full'  proportional='true' resize='proportional' title='%%TITLE%%' alt='%%ALT%%'][/types]</a>

Please note how "rel" attribute will tell the plugin that these images are part of the same slideshow, and the text in the "title" attribute will be shown as the image's caption.

Note: You'll find more information on its usage at WP Admin -> Settings -> Jquery Lightbox.

I hope this helps.

regards,
Waqar

[Lykke Scavenius]

Hi again 🙂

The plugin is great!

I'm having problems with the text, it just shows "my caption text", as it is written in the html, so it makes sense.

But it doesn't display either of the image data fields.

Just to test if I could get it to display either one, I've filled out these fields for the first image in the "Akvarell" gallery: hidden link

The gallery/repeating image only has the image path, not a caption field.

I'm not sure what to do, to display the text. I have edited the settings of the lightbox plugin.

Thank you
Lykke

[Waqar]

Hi Lykke,

Thanks for writing back.

To get only the required information from the image (e.g. its alt text, title, caption or description), you'll need a custom shortcode, that can get the URL and then return the desired text from its image.

Example:

function get_image_info_from_url_func( $atts )
{
	$a = shortcode_atts( array(
		'url' => '',
		'item' => ''
	), $atts );

	// get the image's ID from its URL
	$image_id = attachment_url_to_postid( $atts['url'] );

	if( (!empty($image_id)) && (!empty($atts['item'])) ){

		// get image's post object
		$attachment = get_post( $image_id );

		if($atts['item'] == "alt") {
			return get_post_meta( $attachment->ID, '_wp_attachment_image_alt', true );
		}

		if($atts['item'] == "caption") {
			return $attachment->post_excerpt;
		}

		if($atts['item'] == "description") {
			return $attachment->post_content;
		}

		if($atts['item'] == "title") {
			return $attachment->post_title;
		}
	}
}
add_shortcode( 'get_image_info_from_url', 'get_image_info_from_url_func' );

The above code can be included in the active theme's "functions.php" file. After that you'll be able to use it to get the desired information piece from your image, like this:

Alt text: [get_image_info_from_url url="[types field='billede' size='full' url='true' separator=''][/types]" item="alt"]

Caption: [get_image_info_from_url url="[types field='billede' size='full' url='true' separator=''][/types]" item="caption"]

Description: [get_image_info_from_url url="[types field='billede' size='full' url='true' separator=''][/types]" item="description"]

Title: [get_image_info_from_url url="[types field='billede' size='full' url='true' separator=''][/types]" item="title"]

Note: The custom shortcode accepts two parameters:

1. url: the URL of the target image.

2. item: the piece of information that is needed, which can be: alt, caption, description or title.

This way you'll be able to replace "my caption text" part with the dynamic data from the current image.

I hope this helps and for more personalized assistance around custom code, you can also consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar