Gallery title

  • SaladGoat

    (@saladgoat)


    6 years ago

    I’m looking to be able to add a title to galleries. Maybe ‘header’ or ‘heading’ is a better word? I want text to go at the top of a gallery.
    When I try to do it like this:
    TITLE
    [gallery]
    I end up with a big space between the title and the gallery. There’s additional hidden code there, for the gallery. Can’t that be moved off-screen?

    Alternately – and even better – if there was an option to add a title to the shortcode. Such as
    [gallery title='My Favourite Ducks']
    Then you could leave the invisible code and the gallery would just add the title on its own.

    Seems like it would be an easy add, but what do I know?
    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Joy

    (@joyously)

    It’s not that there’s additional hidden code in a gallery, it’s just how the theme styles the code. There are two main ways for the theme to output a gallery. If the theme does nothing special, WordPress outputs a style tag for the gallery and then something like

    <style>...</style>
<div id="gallery-1" class="gallery galleryid-555 gallery-columns-3 gallery-size-thumbnail">
  <dl class="gallery-item">
    <dt class="gallery-icon landscape">
      <a href="...">
        <img ...>
      </a>
    </dt>
    <dd id="gallery-1-611" class="wp-caption-text gallery-caption">
  </dl>
  <dl class="gallery-item">
...

    But if the theme uses add_theme_support( 'html5', array('gallery') ), then it looks more like this

    <div id="gallery-1" class="gallery galleryid-555 gallery-columns-3 gallery-size-thumbnail">
  <figure class="gallery-item">
    <div class="gallery-icon landscape">
      <a href="...">
        <img ...>
      </a>
    </div>
    <figcaption id="gallery-1-611" class="wp-caption-text gallery-caption">
  </figure>
  <figure class="gallery-item">
...

    The gallery shortcode can also be overridden, using totally different HTML tags, but that is for plugins to do. (themes shouldn’t be doing that)
    Regardless of the HTML, the style is what makes the spacing between things.
    In your example, was your title a paragraph (it would have the bottom margin of a paragraph) or a heading (it would have the bottom margin of a heading)?
    You can always go into the HTML view of the post and either put an inline style or a class that you use on multiple posts.
    <h3 style="bottom-margin: 1ex">Gallery Title</h3>
    or
    <h3 class="my-gallery-title">Gallery TItle</h3> and then in Additional CSS put something like

     .my-gallery-title {bottom-margin: 1ex;}
 .my-gallery-title + .gallery {top-margin: 1ex;}

    My example uses 1ex as the amount of margin. It’s a small amount (the height of an x in whatever font you have), which you could adjust as needed.

    Hi there,

    We had done this on our site , initially we had issues but now its fixed.

    Thanks.

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