|Number of votes:||2|
This is the second part of a four part series that started with EPiImage Part 1: EPiImageResizer
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 :-)
The EPiImage Property is very similar to the built in “URL to image” property, but adds the following features:
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.
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”:
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
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:
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" />
You certainly can. Simply change their property type to EPiImage. The existing image urls will be preserved.
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.