How to limit image width?

The image width is detected automatically. There is no option to limit the width in the lightbox, it will always be as wide as possible or smaller if the image size is smaller than the viewport in the browser.

Technically it is possible to add an option in the backend to limit the detected width/height of images to a given maximum value, so PhotoSwipe may display the images smaller as they really are – but this makes little sense, since the ideal image size also depends on the screen on which the image is displayed. On a 4K device the maximum width might be different than on a device which only displays FullHD. Mobile devices also may have different requirements.

Also at the moment the images on your example page are already smaller. The widest image I found was 1125px wide. Maybe you misunderstood the meaning of the unit “px”. 1px is not neccessarly 1 pixel on the screen. That depends on the pixel density of the device.

I’m not sure what you’re looking at but some of those images are 2,200 pixels in width. I have set them to 1400 pixels via CSS but they align left instead of aligning centre. There must be away to have them align centre surely?

For reference I’m a professional designer and developer, so I fully understand pixels. I use a 4K screen and images set to 1400 pixels, take up 1400 pixels on the screen. On my other FHD monitor they take up 1400 pixels too. I dont understand what you are talking about here in reference to my request.

Well – the images I looked at did not exceed 1400 px width in the lightbox on my 4K display, so I was under the impression that this is the final width. But this was only the case, because Photoswipe already scales the image down if needed and my 4K display runs at 200% scaling so the width and height is 1920px / 1080px. The images I looked at got scaled down to fit the viewport which resulted in 1440px width.

So the image will always fit, regardless how big it is. However if the display is much bigger and could indeed display 2000px wide images (e.g. a 4K display used at 150% scaling which provides 2560px width), a limit to 1440px width may display the image way smaller as the display is. I was not sure, if this is really the desired result. If this is what you need I can add an option to ignore any size above the given limit and display images only at the given maximum width and height, even if this is way smaller than the current viewport.

In addition about px/pixels: 1440px will not always be 1440 pixels. It depends on the configured scaling of the display. Also see: https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

• This reply was modified 1 year, 6 months ago by Arno Welzel.
• This reply was modified 1 year, 6 months ago by Arno Welzel.
• This reply was modified 1 year, 6 months ago by Arno Welzel.

Hi Arno,

“an option to ignore any size above the given limit and display images only at the given maximum width and height” – Yes, that is exactly what I am looking for. Width specifically.

In the meantime though, is there a way to do this with CSS. I have already set the image to 1400 pixels maximum. The issue is that it doesn’t display centrally.

Regards,

David

No, CSS does not work, because the image size read from the file header and used by PhotoSwipe will not change, regardless, what CSS says. So if you make the image smaller it will just move inside the image viewport. The backend reads the image header and tells PhotoSwipe how big it is. And exactly at that point I can add a limit to tell PhotoSwipe to use a smaller size.

• This reply was modified 1 year, 6 months ago by Arno Welzel.

Hi Arno,

Thank you for your quick responses and help. What sort of time will it be to put this option in?

Regards,

David

At the moment I am busy with other projects as well, but I think this can be done within a week.

Thanks Arlo. The site is due to launch in about 10 days so a week would be perfect.

Regards,

David

Release 5.0.30 adds an option to limit images to a given width or height (or both)

Hi Arno,

Thank you for the quick response to this. Its sort of working except for the first image of the slider which is not adhering to the width limit. You can see this here: https://airstream.foxrobinson.com/airstream/airstream-af3/ PASSWORD: cucumber . I have set it to 1400 pixels and all images after the first adhere to this. The first image however, is displaying full size. The same happens if I set a maximum height.

Sorry, I have no idea why this happens. Can you please check if the attributes data-lbwps-width and data-lbwps-height are present in the original page source? Because these need to be set by the plugin and must not be present in the original post/article.

Hi Arno,

The plugin is adding data-lbwps-width=”2200″ to the first image. All the other images are having data-lbwps-width=”1400″ added. When I deactivate the plugin there are no data-lbwps bits on any images.

Regards,

David

• This reply was modified 1 year, 6 months ago by David Robinson.

Hmm – very strange. The code for that does not handle first images different then any other image. In fact the procedure which adds the size information doesn’t even know if it is the first image or not. Do you have any caching solution in use? Maybe some cached data is being used here which needs to be cleaned up.

Please ignore my previous message. This thread is saying resolved so I cant see any of the previous correspondence, only my initial message.

It was my mistake. I had hard coded the data-lbwps-width=”2200″ code into the template and then completely forgot. I have now removed it, but instead the image is ignored and is not part of the slider. Clicking on it, opens the image page instead.