responsive images using image cropper umbraco 714 - Templates and document types

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Mark Bro 15 posts 86 karma points

Jul 24, 2014 @ 00:57
0

Responsive images using Image Cropper & Umbraco 7.1.4
Hi guys,

I have been working through the following article to implement responsive images using image cropper, slimmage on U7.1.4

Responsive images using U7.1.4

Everything has been working well and I am able to crop the images as shown in step 5, however when I add the noscript data-slimmage and /noscript tags my image disappears.
```
<a href="@Umbraco.Media(item.image).Url" title="@item.imageDescription">
            <noscript data-slimmage>
            <img src="@Umbraco.TypedMedia((int)item.Image).GetCropUrl(width:152, height: 152, ratioMode:ImageCropRatioMode.Height, 
        furtherOptions:"&slimmage=true")" alt="@item.Name"/> 
            </noscript>
        </a>
```
I have noticed that the data-slimmage is blank and the data-img-src is not defined as in the article's example in step 8.

Any thoughts on what the cause is?

Also, is there a way to specify the width and height as property values on the GetCropUrl?

thanks.
Copy Link
Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib

Jul 24, 2014 @ 09:21

0

Hi Mark,

I'm guessing you are not using SlimResponse hence why you are generating the noscript tags yourself?

The reason the images are disappearing is probably that you haven't added slimmage.js to your template yet?

I go through this tutorial in detail in this video that might help you work out your issues and also show you how to specify width and height.

Jeavon

Copy Link
Mark Bro 15 posts 86 karma points

Jul 24, 2014 @ 20:56

0

Thanks for the quick response Jeavon.

Yes you are correct, I am adding the tags manually rather than using SlimResponse. Interestingly enough I have included the slimmage.js to my template but will investigate further.

Just out of curiosity when using GetResponsiveImageUrl are you still able to pass in the furtheroptions to access the imageprocessor methods like you do using the GetGropUrl? Since I was unsure, that was the reason i didn't install the slimsy package.

Cheers,

Mark

Copy Link
Mark Bro 15 posts 86 karma points

Jul 25, 2014 @ 01:32

0

Hi Jeavon,

You were right!, I had an issue with the .js file. Now getting the data-img-src and true value.

I still have a problem when I add the noscript tags however. The image is displaying in it's maximum size and is still not responsive. I see the data-pixel-width="1760"> is the actual image size rather than the width of 270 I specified.

Is this an indication that slimmage isn't implemented correctly?

Copy Link
Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib

Jul 25, 2014 @ 08:30
0
Hi Mark,

No, you can't pass in furherOptions to Slimsy due to some issues with the way dynamics executes the methods but you can just add the variable at the end end e.g.
```
<img src="@GetResponsiveImageUrl(100,100)&filer=comic">
```
The fact the image is showing full width sounds like it might be working, do you have a % width on your image? You could try style="width:25%" to test

Remember it is likely that your image won't actually ever render at the 270 you specified as the size is calculated from the size that the CSS makes the img, the values you pass in are setting the ratio and the size that a visitor with no js would see

Jeavon
Copy Link
Mark Bro 15 posts 86 karma points

Jul 25, 2014 @ 21:09

1

Thanks for all your help Jeavon, think I'm beginning to understand how this all works.

Cheers,

Mark

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

Responsive images using Image Cropper & Umbraco 7.1.4