Tagged: , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 8, 2015 at 7:00 pm #441738
    kristenangel

    Hello,

    I am trying to get a Masonry gallery caption appear like the overlay caption style on Images.

    Using Images in Grid Rows: I’ve added images into a Grid Row with a caption overlay applied to a few images. Visually, this is perfect. But the reason this doesn’t work is because the lightbox gallery links all images together, rather than keeping a certain group of images within one gallery. If there is another group of photos on the page, it connects all photos together in the lightbox view.

    Using Masonry Gallery: This functionality great, except I ran into many css troubles when simply trying to make the images that have captions look like the gallery above (caption centered over image, dark background if caption is applied to image).

    If I stick with using images in grid rows, is there any way to link photos to unique galleries? Assuming this is not possible, What is the correct CSS to make captions in the Masonry Gallery appear over the photos? Note, only images with captions should have a screened background.

    May 11, 2015 at 3:24 pm #442486
    Andy

    Hi kristenangel!

    I searched for a quick solution and this thread: http://wordpress.org/support/topic/add-relxyz-to-gallery-link may help you because it tells you how to add a rel attribute to the gallery links. Insert following code at the bottom of functions.php:

    add_filter( 'wp_get_attachment_link' , 'add_lighbox_rel' );
function add_lighbox_rel( $attachment_link )
{
    if( strpos( $attachment_link , 'a href') != false && strpos( $attachment_link , 'img') != false )
        $attachment_link = str_replace( 'a href' , 'a rel="lightbox[gallery]" href' , $attachment_link );
    return $attachment_link;
}

    What kind of captions over the photos do you mean? can you show us a screenshot of what you are trying to achieve (imgur.com, dropbox)?

    Cheers!
    Andy

    May 12, 2015 at 7:21 pm #443268
    kristenangel

    Thanks, Andy. The code above didn’t seem to work to make the galleries separate.

    Here is a screen shot of what I am looking to do. https://dl.dropboxusercontent.com/u/42820783/masonry-gallery.png. I can accomplish this using Images placed in Grid Rows, but it links all photos together in the same lightbox. I need to separate my lightboxes, which Masonry Gallery allows me to do.

    So if I use Masonry Galleries, I just need help with the CSS. When I attempt to put the caption on top of the image on a transparent background, I can’t seem to mimic the style or rollover treatment used on regular images with a caption overlay. The “caption” is entered when I open Masonry Gallery > Edit Gallery, then enter a caption under the photos selected.

    I’ve updated the explanation to be more clear on the test page (see private data on original post, above).

    Thank you for your help.

    May 18, 2015 at 4:22 pm #445785
    Andy

    Hey!

    sorry for the late response and thanks for the update, which made things much more clear for us.
    For you masonry gallery’s captions use this CSS:

    .av-inner-masonry-content-pos {
margin-top: 67px;
margin-left: 23px;
}

    and adjust as needed.

    For the masonry gallery’s opacity behavior use this:

    .av-masonry-entry figcaption.av-inner-masonry-content.site-background {
opacity: 1;
background-color: rgba(0,0,0,0.5);
}

    Hope this helps.

    Regards,
    Andy

    May 18, 2015 at 10:56 pm #446097
    kristenangel

    Awesome. I’m 99% there… is there a way to turn off the color overlay if a caption is not in place?

    May 19, 2015 at 12:15 pm #446366
    Andy

    Hi!

    there is no easy way for this, because the masonry gallery’s CSS will work if there are captions or no captions. You would need to hire someone for this kind of customization.

    Regards,
    Andy

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.