getting started with image processor

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

Christian Koch 20 posts 90 karma points

Feb 24, 2017 @ 16:05
0

Getting started with Image Processor
I am trying to get started with Image Processor and having problems.

In my template, I add this line
```
<img src='@Umbraco.Media(CurrentPage.picture).Url?blur=10,sigma-1.5,threshold-10'>
```
The HTML ouptput is this
```
<img src="/media/1009/filename.png?blur=10,sigma-1.5,threshold-10">
```
In the Browser the image is rendered as missing file. I I delete "?blur=10,sigma-1.5,threshold-10'>" everything is fine.

What am I doing wrong?
Copy Link
Nik 1612 posts 7258 karma points MVP 7x c-trib

Feb 24, 2017 @ 17:05
0
Hi Christian,

There a couple of things that jump out with Image Processor, especially if you using the latest version. The first question is, have you enabled the "blur" function in the config file?

This can be done by adding enabled="true" to the gaussianBlur plugin element, as shown below.
```
<plugin name="GaussianBlur" type="ImageProcessor.Web.Processors.GaussianBlur, ImageProcessor.Web"  enabled="true">
```
The help link (link below) also indicates that using the , separator is legacy and you should be using the & instead.

Help file for blur

Hope that helps,

Nik
Copy Link
Christian Koch 20 posts 90 karma points

Feb 25, 2017 @ 12:48

0

Hi Nik,

thanx!

Where can I find this file?

Do you know which functions are enabled by default?

Copy Link
Nik 1612 posts 7258 karma points MVP 7x c-trib

Feb 25, 2017 @ 13:02

0

Hi Christian,

The file is located in the Configs folder, in a sub folder called "imageprocessor".

Off the top of my head no, I'm not sure which are enabled by default however if you check the file you'll be able to see.

This change was (I believe) to address a potential security concern where an attacker could potentially abuse the end points.

Nik

Copy Link
Christian Koch 20 posts 90 karma points

Feb 25, 2017 @ 13:01
0
Found the comfiguration :-). It works!

Now I tried the functin resize with
```
<img src='@Umbraco.Media(CurrentPage.picture).Url?width=200'>
```
The HTML ouptput is this
```
<img src="/media/1009/filename.png?width=200">
```
In the Browser the image is rendered as missing file.

Can you help?
Copy Link
Nik 1612 posts 7258 karma points MVP 7x c-trib

Feb 25, 2017 @ 13:05

0

From the looks of the url structure it looks correct. Nothing stands out as being wrong I'm afraid.

Are there any errors in the debug console in your browser?

Copy Link

Christian Koch 20 posts 90 karma points

Feb 25, 2017 @ 13:10

http://localhost:50919/media/1009/filename.png?width=100%3E%20…20%20%20%20%20%20%20%3Ca%20href=%22#top" class="c1-bg c5-text" onclick="$( Failed to load resource: the server responded with a status of 414 (Request-URI Too Long)

Here you can find the output! Strange somehow.

Copy Link

Nik 1612 posts 7258 karma points MVP 7x c-trib

Feb 25, 2017 @ 13:24

0

Can you share the entire code for the view that this is generated on? It looks like something is combining your src attribute with your href attribute.

Copy Link

Christian Koch 20 posts 90 karma points

Feb 25, 2017 @ 13:29

This is the code of the partial view

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

  @Umbraco.Field("productName")

  @Umbraco.Field("picture")

   <img src='@Umbraco.Media(CurrentPage.picture).Url?width=100>

Copy Link

Paul Wright (suedeapple) 277 posts 704 karma points

Feb 25, 2017 @ 13:30

  <img src='@Umbraco.Media(CurrentPage.picture).Url?width=100>



  <img src="@Umbraco.Media(CurrentPage.picture).Url?width=100" />

Copy Link

Nik 1612 posts 7258 karma points MVP 7x c-trib

Feb 25, 2017 @ 13:31

0

As Paul has noted, you are missing the closing tag on the src attribute of your img tag.

Copy Link
Christian Koch 20 posts 90 karma points

Feb 25, 2017 @ 13:51

0

Works! Thanx!

Copy Link
Paul Wright (suedeapple) 277 posts 704 karma points

Feb 25, 2017 @ 13:59
0
You may want to do a bit more checking to see if the image is null or not...

and maybe use the Url method to spit out your ImageProc stuff. Avoids typos then :-)

Alt tag on the image too, for good SEO :-)
```
  @{
  IPublishedContent img = Umbraco.TypedMedia(Model.Content.GetPropertyValue<int>("picture"));

      if (img != null) {

            <img src="@Url.GetCropUrl(img,200)" alt="@img.Name" />
      }
}
```
Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?