Add recipe for using getImage() and creating custom component

[jdwilkin4]

Description (required)

This PR is responsible for creating a recipe for how to use the getImage function in a custom picture component.
I have linked to the new recipe in the Generating images with getImage() section of the images guide

I am participating in hacktoberfest. Please add the hacktoberfest-accepted if this issue is accepted. Thank you 👍

Related issues & labels (optional)

• Closes [content idea] Add recipe for using getImage() helper to create your own Picture component, or use scrset etc. #4389
• Suggested label: recipe

Links to pages changed

• https://deploy-preview-5042--astro-docs-2.netlify.app/en/guides/images/#generating-images-with-getimage
• https://deploy-preview-5042--astro-docs-2.netlify.app/en/recipes/getimage/

[netlify]

✅ Deploy Preview for astro-docs-2 ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	0ecd246
🔍 Latest deploy log	https://app.netlify.com/sites/astro-docs-2/deploys/6532b17f1ae1de000809df4b
😎 Deploy Preview	https://deploy-preview-5042--astro-docs-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[sarah11918]

Thank you for jumping on this issue, @jdwilkin4 ! 🙌

As luck would have it, Astro is finally releasing its own experimental Picture component and srcset support tomorrow! But, the example you've shown here with using getImage() isn't actually something that this component of ours will support at this point!

So, I think this could be a great addition if we can frame it as something more than "creating a Picture component" (because tomorrow, we'll have an implementation of that), but maybe referring specifically to the media query/art direction aspect of it, since ours will not support that? Right now, it's a perfectly functional recipe, but it's lacking a bit of a "story" around it that it could use now that we have a Picture component. I think this works if we make it clear that it's even going beyond the existing Picture component, and that getImage() can be used to do whatever you want!

It might be useful to look at the PR we have that will be released tomorrow, showing what our Picture component will do (and, you'll see that it won't support setting a media attribute) so that you can frame this as specifically using getImage() to go beyond what the existing <Image /> and <Picture /> components do: #4866

And, I also wanted to point out that we have a <RecipeLinks/> component in docs for linking to related recipes, with our little Chef Houston emoji. So when we do link to it, we can use something a little fancier than a plain text link!

So take a look at the Picture component coming out, what it will/won't do, and see if you can add some "when/why would I use this?" context to this recipe. Also, we shouldn't title the file getImage because that's a specific API function and it could be confusing for people looking up the function for reference. A more descriptive file name is fine, based on the "thing this demonstrates achieving" from whatever story you end up telling. Notice how some of the others are e.g. build-forms, call-endponts, and reading-time.

And I can see Erika has left some technical suggestions, so I'll let you address those and then think about the story you want to tell around this!

Let me know if you have any questions, but I think using the media attribute and having this recipe is a nice addition here.

[jdwilkin4]

Hi @sarah11918 !

Thank you for your comment and notes.
I will take a look at the new picture component and see how I can update my PR 👍

[jdwilkin4]

Hi @sarah11918 !

I have updated the recipe 👍

[sarah11918]

Hey @jdwilkin4 this looks great! I can really tell that you ran with the narrative concept successfully and that makes this super helpful and useful to people! 🙌

I left some editing suggestions with my thoughts as I went through it, so see what you think. Looking forward to having this as an official recipe in docs!

[sarah11918]

@jdwilkin4 Jessica, I am so happy with how this turned out, and I hope you are, too!

We really appreciate you seeing an issue you can tackle, and taking the initiative to contribute. I don't think we've had a new official recipe in a while, and this will be very helpful to our community. Thank you again!

[jdwilkin4]

The new recipe looks great 😀
Thank you for all of your help @sarah11918