feat: add heroImage support to blog posts #8
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Currently has two bugs:
For the image to work with
meta
tags, it needs to live inpublic
.And/or, for it to work with Markdown, it needs to live in
public
. Itried 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 anaspectRatio
, which means we would need to make all blog posts haveheroImages 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.
The
Picture
component always adds aheight
attribute to therendered 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 somethingcorresponding to the (hypothetical)
width
attribute. Since actualwidth 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!