For single attached image, display with caption

  • doclalor

    (@doclalor)


    6 years, 9 months ago

    In my template, I’m adding shortcode based on how many images are attached to a post.

    If > 1, then I want a lightbox gallery:

    [mla_gallery main_size='full' tile_size='full' link='post' style='random']

    works (see, e.g., this page).

    If = 1, I want just the regular image with caption. Not sure how to do this, I tried triggering the display of the caption by adding a value for captiontag and for mla_caption. As you can see on this page, I can’t get the caption to show up. Here’s what I’m using:

    [mla_gallery main_size='full' tile_size='full' link='post' style='random' captiontag='figure' mla_caption='{+title+}, {+caption+}, {+description+}']

    It’s just the regular .photonic-wp-stream #photonic-wp-stream-1-container divs. No caption.

    Not sure if it matters, but (as you see) I’m using Media Library Assistant.

    Is there a way I can achieve my goal in my template code?

    Or perhaps this is a “Media Library Assistant” question, or a question about WordPress core gallery? Any direction is welcome.

    Thanks!

    (Note: My site is under development, so once I get an answer, it’ll be password protected again.)

    • This topic was modified 6 years, 9 months ago by doclalor.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Sayontan Sinha

    (@sayontan)

    6 years, 9 months ago

    I am unsure as to how Photonic ties in with this requirement for you. Are you simply intending to associate a lightbox with the image via Photonic?

    Do you intend to have all images in your posts associated to lightboxes via Photonic? If so, why do you need to use MLA? Why not use the standard WP feature that lets you insert an image with a caption? Photonic lets you associate lightboxes to non-Photonic images via Photonic → Settings → Generic Options → Generic Settings → Photonic Lightbox for non-Photonic Images. My point is, you are trying to use a gallery construct (which, by definition, has more than one image) to display a single image.

    If there is no way to insert a standard WP image + caption in your case, you would have to switch to the Masonry layout in Photonic, as the Justified Grid and Mosaic layouts don’t support displaying captions below photos.

    Thread Starter doclalor

    (@doclalor)

    6 years, 9 months ago

    Thank you! You are right.

    I’m sorry to bother you with the follow-up, as it’s beyond the scope of your plugin. But in case you’re willing to help further, I’m looking, then, for an existing WordPress function that will output (1) the image (2) with a link (3) to the attachment page AND (4) the caption. I’ve pieced together some of that (see below), but there must be a better way.

    Here are the functions what I’ve tinkered with (I must not be hitting the right one): 

    wp_get_attachment_image( ); 
get_post(get_post_thumbnail_id())->post_excerpt;
wp_get_attachment_image( 'thumbnail' ); 
wp_get_attachment_url('get_the_ID()');
get_attachment_link($attachment->ID); 
get_attachment_link( get_post_thumbnail_id() );
the_post_thumbnail()
$img_link = get_attachment_link( get_post_thumbnail_id() );

    and much, much more . . . and nonsense like:

    <a href="'. get_attachment_link( get_post_thumbnail_id() ) . '">' . get_the_post_thumbnail(get_the_ID(),'full') . '</a><br /><p>' . get_post(get_post_thumbnail_id())->post_excerpt . '</p>

    Thank you for any help identifying an existing WordPress function (or appropriate combination of functions) that will output (1) the image (2) with a link (3) to the attachment page AND will also output (4) the caption!

    • This reply was modified 6 years, 9 months ago by doclalor.
    • This reply was modified 6 years, 9 months ago by doclalor.
    • This reply was modified 6 years, 9 months ago by doclalor.
    • This reply was modified 6 years, 9 months ago by doclalor.
    • This reply was modified 6 years, 9 months ago by doclalor.
    Thread Starter doclalor

    (@doclalor)

    6 years, 9 months ago

    I have this, which works! But is perhaps inelegant: 

    $image_caption = get_post(get_post_thumbnail_id())->post_excerpt;
