Process (scale, resize) images for different devices/resolutions being served from azure cdn?
Hi,
I store my images in different containers on azure (they are not all located in am images container, for example).
When I retrieve an image, no matter what device I am on, it downloads the same image (size, etc).
I looked into imgix.net as to process the images in real time, but I was wondering if there was an umbraco package that I could use that when an image was requested from azure, it would serve the appropriate image (size, resolution, etc) depending on if it was a 4K screen, 2K screen, phone, tablet, etc.
If there is not an Umbraco package for this, are there services that others have had luck with?
Slimsy? I've created my own version because we're mostly using background images. The I just need to check the size of the container and put ?width=123&height=456 as the querystring on the media item.
Your point about the CDN though. If the CDN is setup to use blob storage as the source, then Umbraco doesn't get the chance to do the image resizing. It is better to use the website as the source. I wrote this last year.
All my images come from a CDN. I think one of the biggest issues I have is knowing what width and height to put on the query string depending on the device (phone, tablet, laptop, etc). Do you have any recommendations on this or does slimsy take care of this for you?
No Slimsy won't work for background images. The markdown obviously cocked up, on my previous message. I was saying that you can do your own version of Slimsy for background images. If you put a data-* attribute on your elements that need a background image, including the uncropped url, then using JQuery it is easy to flick through each of them. You then just need to get their height and width and put these in to the query string of the url.
Have you used any of these for the purposes I am talking about. All my images are stored on the CDN. I was looking at these packages before, but they seemed a bit complicated, so I wasn't too sure if I should take that path and if it would fit my needs.
Process (scale, resize) images for different devices/resolutions being served from azure cdn?
Hi,
I store my images in different containers on azure (they are not all located in am images container, for example).
When I retrieve an image, no matter what device I am on, it downloads the same image (size, etc).
I looked into imgix.net as to process the images in real time, but I was wondering if there was an umbraco package that I could use that when an image was requested from azure, it would serve the appropriate image (size, resolution, etc) depending on if it was a 4K screen, 2K screen, phone, tablet, etc.
If there is not an Umbraco package for this, are there services that others have had luck with?
Thanks, Saied
Slimsy? I've created my own version because we're mostly using background images. The I just need to check the size of the container and put ?width=123&height=456 as the querystring on the media item.
Your point about the CDN though. If the CDN is setup to use blob storage as the source, then Umbraco doesn't get the chance to do the image resizing. It is better to use the website as the source. I wrote this last year.
Hi David,
Would this work if my images weren't background images (I have some, but most are not). You can actually see them here http://stage.sctflash.com and http://stage.bullydog.com.
All my images come from a CDN. I think one of the biggest issues I have is knowing what width and height to put on the query string depending on the device (phone, tablet, laptop, etc). Do you have any recommendations on this or does slimsy take care of this for you?
Thanks for the help, Saied
No Slimsy won't work for background images. The markdown obviously cocked up, on my previous message. I was saying that you can do your own version of Slimsy for background images. If you put a data-* attribute on your elements that need a background image, including the uncropped url, then using JQuery it is easy to flick through each of them. You then just need to get their height and width and put these in to the query string of the url.
This other blog post of mine is on a slightly different topic, but the demo project does just this.
Have a look at this packages:
UmbracoFileSystemProvider.Azure
or
Azure CDN Toolkit
Andreas
Hi Andreas,
Have you used any of these for the purposes I am talking about. All my images are stored on the CDN. I was looking at these packages before, but they seemed a bit complicated, so I wasn't too sure if I should take that path and if it would fit my needs.
Thanks, Saied
is working on a reply...
This forum is in read-only mode while we transition to the new forum.
You can continue this topic on the new forum by tapping the "Continue discussion" link below.