Fetching first blog-post image w/ Nuxt

Technologies Nuxt.js
#1

Hi there! There is probably a simple solution to this, but I am having trouble figuring which query to use within prismic api…

I am creating a site for a client and I tend to start out with the Prismic/Nuxt Blog repo and go from there which works great… My client wants the first primary image to be display with each corresponding blog post (first image on each post). I notice there is a straightforward “get first paragraph” method function:

getFirstParagraph (post) {
      const textLimit = 300
      const slices = post.data.body
      let firstParagraph = ''
      let haveFirstParagraph = false

      slices.map(function (slice) {
        if (!haveFirstParagraph && slice.slice_type === 'text') {
          slice.primary.text.forEach(function (block) {
            if (block.type === 'paragraph' && !haveFirstParagraph) {
              firstParagraph += block.text
              haveFirstParagraph = true
            }
          })
        }
      })
    }
  }
}

I want to get the first image along with the first paragraph as well…

I am just a bit confused on how use a <pismic-image> within a widget and query the first image of each post. Would a function similar to this be ideal or is there a smarter approach? (lol sorry I normally have images in a for-loop on there on pages i.e work or blog page, not in widgets displayed on the home page, which is why I am a bit stumped on this one). Any guidance/code suggestions on this would be really helpful:)

Maybe I am just doing this wrong and should not create a widget for this too… Any suggestions would be great!

#2

Hi @rylanharper, you should be able to create a simple function that will return the first image. I haven’t tested this, but I think something like the following should work to retrieve the first image:

getFirstImage (post) {
  const slices = post.data.body
  const firstImageSlice = slices.find((slice) => slice.slice_type === 'image_with_caption')
  return firstImageSlice.primary.image
  }
}

This will return the image field from the first image slice. You should be able to input the image field returned from this function directly into a element.

Let me know if this works for you!

#3

Hey Levi!

Ah okay got it! Yes I was using the wrong query and not grabbing the correct slice name…simple mistake, but I missed it haha… It is working now, but the only issue that I am running into is that the function returns the image in json format instead of the image itself:

{
  "dimensions": {
    "width": 1200,
    "height": 767
  },
  "alt": "An image by Rylan Harper",
  "copyright": null,
  "url": "https://images.prismic.io/nuxt-prismic-starter/e9a94644-f76e-4ff2-88c4-6131068b2501_gw+%E2%80%93+17.png?auto=compress,format&rect=0,0,1439,920&w=1200&h=767"
}

Does it need to be a block type in order to display correctly?

#4

@rylanharper, I believe that this is what you need if you’re using the <prismic-image> component. Otherwise you can use the url in an element.

#5

@levi Hmm I am still having trouble with it displaying correctly…It still comes out as json in my html. I’d rather not have to post the url in an element either… I am still a bit confused on how to display the image in a block type (unfamiliar with that area of the api) so that it displays as the image itself.

Any idea on a workaround for this?

#6

@rylanharper I think I’ll need to take a closer look at things. Can you send me your project files so that I can look into this? You can either send me a zip file or a link to github, whichever is easier for you. And if you don’t want to share it publicly, you can DM me.

#7

Hey @levi

I got it working! It was a mistake I made and forgot to close out my <prismic-image> tag… :upside_down_face: I am sorry I wasted your time on a simple mistake! Everything is working correctly now and the function you provided is just what I needed :+1:t2:

#8

No worries, we’ve all been there before :slightly_smiling_face:

I’m glad that you’ve got everything working now!

#9

@levi
I’ll piggyback on this post since I have a similar issue.
My goal is to get the first image of a blog post (not using slices).

To display the first picture I am using <prismic-image> like this:
<prismic-image :field="getFirstImage(post.data.content)" />

My method finds the first image:

getFirstImage(content) {
      const firstImage = content.find((section) => section.type === 'image');
      return firstImage;
    }

It does return this object (not displaying the real url here):

 { "type": "image",
  "url": "https://images.prismic.io/...etcetc",
  "alt": "Alt text",
  "copyright": null,
  "dimensions": { "width": 1276, "height": 1024 }
}

Problem I’m having is that I get an error when trying to display it properly with <prismic-image>. The whole object just gets undefined.
Cannot read property 'url' of undefined

Any idea what the problem could be?

#10

Hi @juliandreas, I tested this and was getting the same error on pages where I didn’t have any images in the “content” field. But it was working as you show if they did.

To ensure you don’t crash the site on pages that don’t have any images in the “content” field, you just need to add a check that there is an image returned in the first place:

 <prismic-image
  v-if="getFirstImage(post.data.content)"
  :field="getFirstImage(post.data.content)"
/>

This worked for me!

1 Like
#11

@levi Awesome, this worked. Thanks for the quick reply!