How to import images from remote content (Headless) | Astro Lounge | Page 1

hybrid bluff Nov 10, 2022, 12:48 PM

#

Is there a way using Astro to get content from a remote as headless to have images included in the imported content imported locally ? Thanks.

pulsar locust Nov 10, 2022, 1:49 PM

#

Using the image component you can achieve this

hybrid bluff Nov 10, 2022, 1:56 PM

#

Can you give me an example ?

#

If get a remote content (page content from WP with images) how can I import the images included in this content ?

pulsar locust Nov 10, 2022, 2:07 PM

#

Do you have access to an image url?

#

Using the <@&1026769514878205992>/image integration with that url should include it locally and optimize the image

hybrid bluff Nov 10, 2022, 2:10 PM

#

no I only get content from wordpress via graphql

#

don't know what is inside

#

I need to check if image in this content and have them then imported

heavy glacier Nov 10, 2022, 3:46 PM

#

Hey @hybrid bluff you can find out more infor about what our good friend @pulsar locust was saying with the astro image integration
https://docs.astro.build/en/guides/integrations-guide/image/#remote-images

Astro Documentation

@astrojs/image

Learn how to use the @astrojs/image integration in your Astro project.

#

If you have the url of the end point then you just pass that in as the <Image src={urlForWPImg} aspectRation="16:9"/>

hybrid bluff Nov 11, 2022, 1:58 PM

#

No I mean how to extract from a content coming from a WP page

#

I get the content without knowing what is inside

#

if any image in how to convert and import it ?

finite pine Nov 11, 2022, 4:00 PM

#

Are you trying to literally import the actual webpage HTML into Astro as opposed to using the Wordpress headless API. You should be fetching your data with the API which will return JSON to your Astro project. In the JSON should see URL(s) to your Wordpress image(s). It's that URL that you feed to the Astro Image plugin and it will download it for you, optimize it and store it locally.

dusty idol Nov 12, 2022, 5:28 PM

#

@hybrid bluff are you talking about inline images within the WP's content block, either within the classic tinymce editor or gutenberg editor? If so, I imagine this content needs to be structured with JS first. Unfortunately, this will take extra work to do.
Otherwise, If you're referring to WP's featured image, that's pretty simple since it's a standalone object and already structured. Therefore, easy to use with Astro's image component. Your component will end up looking something like this within your astro component or file based on posts:

<Image src={post.featuredImage?.node.mediaItemUrl} alt={post.altText ? node?.altText : post.title} width={post.featuredImage.node.mediaDetails.width} height={post.featuredImage.node.mediaDetails.height} />

Make sure you query for these fields on the posts type:

posts {
featuredImage {
  node {
    mediaItemUrl
    altText
    mediaDetails {
      sizes {
        height
        width
        sourceUrl
       }
    }
  }
}
}

#How to import images from remote content (Headless)