[Résolu] Need to display ALT Tag content for repeating image field

[Auteur]

Publications

[Shreyas Khatri]

I am trying to:
Get ALT tag for repeating custom image field

I visited this URL:
hidden link

I've about 15 repeating custom image fields:
main-artwork-1-images
main-artwork-2-images
main-artwork-3-images and so on...

I implemented LightGallery for the project:
hidden link

I am using the following code in the content template:

[wpv-for-each field="wpcf-main-artwork-1-images"]
<a href="[types field='main-artwork-1-images' size='full' url='true' separator=''][/types]" data-sub-html="ALT" data-download-url="false">[types field="main-artwork-1-images" width="240" alt="ALT" resize="proportional" separator=", "][/types]</a>
[/wpv-for-each]

I expected to see:

Everything works as fine. But I need to be able to show ALT tag content in the 'data-sub-html' as the same will appear in the light box as caption.

I have already gone through the thread but can not adapt the solution to meet my requirements.
https://toolset.com/forums/topic/displaying-title-or-caption-or-description-or-alt-text-for-repeating-image-field/

Please help me.

[Luo Yang]

Dear Shreyas,

Have you tried the solution in another thread:
https://toolset.com/forums/topic/image-field-type-featured-image-how-can-i-display-image-title-alt-desc/#post-100666

This will be able to load the alternative text from your media library.

[Shreyas Khatri]

Hi Luo,

In the code that you mentioned on this page:
https://toolset.com/forums/topic/image-field-type-featured-image-how-can-i-display-image-title-alt-desc/#post-100666

How do I get images of different size?

I need to echo full-size image in A link and thumbnail as default image.

Can you help me adapt the code provided?

[Luo Yang]

As you can see in that PHP codes, we can get the $attachment_id of each image file, with it you can use wordpress function to get any size of the image file:
https://developer.wordpress.org/reference/functions/wp_get_attachment_image/
$size
(string|array) (Optional) Image size. Accepts any valid image size, or an array of width and height values in pixels (in that order).
Default value: 'thumbnail'

[Shreyas Khatri]

Hi Luo,

Thanks for your help so far. I could implement the solution provided and have modified to meet my needs.

Here's one of the page:
hidden link

And here's the code:

// Gallery 1 - Main Artwork 1
add_shortcode('main_artwork_work_one_images', 'main_artwork_work_one_images_shortcode');
function main_artwork_work_one_images_shortcode() {
global $post, $wpdb;

$images = get_post_meta($post->ID, 'wpcf-main-artwork-1-images', false);
$out = '<div id="lightgallery1" class="repeating-images">';
foreach ($images as $image) {
$attachment_id = $wpdb->get_var($wpdb->prepare(
"SELECT ID FROM $wpdb->posts WHERE guid = %s",
$image
));
$alt = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);
$out .= '<a href="' . $image . '" data-sub-html="'. $alt .'" data-download-url="false"><img src="' . $image . '" alt="' . $alt . '" title="' . $alt . '" /></a>';
}
$out .= '</div>';
return $out;
}

Now I am only left with one issue. How do I pull thumbnail image for the following tag:
<img src="' . $image . '" alt="' . $alt . '" title="' . $alt . '" />

But I continue to want to show the full image in this tag:
<a href="' . $image . '" data-sub-html="'. $alt .'" data-download-url="false">

Please let me resolve this bit.

[Luo Yang]

Please modify your codes as below:

add_shortcode('main_artwork_work_one_images', 'main_artwork_work_one_images_shortcode');
function main_artwork_work_one_images_shortcode() {
global $post, $wpdb;

$images = get_post_meta($post->ID, 'wpcf-main-artwork-1-images', false);
$out = '<div id="lightgallery1" class="repeating-images">';
foreach ($images as $image) {
$attachment_id = $wpdb->get_var($wpdb->prepare(
"SELECT ID FROM $wpdb->posts WHERE guid = %s",
$image
));
$alt = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);
$thumbnail = wp_get_attachment_image_url($attachment_id, 'thumbnail');
$out .= '<a href="' . $image . '" data-sub-html="'. $alt .'" data-download-url="false"><img src="' . $thumbnail . '" alt="' . $alt . '" title="' . $alt . '" /></a>';
}
$out .= '</div>';
return $out;
}

More help:
wp_get_attachment_image_url
https://developer.wordpress.org/reference/functions/wp_get_attachment_image_url/
Get the URL of an image attachment.

[Shreyas Khatri]

Thanks Luo,

Thanks for all your help for providing the solution.