I tried my best but can't figure out how to set up slimsy. I followed the documentation on the project page and did the following:
Installed slimsy package (for Umbraco 7.2.x)
Added the script to the head-section of my master template
Added a media picker to my document type
Used var featureImage = Umbraco.Media(@CurrentPage.Site().mediaPicker);
to get the media file
tried to render the image with the following img-tag <img src="@featureImage.GetResponsiveImageUrl(150, 150)" alt="asd" />
Got a huge image with 100% width/height (1920x1920) on my page: <img alt="asd" data-src="/media/1050/some_img_small.png?mode=pad&quality=90&width=150&heightratio=1&format=jpg&slimmage=true&rnd=130929997860000000" data-slimmage="true" src="/media/1050/kaun_small.png?mode=pad&quality=90&width=1920&heightratio=1&format=jpg&slimmage=true&rnd=130929997860000000" data-pixel-width="1920">
I believe you need to have a css width:100%; on the div.
The idea being that Slimsy serves a "lighther" image into the already sized div. Or if you have a 100% width div, width 50% will serve at half, but will serve an image of half the pixels, saving load time.
That is my interpretation, but will be happy to find out if it's not correct.
Problem setting up slimsy
Hey,
I tried my best but can't figure out how to set up slimsy. I followed the documentation on the project page and did the following:
var featureImage = Umbraco.Media(@CurrentPage.Site().mediaPicker);to get the media file<img src="@featureImage.GetResponsiveImageUrl(150, 150)" alt="asd" /><img alt="asd" data-src="/media/1050/some_img_small.png?mode=pad&quality=90&width=150&heightratio=1&format=jpg&slimmage=true&rnd=130929997860000000" data-slimmage="true" src="/media/1050/kaun_small.png?mode=pad&quality=90&width=1920&heightratio=1&format=jpg&slimmage=true&rnd=130929997860000000" data-pixel-width="1920">Can someone point out what my error is?
Thanks,
Chris
Hi Chris
I believe you need to have a css width:100%; on the div.
The idea being that Slimsy serves a "lighther" image into the already sized div. Or if you have a 100% width div, width 50% will serve at half, but will serve an image of half the pixels, saving load time.
That is my interpretation, but will be happy to find out if it's not correct.
Regards
Gary
Absolutely correct Gary!
There is detailed information about Slimmage (which is the JS element of Slimsy) available here
is working on a reply...