Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ability to customise aspect ratio #18

Open
wants to merge 8 commits into
base: main
Choose a base branch
from

Conversation

maxelkins
Copy link

@maxelkins maxelkins commented Mar 6, 2024

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
Copy link
Member

muan commented Mar 6, 2024

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
Copy link
Member

muan commented Mar 6, 2024

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
Copy link
Author

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

Screenshot 2024-03-07 at 11 43 54
Screenshot 2024-03-07 at 11 44 14

16:9

Screenshot 2024-03-07 at 11 44 35
Screenshot 2024-03-07 at 11 44 25

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
Copy link
Member

muan commented Oct 30, 2024

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

@maxelkins
Copy link
Author

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 🙌

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants