Views: 5690
Number of votes: 2
Average rating:

EPiImage Part 2: EPiImage Property

This is the second part of a four part series that started with EPiImage Part 1: EPiImageResizer

 

Point of confusion: EPiImageResizer is NOT EPiImage Property

Most people get this point wrong, so I thought I start this blog post by clearing this up: EPiImage Property is NOT EPiImageResizer. In other words: you can use the EPiImageResizer to resize any image, not only EPiImage Property images.The opposite is also true: You don’t need to use EPiImageResizer to display a EPiImage Property. You  get an image URL just like you would from the built in “URL to image” property.

That being said: EPiImage Property and EPiImageResizer works really well together :-)

 

EPiImage Property

The EPiImage Property is very similar to the built in “URL to image” property, but adds the following features:

  1. Thumbnail preview of the selected image, not just a meaningless url
  2. Click the “i” button to preview the image and add an image description

 

image

This is what the EPiImage Property looks like in edit mode if no image is selected. If clicked the normal file selection dialog box is opened.

 

Once an image is selected a small thumbnail is shown.

 

If you click the “i” button you will see a bigger preview of the image and you have the possibility to add a description.

 

How do I start using it?

Simply download the module from EPiCode and install it using EPiServer Deployment Center. (It just copies in a few files, it doesn’t touch your web.config or require a rebuild)

You will now get a new property type called “EPiImage”:

image

 

How do I access the property value?

The easiest is just using the string value:

<%= CurrentPage["MyEPiImageProperty"] %>

If you have added an image description it will be added as a query string: /globals/MyImage.jpg?alt=mydescription

To get access to the image url and description separately, cast the property to  a EPiImageProperty. You can then access the variables ImageUrl and ImageDescription.

<%= (CurrentPage.Property["MyEPiImageProperty"] as 
MakingWaves.EPiImage.EPiImageProperty).ImageUrl %> <%= (CurrentPage.Property["MyEPiImageProperty"] as
MakingWaves.EPiImage.EPiImageProperty).ImageDescription %>

You can also use it as a normal EPiServer property.

<EPiServer:Property PropertyName="MyEPiImageProperty" runat="server" />

This will render a img tag with an alt text if you have added a image description.

You can also get an automatically resized version of the image by specifying width, height and transformation:

<EPiServer:Property PropertyName="MyEPiImageProperty" 
Width="200"
Height="200"
Transformation="ScaleToFit"
runat="server" />

 

EPiImage Property and EPiImageResizer

To use an EPiImage Property with the EPiImageResizer user control simply specify the PropertyName of a EPiImage Property.

<EPiImage:EPiImageResizer PropertyName="MyEPiImageProperty"
                          Width="150" 
                          Height="150" 
                          Transformation="ScaleToFit" 
                          LinkURL="http://www.google.com"
                          runat="server" />

 

Can I convert my existing “URL to image” properties to EPiImage Property?

You certainly can. Simply change their property type to EPiImage. The existing image urls will be preserved.

 

Have feedback? Want to help out?

Feel free to email or twitter me with your feedback: @ahaneng :-) Also if you like to help out with debugging/testing let me know.

Thank you to Making Waves for donating it to EpiCode!

 

Next post: EPiImageGallery Property.

Sep 20, 2010

Andreas Thente
(By Andreas Thente, 9/21/2010 12:33:37 PM)

Look verys good Alexander.

One thing me and my customers often miss is the possibility to add language specific descriptions to an image. To work with this module on a globalized site would be a great step forward for a lot of us out here :)
I guess it wouldn´t be to difficult to wrap it in a custom property with this functionality though.

fredrik.stolpe
(By fredrik.stolpe, 12/6/2010 3:38:23 PM)

Agree, I like this one a lot! Globalization support is the tricky part though, you want the image to be common for all languages, but the alt text to differ. Guess you could store them in the image property as ?alt-en=xxx&alt-sv=yyy and render edit fields according to the active languages. But maybe then it's becoming a bit cluttry.

Rodolphe Toots
(By Rodolphe Toots, 1/12/2011 11:16:07 AM)

thank you for a very nice control!
But there is a problem with using it when the folder name and/or filename contains swedish chars like å, ä or ö.
Server.UrlDecode seems to solve that for me...

alexander
(By alexander, 1/12/2011 4:19:36 PM)

Rodolphe: Is that for a EPiImageProperty or EPiImageGalleryProperty?
Working on 2.0 of EPiImage that will include bugfixes.

Rodolphe Toots
(By Rodolphe Toots, 3/28/2011 3:44:07 PM)

sorry for late answer, but it is for EPiImageProperty

jon pye
(By jon pye, 3/1/2012 1:10:40 AM)

Hi Alexander,

thank you for a comprehensive image gallery control by the way! Is there any way I can amend the EPiImageGalleryPropertyEditMode.js to include additional fields? (so that I have description, a url, and text to display for the url)

Thanks

Please login to comment.