• Resolved xzackly

    (@xzackly)


    Hey. Looking for a little sage advice on muscling a thumbnail gallery theme into shape.

    Here’s the gallery I’m working with:
    http://www.standbyformindcontrol.com/i-like-to-watch/

    I’ve got it working ALMOST the way I want it but…

    1) I’d like to show image title on hover, but I need the title to appear over a background field so it can be legible regardless of image color (as one usually gets with mouseover text). Is this possible?

    2) I’m having trouble getting all of my images to show up uncropped (as thumbs). They aren’t a standard height/width ratio (although they’re close). Not a tragedy, but it would be nice if the full image was visible.

    3) Is it possible to draw the image border OUTSIDE of the padding, so the padding appears as a poster mat? Or to create a similar effect another way?

    I’m not a CSS whiz or anything, but I can usually hunt and peck my way through code if I need to. Also not much of a designer, so all friendly advice warmly received. What you see live on the site is the result of me just messing with values and refreshing until it didn’t look terrible…

    If anyone has a similar style gallery and would be happy to share their theme settings so I (and others) might learn from the comparison, that would be awesome.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor Photo Gallery Support

    (@photogallerysupport)

    Hi @xzackly!

    Thanks for posting your questions!

    1. You can add the following code to add overlay background color for titles on your gallery images:

    .bwg_title_spun1_1 {
        background-color: rgba(0, 0, 0, 0.52);
    }

    Please give this a try and let me know if it works. You can add it to style.css file or custom CSS editor of your website theme.

    2. Unfortunately Thumbnails view will always crop the images a little, if they are not the same size as thumbnail dimensions. However, if you use Masonry view, they will appear not cropped, and in a masonry grid.

    This is a more modern view, than standard thumbnails, so please try it and see if you like the display.

    3. Unfortunately the borders cannot be set before padding, since the borders are around thumbnail images, whereas the padding is added for their containers.

    Cheers!

    Thanks for the response.

    I tried adding the above code to both photo-gallery/update/style.css and to my theme’s style.css, (since I wasn’t clear which was correct), applied ‘show on hover’ to the gallery, cleared my browser cache, and did a hard reload but didn’t see any effect.

    Then I messed with the rbga values a bit just to see if the effect was too faint, but nope.

    I’ve been poking around and I found a bunch of .css hover effect libraries, but I lack the skills to apply them to photo-gallery. There are many ways in which my problem could be solved — that being that captions on hover are sometimes illegible due to variations in image color/brightness. A background field could be added, the image could convert to greyscale, the image could decrease in luminosity… or pretty much any of these could be applied: http://imagehover.io/

    Happy to experiment with you. I’d think something like this would be a good feature to include in photo-gallery?

    Plugin Contributor Photo Gallery Support

    (@photogallerysupport)

    Hey @xzackly!

    Of course these effects would be great features of the plugin! We are very open to suggestions, could you please add your suggestion to our Submit Your Idea page?

    Our development team will consider working on this for further updates.
    Thanks in advance! Have a wonderful day!

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.