WordPress.org

Ready to get started?Download WordPress

Forums

Edit gallery margins? (8 posts)

  1. transat99
    Member
    Posted 5 years ago #

    Hi - is there any way to adjust the margins around images in the WP gallery?

    I don't want any space around the pics so they butt against each other (side-to-side and top-to-bottom)...

    Thanks :)

  2. transat99
    Member
    Posted 5 years ago #

    Okay, I've found the following info at http://media.wiley.com/assets/1531/35/BonusChapter.pdf

    4. You can change the order of appearance of the images in the gallery,
    as well as the markup (HTML tags or CSS selectors).

    • captiontag: Change the markup that surrounds the image caption
    by altering the gallery short code to something like this:
    [gallery captiontag=”div”]. This places <div> .. </div>
    tags around the image caption. Or use [gallery captiontag=”
    p”] to place <p class=”gallery-caption”>...</p>
    tags around the image caption. The default markup for the captiontag
    option is dd.

    • icontag: Change the markup around the icontag (thumbnail
    icon) of the image by altering the gallery short code to something
    like this: [gallery icontag=”p”]. It places <p
    class=”gallery-icon”>...</p> tags around each thumbnail
    icon. The default markup for icontag is dt.

    • itemtag: Change the markup around the itemtag (each item) in
    the gallery by altering the gallery short code to something like
    this: [gallery itemtag=”span”]. This places <span
    class=”gallery-item”>...</span> tags around each item in
    the gallery. The default markup for the itemtag is dl.

    • orderby: Change the order used to display the thumbnails in the
    gallery by altering the gallery short code to something like this:
    [gallery orderby=”menu_order ASC”]. The thumbnails are
    displayed in ascending menu order. Another parameter you can
    use here is ID_order ASC, which displays the thumbnails in
    ascending order according to their IDs.

    22 Discovering What’s New in WordPress 2.5
    Table BC-2 Gallery Short Codes
    Example Output

    [gallery columns=”4” A four-column gallery containing
    size=”medium”] medium-sized images.

    [gallery columns=”10” A ten-column gallery containing
    id=”215” size=”thumbnail”] thumbnail images pulled from the blog
    post with the ID of 215.

    [gallery captiontag=”p” A three-column (default) gallery where
    icontag=”span”] each image is surrounded by
    <span>...</span> tags.

    You can define the style of the span tags in your CSS stylesheet if you have a little knowledge of CSS. For example:

    span.gallery-icon img {
    padding: 3px;
    background: white;
    border: 1px solid black;
    margin: 0 5px;
    }

    Placing this CSS in the stylesheet of your active theme automatically inserts a one-pixel black border around each thumbnail, with three pixels of padding and a white background. The left and right margins are five pixels in width, creating nice spacing between images in the gallery.

    ...and it does KIND OF work. If I add [gallery itemtag=”span”], it does place <span class=”gallery-item”> ... </span> tags around each item/image in the gallery...

    But when I attempt to use CSS (as described above), nothing changes. Nothing!

    Does ANYONE know what I'm doing wrong? I'm beyond desperate!!!

  3. Malin
    Member
    Posted 5 years ago #

    When I viewed the source, I found this comment below the style tags:
    <!-- see gallery_shortcode() in wp-includes/media.php -->

    So I changed the CSS in media.php and then it works fine. However, I don't think that is the right way to do it. It would be overwritten with next update and I don't want to mess with anything except my own theme.

    But there should be a way to tell the gallery to use style.css instead of the style in media.php.

    Anyone knows how? Perhaps something to add in functions.php?

  4. t31os
    Member
    Posted 5 years ago #

    No you don't need to edit the media.php....

    Just define the classes in your stylesheet, the media.php appends the elements with the classes for you, all you need do is add them to your stylesheet.

    Like so...

    div.gallery {padding:0!important}
    dl.gallery-item {width:auto;padding:5px;border:1px solid #ccc;display:inline;background:#efefef;margin:0 0 5px 5px}
    dd.gallery-caption {text-transform:capitalize;font-family:Georgia;font-size:14px;text-align:left;text-indent:8px}
    dt.gallery-icon {margin:0;padding:0}

    NOTE: I found upon testing, if using .gallery-item instead of dl.gallery-item, the CSS def's wouldn't correctly apply.

    I use [gallery] which applies the default tags, DIV, DL, DT, and DD... as per the CSS above..

    That's a straight copy and paste of the CSS i use, so adjust it as required....

    There's no reason you need to edit core files.

    This message <!-- see gallery_shortcode() in wp-includes/media.php --> is basically so if you're reading view source it's to indicate where to find the definitions for the gallery items, etc....

    Of course you might want to add in this one to...

    .gallery img {}

    Will give you the opportunity to remove the default border etc from the images...

  5. Malin
    Member
    Posted 5 years ago #

    Thanks t31os!!!!
    Probably wasn't working because I was writing .gallery-item.
    Anyway, I installed the plugin cleaner-gallery and that helped me as well.

  6. mayid
    Member
    Posted 5 years ago #

    Please, guide me.

    I´m trying to show the image descriptions under the thumbnails. But i can´t find documentation about this.

    I guess it´s under 'captiontag' name. But which var should i call to print it in php plugins? (i´m up to write my first plugin so to display this 'image description').

  7. JonasVorwerk
    Member
    Posted 5 years ago #

    The CSS code of t31os works great, the only thing which I can't remove is the default border around the thumbs.
    What probably the most of us want is a plain gallery...

    Anyone knows how to remove all the borders from the gallery?

  8. krembo99
    Member
    Posted 4 years ago #

    Yes, to remove the borders just use
    .gallery IMG{border-style:none;!important}
    (will apply on all the gallery

    or
    .gallery-icon {border-style:none;!important}

    on gallery icon

    The Image itself is class
    .atatchment-thumbnail

    As a side-not I must say that :
    1- the !important "hack" does not work on all browsers
    2- I do not really understand why the gallery CSS needs to be inline style, and not linked like all the rest.

Topic Closed

This topic has been closed to new replies.

About this Topic