Photoswipe not wrapping text to image size.

[wereboar]

I'm investigating upgrading my install of flatpress to 1.4.1. I've created a test instance here:

https://wereboar.com/razorback

All seems to be well, save the photoswipe gallery. Previously, on 1.2.1, the text would wrap to the image size, and you'd get a nice, orderly grid. Now, the text isn't wrapping or breaking and the entire line is displayed, causing a very disorderly view. I've tried this with a couple of different themes, and verified that it happens in 1.3x as well with the theme I'm currently using on my production page.

See these two comparisons:

Doesn't work:
https://wereboar.com/razorback/index.ph ... -the-year/

Works:
https://wereboar.com/projects/index.php ... -the-year/

I realize the themes are different, but I've tried the theme on the non-working page with the same results.

So my questions:

Is this now the expected behavior of photoswipe?

Is there an easy fix if not?

If none of the above, is more information needed here?

Thank you.

[Arvid]

Hi, glad you're blogging with FlatPress!
The problem here is a CSS issue. In fp-plugins/photoswipe/res/photoswipe-4.1.3/photoswipe.css, go to line 218 where .img-gallery div.photoswipe figure is defined.
Add a line that defines the image of the figure element, such as:

Code: Select all

.img-gallery div.photoswipe figure {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  margin: .5em 1em 0 0;
  width: 140px;
}

(add the "width" line)

This way, you fixed the width of each figure element, and the caption has to wrap.
Let us know if that worked!

All the best,
Arvid


Edit: Good news is, I can't reproduce the problem with PhotoSwipe in the current development versions of FlatPress 1.5.

[wereboar]

Thank you for the info. I'll try the fix as soon as I can get some time.