• Resolved riflebird

    (@riflebird)


    Hi there,

    I’m using Responsive Image Gallery option as I need to display images horizontally aligned through their centre. I’d really like to display title / caption data underneath each image if possible.

    Currently set to dpispaly on hoverf as teh Always Visible option overlays on the image rather than sitting below the image. I know I can acheive this effect using a masonry layout (as in https://silsoncontemporaryart.co.uk/artists/lesley-birch) but I can’t find a way to horizontal centre align using the masonry layout.

    Hope you can help me out.

    Many thanks,

    Dave

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

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Support elviiso

    (@elviiso)

    Hi @riflebird

    If you are referring to aligning the caption and description centrally when using the Masonry gallery to create a gallery such as this https://silsoncontemporaryart.co.uk/artists/lesley-birch then you can make that happen using the following custom CSS:

    .foogallery.fg-masonry.fg-captions-bottom .fg-item-inner .fg-caption-inner {
        text-align:center !important;
    }

    ​All you’ll now need to do is simply copy the code snippet as it is and go to the Edit page of that particular gallery and if you scroll down past the Gallery Settings section, you’ll see the “Custom CSS” section. Paste the code snippet as it is on the text box below it and save. You can also paste it to your theme’s style.css file or custom CSS/additional CSS area.

    Let us know if it does help!

    Kind regards,
    Elvis.

    Thread Starter riflebird

    (@riflebird)

    Hi Elvis,

    Thanks for getting back to me. sorry but that’s not what I’m after. I’m entirely happy with the desc/caption layout at https://silsoncontemporaryart.co.uk/artists/lesley-birch but what I want to achieve is a gallery layout like https://silsoncontemporaryart.co.uk/test/ but with the captions always visible below the image, as in the lesley birch example.

    However, I have a bigger problem… having just visited the leslie birch page I can see images stacking / overlapping each other yet again…https://prnt.sc/17uikci

    I was assured the latest release of the plugin would resolve this issue but here it is again. My client has a new exhibition and is obviously not happy with the galleries displaying incorrectly.

    I’m running 2.0.39 on WP 5.7.2 and the Salient theme.

    Hope you can help me with this asap.

    Thanks,

    Dave

    Thread Starter riflebird

    (@riflebird)

    Hi Elvis,

    Having looked over all the other artists pages, they all appear OK. Maybe the Leslie Birch page just required a refresh. So, could we please go back to my initial question regarding placing text below images when using a Responsive Image Gallery option rather than Masonry. The page is question is https://silsoncontemporaryart.co.uk/test/ where the images align horizontally through their centre point. This is the layout the client is insisting on and I’m not able to replicate this using a masonry layout (where I can position the text under each image.

    Hope this makes sense!

    Many thanks,

    Dave

    Plugin Author bradvin

    (@bradvin)

    Hi @riflebird

    I had a look at https://silsoncontemporaryart.co.uk/test/

    The only templates which support captions below the images are masonry and simple portfolio. We are investigating updating the responsive template to also cater for this, but it will mean some fundamental CSS changes which have to be tested.

    Try out simple portfolio to see if that will work for you

    Plugin Author bradvin

    (@bradvin)

    Also, related to the overlap issue, please can you add this custom CSS:

    .fg-masonry.fg-fixed .fg-image {
    	width: 100%;
    	height: auto;
    	max-width: 100%;
    }
    Thread Starter riflebird

    (@riflebird)

    Hi there,

    Thanks for getting back. Added the css (in child theme style.css) to fix the overlap but still getting this… https://prnt.sc/17v5g2g

    This is in Edge browser (which I never use) so shouldn’t be a cached version of previous error.

    Regards,

    Dave

    Plugin Author steveush

    (@steveush)

    Hi @riflebird,

    I believe the issue here is your theme sets the following CSS on the img elements within the gallery:

    .row .col img:not([srcset]) {
        width: auto;
    }

    This CSS causes the browser to not apply the aspect-ratio properly. I’m not sure why theme developers have started using this but it has popped up in the last few weeks and has caused us a few issues.

    I believe the CSS @bradvin gave you will correct the issue however we need to make the CSS selector for the class more specific or else your theme’s CSS overrides it.

    Please try the following modified selector:

    .fg-masonry.fg-fixed .fg-item .fg-image {
    	width: 100%;
    	height: auto;
    	max-width: 100%;
    }

    If that is still not applying correctly please let me know.

    Thanks
    Steve

    Thread Starter riflebird

    (@riflebird)

    Hi Steve,

    Big thanks for this. It looks like this has fixed the problem.

    Cheers,

    Dave

    Thread Starter riflebird

    (@riflebird)

    Hi Steve,

    Regarding the vertical alignment issue – I’m able to achieve this when using the Responsive Image Gallery option and adding the following…

    .fg-default .fg-item { vertical-align: middle !important;}

    At your suggestion I’ve tried the Simple Portfolio option which displays desc/captions exactly how I want them. I figured I could do some similar css but the following ain’t working…

    .fg-simple_portfolio .fg-item { vertical-align: middle !important;}

    Hope you might be able to help me out.

    Many thanks,

    Dave

    Thread Starter riflebird

    (@riflebird)

    I’ve added both gallery version to https://silsoncontemporaryart.co.uk/test/ which I’m hoping helps illustrate the issue.

    Thanks,

    Dave

    Plugin Author steveush

    (@steveush)

    Hi Dave,

    The portfolio template uses the newer CSS flexbox for layout, so it should be slightly easier to get the look you are after. The below CSS should do it:

    .foogallery.fg-simple_portfolio {
    	align-items: center;
    }

    Thanks
    Steve

    Thread Starter riflebird

    (@riflebird)

    Steve, you’re a star! That works a treat and is exactly what I was after.

    Many thanks,

    Dave

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