Formatting Captions of Gallery Items

  • Resolved Greg Neise

    (@geneise)


    1 year, 10 months ago

    I am using this shortcode:

    [mla_gallery attachment_category=id-articles orderby="date DESC" columns=5 mla_viewer=true size=full post_mime_type=application/pdf post_parent=all link=file mla_target=_blank]
mla_caption='<b><a href="{+file_url+}" target="_blank">{+title+}</a></b><br>{+date,date(Y-m-d)+}<br>{+terms:attachment_tag+}'
[/mla_gallery]

    To display a gallery of PDF documents by category, with the caption below showing the title, date, and tags.

    It works, but I can’t seem to nail down the formatting. The <b> and <a href …> tags work as expected, but the line-breaks are ignored. I’d like it to display like so:

    Title
    yyyy-mm-dd
    att_tag, att_tag, att_tag…

    Also, it would be great if the thumbnails could align at the top.

    Thanks!

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author David Lingren

    (@dglingren)

    Thanks for your questions and for including the complete text of your shortcode; very helpful.

    The line-break tags are most likely being changed to spaces by the gutenberg block containing your shortcode. If you put the shortcode in a “Custom HTML” block it should work as you intend; it does on my system.

    You wrote “Also, it would be great if the thumbnails could align at the top.” This can be accomplished by modifying the CSS styles assigned to the gallery items.

    You can apply any CSS styles you like to your gallery by creating a custom style template. You can also change the HTML content with a custom markup template. You can find more information about both in the “Style and Markup Templates” section of the Settings/Media Library Assistant Documentation tab. To create the Style Template:

    1. Navigate to the Settings/Media Library Assistant Shortcodes tab.
    2. Click on the “Style” view just above the templates table.
    3. Hover over the “default (default)” Style entry (for the Gallery shortcode) and click the “Copy” action link.
    4. When the page refreshes, the “Edit Template” screen will appear.
    5. Change the template Name to (for example) “geneise”.
    6. Make the changes you need to apply the styles you’d like (see below).
    7. Scroll to the bottom and click “Update” to save your template.

    Once that’s done you can add the template to your shortcode with the mla_style=geneise parameter. Creating a custom markup template is very similar.

    For your application a simple modification of the .gallery_item styles, adding vertical-align: top;, should work:

    #[+selector+] .gallery-item {
    float: [+float+];
    margin: [+margin+];
    display: inline-block;
    text-align: center;
    vertical-align: top;
    width: [+itemwidth+];
    }

    I am marking this topic resolved, but please update it if you have problems or further questions regarding the above suggestions. Thanks for your interest in the plugin.

    Thread Starter Greg Neise

    (@geneise)

    Thank you! The CSS I was trying was formatted slightly differently, but didn’t work. The CSS you provided above didn’t work either, but got me closer to the solution for aligning the items to the top, which is:

    .gallery-item {
text-align: left;
vertical-align: top;
}

    I’m not using Gutenberg. I’m using the Avada theme (which does not use Gutenberg by default, and uses the “classic” text editor), placing the shortcode from my original post here in a <code> element, which is specifically for various code (as you suggest).

    What’s interesting and frustrating is that the only part of this that’s being ignored is the <br> tags. I’ve been using Avada for years, with all kinds of code in <code> elements, and it’s always worked as expected. ˉ\_(ツ)_/ˉ

    Any other ideas or guidance is greatly appreciated, and thanks again!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Formatting Captions of Gallery Items’ is closed to new replies.