2. 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

3. Alexander Haneng @ahaneng
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
@ahaneng
© MAKING WAVES

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

5. Alexander haneng (Twitter: @ahaneng)
So why EPiImage?
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.
© MAKING WAVES

6. Alexander haneng (Twitter: @ahaneng)
What is EPiImage?
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)
© MAKING WAVES

7. EPiImageResizer (User Control)
Alexander haneng
EPiImageResizer (User Control)
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.
© MAKING WAVES

8. EPiImageResizer (User Control)
Alexander haneng
EPiImageResizer (User Control)
To use it simply register the control on the page: Once registered you can use the User Control: More attributes:
© MAKING WAVES

9. EPiImageResizer (User Control)
Alexander haneng
EPiImageResizer (User Control)
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.
© MAKING WAVES

10. EPiImageResizer (User Control)
Alexander haneng
EPiImageResizer (User Control)
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.
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)
© MAKING WAVES

11. Alexander haneng (Twitter: @ahaneng)
EPiImageProperty
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
© MAKING WAVES

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

13. Alexander haneng (Twitter: @ahaneng)
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 %>
© MAKING WAVES

14. Alexander haneng (Twitter: @ahaneng)
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" />
© MAKING WAVES

15. EPiImageProperty & EPiImageResizer
Alexander haneng
EPiImageProperty & 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=" runat="server" />
© MAKING WAVES

16. EPiImageGallery Property
Alexander haneng
EPiImageGallery Property
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.
© MAKING WAVES

17. EPiImageGallery Viewer
Alexander haneng
EPiImageGallery Viewer
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.).
© MAKING WAVES

18. Alexander haneng (Twitter: @ahaneng)
How do I install it?
Step 1. Download the module from Step 2. Install the module using EPiServer Deployment Center
© MAKING WAVES

19. Alexander haneng (Twitter: @ahaneng)
Demo templates
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 ”EPiImage\DemoTemplates” folder.
© MAKING WAVES

20. DEMO
Alexander Haneng

21. Alexander haneng (Twitter: @ahaneng)
EPiImage online
Download module from EPiCode: Source code is available here: age Documentation on EPiCode: Blog series on EPiServer world: (4 posts so far)
© MAKING WAVES

22. Status Latest version is 1.2
Alexander haneng
Status
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
© MAKING WAVES

23. Alexander haneng (Twitter: @ahaneng)
We need your help!
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?
© MAKING WAVES

24. Feedback? Questions?
© MAKING WAVES