Photoswipe image size/ratio

Question

I'm using a Laravel website, including Photoswipe. Here's my problem: When I click on a photo, it pops up with a predefined height and width (in my case 764X480). I'd like my photos to open with their original ratio, not with a predefined (as I have some panoramas). Is there a way to fix that? And is it possible to set another size? You can check the behaviour on http://www.pixelkomando.com/paysages

score 19 · Answer 1 · answered Jul 20 '19 at 16:34

19

Just put in the CSS "object-fit: contain":

.pswp img {
    max-width: none;
    object-fit: contain;
}

It will solve your problem

answered Jul 20 '19 at 16:34

Marko Sikman

345
3
8

1

need to add `.pswp__img--placeholder--blank{ display: none !important; }` as mentioned by Austyn for seamless transition – adumred Aug 08 '22 at 09:19
It is not working well with the dynamic caption plugin. – Mert S. Kaplan Feb 28 '23 at 17:24

Ergec · Accepted Answer · 2020-03-25T13:17:53.393

Edit

I wrote a small wrapper in jQuery for those who do not want to deal with "coding" (ironic)

https://ergec.github.io/jQuery-for-PhotoSwipe/

Original Answer

Unfortunately PhotoSwipe does not have an option to auto detect image dimensions. It's not a bug or a missing feature. It's authors preference, to keep it small and clean pure javascript code. Author's suggestions are here http://photoswipe.com/documentation/faq.html

You may try this. (Source: https://github.com/dimsemenov/PhotoSwipe/issues/796)

var items = [ 
  { src: 'http://........', w:0, h:0 },
  { src: 'http://........', w:0, h:0 }
];

var gallery = new PhotoSwipe( ..... );
gallery.listen('gettingData', function(index, item) {
        if (item.w < 1 || item.h < 1) { // unknown size
        var img = new Image(); 
        img.onload = function() { // will get size after load
        item.w = this.width; // set image width
        item.h = this.height; // set image height
           gallery.invalidateCurrItems(); // reinit Items
           gallery.updateSize(true); // reinit Items
        }
    img.src = item.src; // let's download image
    }
});
gallery.init();

I personally haven't tested it but author kind of approve it by commenting below the code. There ore some other solutions from developers on their github page under Issues tab.

Also you have couple of other options too

1. Dirtiest solution. This may be good enough for a couple of images but will take too much time to wait for init if you have some 10s of images.

Embed your full size images on page. This will give you access to image dimensions on window load so you can construct your array of images with actual dimensions then init PhotoSwipe.

2. You can use jQuery plugins like http://imagesloaded.desandro.com/ to detect if images are loaded or not. You can init PhotoSwipe on document ready using a small image placeholders with dimensions like 100x100. Then based on the process of the plugin, use PhotoSwipe API to update loaded images.

3. Most advanced solution. imagesLoaded plugin i mentioned above uses jquery's deferred objects. http://api.jquery.com/category/deferred-object/ you're always welcome to write your own plugin.

score 3 · Answer 3 · answered Feb 05 '20 at 19:16

As Marko stated

.pswp img {
    max-width: none;
    object-fit: contain;
}

It works well and but I would add !important to the object-fit property.

Also if you don't want the to use a placeholder image then add the following because it will hide the black/grey box that appears around the image before the size gets recalculated.

.pswp__img--placeholder--blank{
    display: none !important;
}

score 1 · Answer 4 · edited Nov 10 '16 at 18:25

Thanks. I'm really not good enough in JS. I've found a solution.

I replaced the following lines :

// create slide object
item = {
  src: linkEl.getAttribute('href'),
  w: parseInt(size[0], 10),
  h: parseInt(size[1], 10)
};

by

// create slide object
item = {
  src: linkEl.getAttribute('href'),
  w: parseInt(size[0], 12),
  h: parseInt(size[1], 12)
};

But I have to say I don't know what 10 and 12 are for.

For keeping the ratio, I only found a CSS trick :

I added a line in photoswipe.css like this:

.pswp img {
  max-width: none;
}

It's now :

.pswp img {
  max-width: none;
  height: auto !important;
}

It doesn't seem to be the best way to solve it but I have the result I needed.

10 and 12 are bases in mathematics. 10 is default value but this sounds irrelevant to your problem at lease this is what i think, i mean replacing 10 with 12. anyway if you're happy with result then nothing to say. — Ergec, Nov 10 '16 at 18:31

score 1 · Answer 5 · answered Mar 01 '21 at 22:14

Use getimagesize php function to get width and height width is on the index 0 and height on the index 1

if you're using spatie for storing images get path using $image->url or $image->getUrl()

The data-size attribute should look like below, use public_path to avoid errors if you're images are stored under storage/app/public/ or put the full path of your image

data-size="{{getimagesize(public_path($img->url))[0]}}x{{getimagesize(public_path($img->url))[1]}}"

score 0 · Answer 6 · answered Jun 11 '20 at 23:13

I came across the same problem trying to resize the PhotoSwipe image within my Cargo Collective site. I added the following to the custom CSS and it worked perfectly:

.pswp img { 
object-fit: contain !important;
max-height: 400px !important;
max-width: auto !important;
margin-top: 100px;
margin-bottom: 100px;
 }

I also changed the background to white with the following:

.pswp__bg {
    background-color: #fff !important;
}
.Pswp_bg image-zoom-background {
    background-color: #fff !important;
}

Photoswipe image size/ratio

6 Answers6