Use images with relative paths in social cards (Twitter / OpenGraph / ArticleCard component)

[TysonMN]

I want to use a square image as a hero image. Something with a side length of about 600px. However, it doesn't work very well now. The Hero component enlarges the provided image until the width matches the width of the browser window. I would prefer if the image is left at its original size and is instead horizontally centered. However, if the image were too large, then I think I would want the image shrunk to fit though. I don't think I ever want an image to be made larger.

Every hero image I have seen @loreanvictor use comes from unsplash, which includes an API for specifying what size the image should be. See this for an example. This has put the image-sizing burden on unsplash, so the Hero component hasn't needed to deal with images that are not perfectly sized.

Can the Hero component center the image given to it instead of enlarging it?

If you want to keep the current behavior, can options be added to the Hero component to support both the current behavior and the behavior like I want?

[loreanvictor]

seems like a good addition, at least as an option (though a default behavior supporting all current use cases might also be possible, in which case it would obviously be preferable).

just a quick question though: why don't you use a normal image instead? the main point of a hero image is having an image that is expanded beyond the normal content container, which is not what you want. in other words: which features of hero images do you miss on normal images for this particular use case?

[TysonMN]

The hero image is also used as the image for an article card.

I could put this 600px square image in the body of the post, but I also want it to be the image for the article card.

Maybe if there is no hero image, then the article card can use the first image in the body of the post.

[loreanvictor]

As can be seen here, the ArticleCard component should pick up images picked as social graph images. As it seems from this, normal images with absolute URLs.

This leaves images with relative URLs. In that case, I suspect one could simply add the target base URL of the blog in the config, similar to how RSS is configured. In fact, since RSS also requires this base URL, it could be provided on a level higher than that of the RSS configuration and the RSS post-processor could simply read and utilize that config as well. In other words, with this change we would enable using relatively addressed images both for ArticleCards and social cards / previews.

@TysonMN if that satisfies what you need for the outlined use-case, I will change the title of the issue so that it reflects the intended broader change.

[TysonMN]

I don't completely follow, but it sounds like a good idea. You can change the title and make the change you describe. Then I could create another issue if I am still having a problem.

This leaves images with relative URLs.

When testing, I wasn't able to link to a certain image with an absolute URL. The request to obtain the image was blocked by Google Chrome because of Cross-Origin Read Blocking (CORB). I don't know why that image was blocked but images from unsplash are allowed.

[loreanvictor]

I don't completely follow, but it sounds like a good idea. You can change the title and make the change you describe. Then I could create another issue if I am still having a problem.

Basically, I would make changes that would allow images with relative paths to be used for social cards (Twitter / Open Graph). This means you could use a normal image for this use case instead of a hero image, and it would still be picked up by ArticleCard component.

This leaves images with relative URLs.

When testing, I wasn't able to link to a certain image with an absolute URL. The request to obtain the image was blocked by Google Chrome because of Cross-Origin Read Blocking (CORB). I don't know why that image was blocked but images from unsplash are allowed.

That depends on the source of the image. The source should allow cross origin requests, and unsplash does (for example I am not sure if coding.blog does, which means you couldn't get the images locally but would be able to get them when published since then you would be on the same origin).

[TysonMN]

Basically, I would make changes that would allow images with relative paths to be used for social cards (Twitter / Open Graph). This means you could use a normal image for this use case instead of a hero image, and it would still be picked up by ArticleCard component.

Yes, that is my understanding. I don't completely follow how you are going to do that, but I don't I need to know either. I am confident that you know what you are doing :)

The source should allow cross origin requests, and unsplash does...

Oh, I didn't know that. Thanks for telling me.

[loreanvictor]

I don't completely follow how you are going to do that, but I don't I need to know either. I am confident that you know what you are doing :)

Quite simple actually: with a config value determining the absolute base URL to use, similar to how the RSS post-processor figures out absolute URL of an article from the relative paths that go through a post-processor.

[TysonMN]

FYI: this is the issue that I am most eager to see fixed. I have a blog post done, but I really want the first image in the article to be used when I share a link to the post on Twitter and Facebook.

[loreanvictor]

Makes sense, will prioritize this.