Ability to customise aspect ratio

[maxelkins]

Customise aspect ratio

Intro

Hello! I think this project is really cool and I'm planning on using open stories on my new site :)

When exploring it I thought it would be nice to be able to have stories at different aspect ratios. I started messing around with this myself but I thought I'd share a PR and see if it's something you'd be interesting!

What's been added:

• Ability to customise dialog margin.
• Ability to customise dialog aspect ratio.
• Details on dev setup in readme.
• Details on margin and aspect ratio customisation in readme.
• Added examples to the demo.

Details:

• I've added these as CSS custom properties, but maybe they should be attributes?
• I've tweaked the way that the height is calculated on the dialog to allow for different sizes and account of the custom margin.
• I've tweaked the size of the arrows.

Other

• If you are able to share your formatting (prettier I assume) settings I can update the formatting.
• I'm a product design who likes to mess with code, so my code might not be the cleanest!

Look forward to hearing your thoughts!

[muan]

Hey, thanks for the contribution. However, as the aspect ratio was part of the spec, seen in https://github.com/dddddddddzzzz/OpenStories, the extra CSS styling IMO is out of the scope of this element.

However, (emailing this in bed) I'd assume after #13 1:1 images should already work; albeit might not be the prettiest. If this was more of a visual change to make them prettier, could you provide screenshot comparison?

And I would want to know if this isn't something the user of the element can already do via styling the Shadow Parts? If not I personally would prefer that we expose the Shadow Part rather than changing the source. (Again, I am saying this not knowing what visual differences were introduced).

[muan]

Another approach we can considering doing is https://github.com/dddddddddzzzz/open-heart-element?tab=readme-ov-file#styling, which ensures the default is basically default browser styling, and provide people with alternative style sheets.

[maxelkins]

Thanks for the feedback! Totally makes sense, I didn't realise that 9:16 was part of the spec.

Here are some example images anyhow:

1:1

16:9

Next

What you said about just using the shadow parts makes sense.

I think at the moment #images and the child img elements would need to be exposed to enable this customisation.

Exposing #images would also allow you to set the background colour when images are not the right aspect ratio like in (#13) and I supose exposing the img elements would allow you to change tweak how images at the wrong aspect ratio work (like letting you use object-fit: cover;) instead.

I'll mockup some ideas then share :)

[muan]

Hi! With the latest release the image (or video) element is now exposed via ::part(story). Let me know if that works!

[maxelkins]

Hi @muan! Thats awesome to hear :D Sorry I never got round to updating this, will give it a go when I get a chance 🙌