Nice website TC, I was just wondering how do your get your cloudinary images to be displayed in this website..I have tried so many times but cannot find any way..did you an api ?

[theodorusclarence]

Nice website TC, I was just wondering how do your get your cloudinary images to be displayed in this website..I have tried so many times but cannot find any way..did you an api ?

Originally posted by @MedX101 in https://github.com/theodorusclarence/theodorusclarence.com/discussions/199#discussioncomment-8363388

[theodorusclarence]

If you're using my component, have you tried updating the cloudName?

https://github.com/theodorusclarence/theodorusclarence.com/blob/11186c266ce0862f0b38637d494a86c2632db80d/src/components/images/CloudinaryImg.tsx#L41-L64

One last thing to check to add cloudinary's domain in next config

[MedX101]

I am using your component..

I don't know which url do you use for banner images..(Where do you get or copy that url)..when I copy the image link it gives me full link not like yours below..

Like this :

This is how I have configured const link url :

And my cloudinary could name is infosnapzimages as displayed below.

I have been trying to get around this for three days now..I'm really stuck..any help will be appreciated theo..

[theodorusclarence]

try opening banner link with the banner value that you pass from mdx

if it don’t open up the image, that means you have the wrong url

it might be helpful to also copy your cloudinary link to image, and compare it with the BANNER_LINK variable

[MedX101]

How do you get this type of banner url you used here:

Pls bear with me, I'm beginner learning web development.

[theodorusclarence]

copy the image link in cloudinary, then get the name of the file from the end of link

[MedX101]

thanks for all the replies theo.. this is the only link i get :

https://res.cloudinary.com/infosnapzimages/image/upload/v1707215266/banner/photo-1707080181888-25efd661305e_wb53rx.jpg

but as you said i should only copy this "photo-1707080181888-25efd661305e_wb53rx.jpg"

but what i have noticed is that, there is this path "v1707215266" which might be causing an issue., and i have noticed that in all your banner links theres no ".jpg "

[theodorusclarence]

I'm pretty sure you can now change the BANNER_LINK to

const BANNER_LINK = `https://res.cloudinary.com/infosnapzimages/image/upload/f_auto,g_auto,c_fill,ar_4:5,w_1200/v1707215266/banner/${...}`

[MedX101]

"v1707215266" it keeps on changing on each picture.i dont know if this is cloudinary upgrade or what.. the values/path keeps on changing..

[MedX101]

for example this is another picture link https://res.cloudinary.com/infosnapzimages/image/upload/v1707215056/banner/photo-1682685797527-63b4e495938f_dv3p6d.jpg it has diffrent path which is "v1707215056"

[theodorusclarence]

Oh, i tried removing the v170... and it's still routes to the correct picture

https://res.cloudinary.com/infosnapzimages/image/upload/banner/photo-1707080181888-25efd661305e_wb53rx.jpg

you can completely remove the v... then

const BANNER_LINK = `https://res.cloudinary.com/infosnapzimages/image/upload/f_auto,g_auto,c_fill,ar_4:5,w_1200/banner/${...}`

and i have noticed that in all your banner links theres no ".jpg "

as for the .jpg you can interchangebly use or not use them, your preference. You can even directly convert to .png or .webp depending on what you need

[MedX101]

thanks theo. i got it working. i also noticed that i had to change blog/slug and blogCard.

i had to remove anything that was before /banner in publicId={........................./banner/${frontmatter.banner}}

once again thank you so much. i appriciate it.❤