[Resolved] Want to display captions under images

[Author]

Posts

[aaronT]

I want to display caption under gallery images. Here is code for content template:

<h1>[wpv-post-title]</h1><br><br>

[wpv-for-each field="wpcf-photo"]


[/wpv-for-each]
CSS:
h1{text-align:center;}
img.object-fit {
margin: 5px;
width: 300px;
height: 300px;
border-radius: 15px;
object-fit: cover;
border: 1px solid;
}

[Minesh]

Hello. Thank you for contacting the Toolset support.

Can you please try to use the following code to display the image caption. You should try to add the following code to your theme's functions.php file.
OR
You can add the following code to "Custom Code" section offered by Toolset:
=> https://toolset.com/documentation/adding-custom-code/using-toolset-to-add-custom-code/

add_shortcode('img-info', 'func_img_info');
function func_img_info($atts) {
global $post, $wpdb;
   
 
$attachment_id = $wpdb->get_var($wpdb->prepare(
"SELECT ID FROM $wpdb->posts WHERE guid=%s",
$atts['url']
));
 
 $caption = get_the_excerpt($attachment_id);

return $caption;
}

You can call the above shortcode as given under:

[img-info url='[types field='photo' output='raw'][/types]']

[Minesh]

When I try to load the site link you shared: hidden link

But its not loading and I see the message "This site can’t be reached".

Can you please send me a working site link.

[aaronT]

Sorry, the site is hidden link

[Luo Yang]

Hello,

Minesh is on vacation, I will take care of this thread.
I cam log into your website, but it is not an administrator account.

Since it is a custom codes problem, please provide below details:
1) Valid administrator account + FTP access
2) Where and how can I see the problem? please point out the problem page URL and where I can edit your PHP codes,
I need to test it in a live website, thanks

[Luo Yang]

Dear Aaron,

I am not sure where I can edit your PHP codes, but I can see the content template settings:
hidden link

You can try to modify the PHP codes as below:

add_shortcode( 'show_file_info', 'func_show_file_info');
function func_show_file_info($atts) {
    
    global $wpdb;
    $atts = shortcode_atts( array(
        'url' => '',
        'info' => '', // title, alt or id return
    ), $atts);
	var_dump($atts);
    $res = '';
    $url = $atts['url'];
    $attachment_id = $wpdb->get_var($wpdb->prepare(
        "SELECT ID FROM $wpdb->posts WHERE guid = %s", $url
    ));
    if($atts['info'] == 'title'){
        $res = get_the_title($attachment_id);
    }
    if($atts['info'] == 'alt'){
        $res = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);
    }
    if($atts['info'] == 'id'){
        $res = $attachment_id;
    }
    if($atts['info'] == 'caption'){
        $res = get_the_excerpt($attachment_id);
    }
    return $res;
}

And use above shortcode as below:

[show_file_info info="caption" url="[types field='photos1' output="raw"][/types]"]

If you want to use it into HTML img tag, you can try this:

<img class="object-fit" src="[types field='photos1' output="raw"][/types]" title='[show_file_info info="caption" url="[types field='photos1' output="raw"][/types]"]'></a>

I have tested above codes in my localhost, it works fine.

[aaronT]

Luo,
You said you had this working on your local computer. Can you send me screen shots of where you put the codes.

Thanks,
Aaron

[Luo Yang]

I put those custom PHP codes into my theme file "functions.php", and display those shortcode in a content template, here are screenshots.

If you need assistance for it, please point out where I can edit the custom PHP codes in your website, thanks

[aaronT]

Luo,
I tried to add php codes to functions.php and got an error on the first line of code. Can you please try for me? I'm trying on a different website.
The Website is hidden link
Password is tralex61####
This website has 2 galleries. one is Oceanwalk and the other is seaside. If you go to oceanwalk info in the menu and go a little bit down the page you will see where I have the gallery. It is called with the content template. The only difference in these galleries is that the field is photo. I'm using the Astra theme, so if you go to appearance and themes you will see theme editor where you can add code to functions.php. Thanks, Aaron

[aaronT]

Forgot, User name is testuser1

[Luo Yang]

Thanks for the details, I can log into your website, will update here if there is any found

[Luo Yang]

I have done below modifications in your website:
1) Put below PHP codes into your theme file "functions.php", line 142~167:

add_shortcode( 'show_file_info', 'func_show_file_info');
function func_show_file_info($atts) {
     
    global $wpdb;
    $atts = shortcode_atts( array(
        'url' => '',
        'info' => '', // title, alt or id return
    ), $atts);
	
    $res = '';
	$url = $atts['url'];
	$attachment_id = attachment_url_to_postid( $url );
    if($atts['info'] == 'title'){
        $res = get_the_title($attachment_id);
    }
    if($atts['info'] == 'alt'){
        $res = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);
    }
    if($atts['info'] == 'id'){
        $res = $attachment_id;
    }
    if($atts['info'] == 'caption'){
        $res = get_the_excerpt($attachment_id);
    }
    return $res;
}

2) Edit the content template "Template for Photo Galleries", display the image file caption and title with above custom shortcode, line 7~8:
hidden link

caption: [show_file_info info="caption" url="[types field='photo' output="raw"][/types]"]
title: [show_file_info info="title" url="[types field='photo' output="raw"][/types]"]

Test it in front-end:
hidden link

It works fine.

Notice: you did not setup any caption for those image files, for example:
hidden link
in the input box "Caption" is empty.

[aaronT]

It works. How do I put the caption under the images?

Thanks,
Aaron

[Luo Yang]

That is a custom CSS codes problem, I have done below modification in your website:
Edit the content template:
hidden link
1) Modify the codes as below:

<h1>[wpv-post-title]</h1><br><br>

[wpv-for-each field="wpcf-photo"]
<div class="single-image">
<a href="[types field='photo' output="raw" ][/types]" class="lightbox" rel="gallery">
<img class="object-fit" src="[types field='photo' output="raw"][/types]" title="">
</a>
<div class="image-caption">[show_file_info info="caption" url="[types field='photo' output="raw"][/types]"]</div>
</div>
[/wpv-for-each]

2) Click "CSS Editor", add below CSS codes:

.single-image{
display:inline-table;
}

More help:
hidden link

[aaronT]

My issue is resolved now. Thank you!