ah.. see the other post where I replied to you, earlier on in the post I added some css and mentioned what I do to get more control over stuff like this.
It’s because in the photoswipe settings in WP admin, the width of the thumbnails is set. This stops it being fully responsive.
I set the thumbnail width to 0 0 in the admin
Then add css
.psgal figure {
width: 25%!important;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
padding: 2px!important;
}
.psgal figure img {
width: 100%!important;
height: auto!important;
padding: 0px!important;
}
.psgal figure a {
width: 100%!important;
height: auto!important;
}
That forces the images to be responsive.
.psgal figure {
width: 25%!important; }
is desktop 4 columns
You can set this at 100% for your mobile, then use media queries to set to 50% tablet and 33.333% desktop
You might also need to add
add_image_size( 'photoswipe_thumbnails', 400, 9999, false );
add_image_size( 'photoswipe_full', 1800, 9999, false );
to functions.php if the 0 0 stops the thumbnails generating
ps if you use safari or chrome, right click and view the css, you can see it’s hardcoding the thumb sizes etc. Also safari has a responsive view on the develop menu
Thread Starter
Ali.T.
(@polaatx)
Hi sguk,
Thanks so much for all the instructions. I am very thankful for all the help.
First, per your instructions, I set the thumb sizes to 0 0 in the photoswipe settings.
That made the thumbs disappear.
But then I discovered that the rest of your instructions work no matter what the thumb size is in the settings.
So for small-screen css, I added this:
.psgal figure {
width: 100%!important;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
padding: 2px 0px!important;
}
.psgal figure img {
width: 100%!important;
height: auto!important;
padding: 0px!important;
}
.psgal figure a {
width: 100%!important;
height: auto!important;
}
And now my thumbs are stretch edge-to-edge. Note: set the padding to 2px 0px!important; so there is no left and right padding to achieve the edge-to-edge look.
Again, thank you.
Brilliant! Glad it helped and you’re welcome. I know how frustration things can be when you sit for hours trying to get stuff to work!
Ps
I must have set 0 0 to give me more control over the thumbnail cropping, hence the other entries into functions.php (which you didn’t need)
Thanks a lot for providing support @sguk
Have you had a look at the latest version? https://github.com/thriveweb/photoswipe-masonry