$img_src = wp_get_attachment_image_url(get_post_thumbnail_id(),'full');
$img_link = get_attachment_link( get_post_thumbnail_id() );
$output_html = '<div class="blah"><a href="'. $img_link .'"><img src="'.$img_src.'" /></a><p>' . $image_caption . '</p></div>';

    I appreciate any suggested improvements.

    • This reply was modified 6 years, 9 months ago by doclalor.
    • This reply was modified 6 years, 9 months ago by doclalor.
    • This reply was modified 6 years, 9 months ago by doclalor.
    Thread Starter doclalor

    (@doclalor)

    6 years, 9 months ago

    I like your idea of working with the Masonry layout across the site, for uniformity of experience. Here’s my shortcode:

    [mla_gallery main_size='full' tile_size='full' link='post' style='random' layout='masonry' mla_caption='<p>{+title+}, {+caption+}, {+description+}</p>']

    But that raises an issue, too, as it makes it hard to style captions. Is there a way to specify tags in which captions can be enclosed? As it is, here is the HTML it generates: 

    <div class="photonic-photo-title photonic-title">
   <a class="photonic-launch-gallery launch-gallery-imagelightbox imagelightbox" rel="lightbox-photonic-wp-stream-1" href="https://mycomeditations.net/tii-content/uploads/sites/2/2019/08/Hyphal-Tip.jpg.jpg" title="" data-title="<a href='https://mycomeditations.net/pulsed-growth-of-fungal-hyphal-tips/hyphal-tip-jpg/' >
   &quot;Hyphal tip,&quot; by <a href=&quot;https://www.flickr.com/people/47353092@N00&quot;>AJC1</a>.</a>" data-photonic-media-type="image" data-photonic-deep="gallery[photonic-wp-stream-1]/3251/">"Hyphal tip," by </a><a href="https://www.flickr.com/people/47353092@N00" title="">AJC1</a>.
</div>

    It would be great to be able to wrap the caption itself in <p>-tags (and specify a class). Also, because there’s already an -tag in the caption (e.g., on this page), there’s an embedded within the scope of an , breaking the line, too.

    Thanks for your help ironing out my gallery issue!

    Plugin Author Sayontan Sinha

    (@sayontan)

    6 years, 9 months ago

    Doesn’t step 3 here work for you? The native WP “Add Media” feature lets you display captions and link to the attachment page. Is that what you are looking for?

    On the page you have linked it appears that you are still trying to use the MLA + Photonic shortcode to generate your markup; that shouldn’t be required if you are using native WP captions.

    Thread Starter doclalor

    (@doclalor)

    6 years, 9 months ago

    Thank you for the reply!

    I am not inserting images one-by-one. I am trying to write code in the template to automatically display whatever images are attached to posts. (Is that wrong-headed?)

    So while I’m generating that code in my template, I have:

    $images_html = "[mla_gallery main_size='full' tile_size='full' link='post' style='random' layout='masonry']";

    And I tried adding a parameter to wrap the caption in <p>-tags, like maybe:

    ‘caption='<p>{+caption+}, {+description+}</p>’;

    ↑ Obviously THAT didn’t work. But will something else?

    Does that make sense of what I’m attempting?

    • This reply was modified 6 years, 9 months ago by doclalor.
    • This reply was modified 6 years, 9 months ago by doclalor.
    • This reply was modified 6 years, 9 months ago by doclalor.
    Plugin Author Sayontan Sinha

    (@sayontan)

    6 years, 9 months ago

    Sorry for the delayed response. This took some time to investigate.

    The issue here, as you have observed, is that the title is meant to be linked… but you have a nested link therein. Generally if you are doing things the standard Photonic way there is no issue.

    But your requirement is quite specific, and will require custom code that you might be able to use without changing Photonic (this really depends on how MLA stores attachment data).

    Photonic has a filter called photonic_modify_title that you can use in conjunction with the wp_filter_nohtml_kses() function. Essentially in your child theme’s functions.php you can make use of this filter thus:

    add_filter('photonic_modify_title', 'my_custom_title_modifier', 10, 2);
function my_custom_title_modifier($title, $attachment) {
    return wp_filter_nohtml_kses(wp_get_attachment_caption($attachment->ID));
}

    You can also append the description after passing it through wp_filter_no_html_kses() to the return function above, assuming that you can fetch it through the MLA attachment.

    The wp call will strip out all nested HTML tags, including the link, but the stripped down title will be linked via Photonic overall.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘For single attached image, display with caption’ is closed to new replies.