Introduce zoom levels fill-width fill-height plus 9 alignment options (anchor points)

[porg]

Status Quo

• Alignment for the zoom levels fit and fill is currently hardcoded to mid-center.
• This is a good fit for most content.

Design / Presentation Challenge

• But for some content having full control over alignment matters!
• Most prominent use case: Screenshots or Screen Designs. Sample use case below.
• But also other use cases, e.g. full body model photography, where you want e.g. the initial zoom level to be the total view (= fit) where you see the whole model, and then the zoomed-in-view to be fill-width with an alignment of top-center so that you can cycle through the zoomed in head/torso area of the photo models.

Proposal

Alignment options

Currently hard-coded to mid-center. I propose to offer all 9 alignment anchor points:

• top-left, top-center, top-right,
• mid-left, mid-center, mid-right,
• bottom-left, bottom-center, bottom-right.

Zoom Levels

• https://photoswipe.com/adjusting-zoom-level/#supported-values : fit and fill , which are axis agnostic.
• I propose to add the zoom values fill-width and fill-height with which you can work axis-specific.

Use Case: Presenting screenshot series from a responsive + international app

Given:

• Different width per each device class in the screenshot series
• Possibly different heights per each device class, in case of full page length screenshots (longer than viewport) with different content lengths.
• App which can be LTR or RTL, so the content anchor point may be either top-left or top-right.

Full control with the new parameters:

• If I had the 9 different alignment options and using zoom level 1(=100% = 1 image pixel fills 1 CSS pixel) I could achieve that the screenshots, even if differently sized align perfectly.
  • The viewer can much more easily visually track UI/content elements on the different device classes, when jumping between their screenshots.
• And for the simpler use case of having same width screenshots but with different height, then I would choose fill-width and alignment top-center.
  • This would guarantee that the app-header is always top-aligned, regardless how long the different screenshots in the series may be.

[porg]

I see you added a "Suggestion" label. How do you like the idea?

[dimsemenov]

It would be nice to have alignment options. You can already partly do that via API, but it's not documented well yet. Not sure about named align options like "mid-left", maybe it should be just two separate options (like horizontal and vertical alignment).

[porg]

Not sure about named align options like "mid-left", maybe it should be just two separate options (like horizontal and vertical alignment).

After giving it some thought, the ideal way would be to offer 3 variables: alignment-x (horizontal, 3 possible values), alignment-y (vertical, 3 possible values), alignment (a shorthand to the first 2 variables, 9 possible values):

1. When I gave it a first thought, I assumed that for setting up the defaults of passing a variable in initialization, having only 1 variable may simplify things, instead of needing to take care of 2.
2. But I soon realized that in the case of overriding the default at one Lightbox instance, splitting these values on two variables increases flexibility: One could override only one particular axis and leave the other axis as-is with its inherited values from the defaults.
3. CSS very often has single attributes (e.g. margin-left, margin-right, …) but alternatively makes them accessible as combined attributes, as a shorthand to the single attributes (e.g. margin). So in that spirit it would be ideal to offer the combined value variable align in addition to the single value variables align-x and align-y.

It would be nice to have alignment options.

Can I take this as a statement of yours, that you want to implement this, when your time allows? (Would love that ofc)

You can already partly do that via API, but it's not documented well yet.

Until the feature makes it into the library, how can a software like the Wordpress plugin Lightbox with PhotoSwipe, which implements your library, make use your forementioned alignment options? I plan to use that plugin.

[porg]

Hi @arnowelzel,

• I'm reaching out to you, as the main PhotoSwipe team likely has no/little time for development in these times, and every sane person will understand why.
• I planned to use your Wordpress plugin Lightbox with Photoswipe for screenshots / screendesigns / mockups.
• For meaningfully presenting this image type I would need more zoom level and alignment options as proposed above.
• What do you think of these options?
  • If you think these options would be a worthy addition, could you maybe look into the API, to find the undocumented functions which according to @dimsemenov 's comment above could make this possible?
  • And find a way to make these options accessible to users of the Wordpress plugin and/or the Lightbox JS lib?

I'd very much appreciate any kind of feedback! Thank you!

[arnowelzel]

I agree that it might be useful to have more control about how images will be opened and zoomed. However since I work in a full time job my time is quite limited these times. I won't be able to do any substantial work either for the next 1-2 months, sorry.

Other things to consider:

The "dynamic caption plugin" also alters the way how images are opened (example: https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe-5/) So this to be taken into account as well when offering such options. I am not sure yet how the caption plugin may affect additional alignment/zoom options or vice versa.