VPP is not working

[sameergalhotra]

I am using latest 7.11 umbraco and configured S3 provider with all given steps. Images have been stored in S3 bucket successfully and show thumbnails in backoffice but its not rendering on page from CDN path its still shows local path i.e. " /media/1001/a.jpg" It should be "http://abc.com/media/1001/a.jpg".

If I use database option by making entry in hostname it works fine, but that is not the ideal solution.

kindly help

[PhilA1]

It should show local path as "/media/1001/a.jpg" but the server should be going directly back to S3 for anything in that folder.

If you want to use a cloudfront CDN url as we did, you will need to have a helper wrapper to transform the path. EG: src=getCdnPath("/media/1001/a.jpg")

[sameergalhotra]

Thanks for replying,

But my issue is that image is not rendering on page because it have local path in src and image is uploaded on S3

I assume to render image from S3 it should have complete path in src of image

[PhilA1]

no mate, you should not see the fully rendered S3 path. src="/media/.." is mapped on the server using the filesystemproviders config (so media sources point to your S3 bucket) so it shouldnt be a problem. have you configured the FileSystemProviders.config AND the config/imageprocessor/security.config files?

[sameergalhotra]

Yes, I have done those configuration but it's not working

[sameergalhotra]

I have found the issue it only render image when src have width or height in query string.

Thanks for your help

[sameergalhotra]

@PhilA1 As I have mentioned earlier It's rendering images from S3 and have relative path, but I am confused, Is it rendering images directly from cloundfront or request first go to my server and then VPP is getting it to cloudfront URL? If yes then in that case it will always get image from nearest CDN server of my webserver not from user's nearest CDN server.

You have mentioned one helper for cloudfront (getCdnPath("/media/1001/a.jpg").

can you send me that?

[PhilA1]

Let me clarify, this package does not have anything to do with cloudfront (a CDN), it only uses S3 (cloud storage).

By default your images will always have a relative path "/media/1001/a.jpg". The server will attempt to load the image in the server's "media" folder. BUT, the fileSystemProviders config has "mapped" the media folder to S3, aka "media" folder=S3. Summary: By default your images are showing relative paths in the markup, but are being pulled from an S3 bucket.

Now, if you wish to boost performance you can use cloudfront as a CDN. Go into AWS and create a cloudfront distribution pointing to your S3 bucket. Now you need to write you own helper class to fully qualify your markup urls.

Helper attached. cdnHelper.txt Usage: <img src="@MediaHelper.CdnUrl("/media/1001/a.jpg")">

Hope this helps

[sameergalhotra]

Thanks Phil for your response

I have already done cloudfront configuration

Will use this helper and render absolute path or alternatively make property on root level and use it as suffix in img src

Thanks for time really appreciated :)

[saifobeidat]

Hi @PhilA1, since you are rendering images by that helper which means using direct CDN links (ex: http://d1crpqaf24u8yp.cloudfront.net/media/k21e3gyz/02-11_20-09-55.jpg), Okay, then how will you use ImageProcessing features like: width & height?

[PhilA1]

I'm guessing we don't. We style to fit the image per device but we will be using the full image sent to the device. We are careful about the size and quality we upload.

[saifobeidat]

@PhilA1 , okay, the idea from that is to generate thumbnails so we can boost the website speed. do you think the CloudFront is enough for this purpose ?

[PhilA1]

Cloudfront is a cdn, to move the images closer to your users, and so that each user isnt loading the image from the same resource and hindering performance. All I can say is it works for us. Other options are CloudFlare cdn.