EPiImage

PROGRAM
17:30 Registrering, mat, drikke og mingling
18:15 Hands-on introduksjon til modulen EPiImage
[Alexander Haneng, Making Waves AS]
19:00 Pause
19:15 Experiences with EasySearch
[Tomas Mæsel, Making Waves AS]
20:00 Svarene på Quizen
20:10 Mingling

Alexander Haneng
• Leder faggruppen for EPiServer i Making Waves
med ca 15 utviklere
• Har jobbet med EPiServer på nettsteder som
LO.no, Sivilforsvaret.no, BBS.no (nå Nets),
Haavind.no, og Fotball.no (NFF)
• Står bak to moduler på EPiCode: LinkDetective
og EPiImage
29.01.2015© MAKING WAVES3
@ahaneng

29.01.2015 © MAKING WAVES 4
Hands on intro to EPiImage
Alexander Haneng

I wanted a standard light weight module to handle image resizing in my
EPiServer projects.
I wanted image handling in edit mode to be a little more editor friendly
by adding previews to ”URL to image” properties.
I wanted a better way to create image galleries in edit mode.
So why EPiImage?
ALEXANDER HANENG (TWITTER: @AHANENG)

EPiImage is a free, open source module for EPiServer CMS that solves
most basic image needs including image resizing and image gallery
functionality. It is available on EPiCode.
It consists of 4 parts:
• EPiImage Resizer (User Control)
• EPiImage Property
• EPiImageGallery Property
• EPiImageGallery Viewer (User Control)
What is EPiImage?

EPiImageResizer provides an out of the box automatic resize
functionality to EPiServer. There is nothing to configure (although you
can if you want) and it simply works. All resized images are stored in a
cache folder for performance, and the resized image has a SEO friendly
URL.
EPiImageResizer (User Control)

To use it simply register the control on the page:
Once registered you can use the User Control:
More attributes:

The user control also have some advanced features:
Attribute: What does it do?
PropertyName Specify the name of a property to fetch the image url from
instead of using ImageUrl.
FallbackImageUrl If the ImageUrl or PropertyName is empty, use this image
instead.
LinkURL Adds a <a href tag around the rendred img tag.
Alt Adds an alt attribute to the rendered img tag
Tooltip Adds a title attribute to the rendered img tag for mouse
over tooltips in all browsers
CssClass Adds a class attribute to the rendered img tag
CssStyle Adds a style attribute to the rendered img tag
LinkCssClass Adds a class attribute to the a href tag.

So how does it work?
The first time a picture is requested the image is resized and stored in
the folder: Global/Scaled/
The next time the image is requested, the cached version in
Global/Scaled is returned.
The image path of the scaled version is SEO friendly.
29.01.2015 © MAKING WAVES 10
The scaled images are stored
in folders on the format
“300x200x2”, where
300x200 means 300 pixels
wide, 200 pixels high, and x2
means that the
transformation “ScaleToFit”
is used (x0 is stretch and x1 is
ScaleToFill)

The EPiImage Property is very similar to the built in “URL to image”
property, but adds the following features:
• Thumbnail preview of the selected image, not just a meaningless url
• Click the “i” button to preview the image and add an image
description
29.01.2015 © MAKING WAVES 11
EPiImageProperty

If you click the “i” you get this dialog box:
29.01.2015 © MAKING WAVES 12
EPiImageProperty

How do I use the property?
Once installed you will get the new EPiImage property:
How do I access the property?
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 %>
29.01.2015 © MAKING WAVES 13
EPiImageProperty

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" />
29.01.2015 © MAKING WAVES 14
EPiImageProperty

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" />
29.01.2015 © MAKING WAVES 15
EPiImageProperty &
EPiImageResizer

Provides simple image gallery functionality. Preview in edit mode,
ability to add image description/alt text for each image and drag and
drop sorting. The property returns a collection of images for you to
render in view mode as you like. You can also use the EPiImageGallery
Viewer to display the property.
29.01.2015 © MAKING WAVES 16
EPiImageGallery Property

This is a sample user control how to use a EPiImageGallery Property on
a page. It uses jQuery Tools to create the slider. Please note that this
just one way to use the EPiImageGallery Property. The property
provides the images as an image collection so it is easy to show the
images the way you want (e.g. as a list, a slideshow etc.).
29.01.2015 © MAKING WAVES 17
EPiImageGallery Viewer

Step 1. Download the module from
https://www.coderesort.com/p/epicode/wiki/EPiImage
Step 2. Install the module using EPiServer Deployment Center
29.01.2015 © MAKING WAVES 18
How do I install it?

If you have an install of EPiServer CMS 6 with the Alloy demo
templates you can install 2 demo templates for EPiImage by unzipping
and importing the file ”EPiImageDemoPageTypes Unzip And
Import.zip” found in the ”EPiImageDemoTemplates” folder.
29.01.2015 © MAKING WAVES 19
Demo templates

DEMO
Alexander Haneng (Twitter: @ahaneng)

Download module from EPiCode:
Source code is available here:
https://www.coderesort.com/p/epicode/browser/MakingWaves.EPiIm
age
Documentation on EPiCode:
Blog series on EPiServer world: (4 posts so far)
http://world.episerver.com/Blogs/Alexander-Haneng/
29.01.2015 © MAKING WAVES 21
EPiImage online

• Latest version is 1.2
• Used in several of our customers web sites
• Thank you to those who have contributed so far!
We are planning a 2.0 version. Here are some of the ideas
that might make it into the final release (no promises):
• Support for CMS 6 only
• Add multiple images to a image gallery in one operation (need to
show a “loading…” message as resizing a lot of images might be slow)
• Support for a link in addition to alt text for images
• Show a green “i” button for images that have an alt text
• Preview of the alt text on mouse over the green “i” button
29.01.2015 © MAKING WAVES 22
Status

We would love to be able to drag and drop files from the right side file
explorer directly to the ImageGallery property.
Anybody know how (or if) this is possible?
29.01.2015 © MAKING WAVES 23
We need your help!

EPiImage

Recommended

Recommended

More Related Content

Similar to EPiImage

Similar to EPiImage (20)

More from EPiServer Meetup Oslo

More from EPiServer Meetup Oslo (8)

Recently uploaded

Recently uploaded (20)

EPiImage