Caption display location

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.

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

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

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

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%;
}

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

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

Hi Steve,

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

Cheers,

Dave

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

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

Thanks,

Dave

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

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

Many thanks,

Dave