I thought it was nice to have a close button if an image was zoomed. I wanted to make sure the button does not overlap the image and at the same time display the image as large as possible. So it would have been nice to define a top margin of about 72px and side/bottom margins of 24px.
I saw that the margins were calculated after I posted this, so maybe an array approach would be fitting, leaving out other units and auto:
Int/Array single item: (24, ) => margin: 24px;
Array, two items: ([24, 50]) => margin: 24px 50px;
Array, three items: ([1,2,3]) => margin: 1px 2px 3px 2px;
Array, four items: ([1,2,3,4]) => margin: 1px 2px 3px 4px;
Making it a string or an array is basically the same, so a string would be more CSS-ish. My concern was more about em and rem units.
Anyway, the whole point of the library is to stick to Medium's design. I don't think this use case is enough for me to implement this feature for now, sorry! If you have time though, feel free to give it a try. I could review the API design and guide you through it.
Hi @tuelsch! I've been thinking about your issue and started seeing it as a much higher level today. I think I'm onto something.
I don't think your problem is about margins, it's about templating. You'd essentially like to not only render the image, but some components alongside it.
I thought about using a container option that you would pass to mediumZoom. This container would be a template element that you can feed with your needs. It's up to you to style it - you could do whatever you want really. The image zooms and fits to the [data-zoom-container] element.
This takes the idea a lot further than I originally thought - which is absolutely great. Thank you for your very good work! Having templates and containers allows for a lot more flexibility and in my opinion is more future proof. I'd try to put some work into the library for the next time I see an opportunity.