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

feat: add heroImage support to blog posts #8

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Conversation

chadoh
Copy link
Contributor

@chadoh chadoh commented Sep 26, 2022

Currently has two bugs:

  1. For the image to work with meta tags, it needs to live in public.
    And/or, for it to work with Markdown, it needs to live in public. I
    tried using relative paths to no avail. I didn't see much info in the
    docs about including relative images from Markdown.

    Since it lives in public, it's treated as a remote image by the
    @astrojs/image plugin [1]. This means we need to include an
    aspectRatio, which means we would need to make all blog posts have
    heroImages with equal ratios. The first image I threw in here uses a
    nonsensical ratio, because I did not understand this limitation when
    I made it.

  2. The Picture component always adds a height attribute to the
    rendered element. The content has a max-width of about 800px, but I
    wanted to use a 1200px-wide image so it would look nicer on
    high-density displays. I'm not sure this is even optimized, but even
    if not, the resulting bug will still show up:

    The image ends up looking all squashed! The max-width of the image is
    the width of the content, while the height attribute sets something
    corresponding to the (hypothetical) width attribute. Since actual
    width is narrower than this 1200px, the height ends up mismatching.

    If there were a way to remove this attribute from the rendered
    element, it would look great!

@AhaLabs AhaLabs deleted a comment from github-actions bot Sep 26, 2022
Currently has two bugs:

1. For the image to work with `meta` tags, it needs to live in `public`.
   And/or, for it to work with Markdown, it needs to live in `public`. I
   tried using relative paths to no avail. I didn't see much info in the
   docs about including relative images from Markdown.

   Since it lives in `public`, it's treated as a _remote_ image by the
   `@astrojs/image` plugin [[1]]. This means we need to include an
   `aspectRatio`, which means we would need to make all blog posts have
   heroImages with equal ratios. The first image I threw in here uses a
   nonsensical ratio, because I did not understand this limitation when
   I made it.

2. The `Picture` component always adds a `height` attribute to the
   rendered element. The content has a max-width of about 800px, but I
   wanted to use a 1200px-wide image so it would look nicer on
   high-density displays. I'm not sure this is even optimized, but even
   if not, the resulting bug will still show up:

   The image ends up looking all squashed! The max-width of the image is
   the width of the content, while the `height` attribute sets something
   corresponding to the (hypothetical) `width` attribute. Since actual
   width is narrower than this `1200px`, the height ends up mismatching.

   If there were a way to remove this attribute from the rendered
   element, it would look great!

  [1]: https://docs.astro.build/en/guides/integrations-guide/image/#src-1
@chadoh
Copy link
Contributor Author

chadoh commented Sep 26, 2022

Looks like the second issue, which will make this usable, has been fixed by withastro/astro#4797. We can get this PR mergeable once it's released.

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.

1 participant