Try our conversational search powered by Generative AI!

Alexander Haneng
Oct 8, 2010
  6614
(0 votes)

EPiImage Part 4: EPiImageGallery Viewer

EPiImageGallery Viewer is a sample user control for rendering EPiImageGallery properties as a slider. It uses jQuery Tools to create the smooth sliding of the thumbnails.

 

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

 

 

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.). See the blog post EPiImage Part 3: EPiImageGallery Property to see how to access the image collection directly.

 

What does it do?

The gallery shows 4 thumbnails and a big view of the first thumbnail. If you click any of the thumbnails the big image will be replaced by the thumbnail being clicked. If you have added an image description, it will be shown below the big image.

 

If you have more then 4 images in the gallery, you will get a next arrow that lets you scroll to the next 4 thumbnails and so on.

 

image

 

The slide functionality is built using jQuery Tools and is based on this jQuery Tools demo:

Scrollable demo 1 / 11 : Minimal setup for scrollable

 

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)

 

Usage:

Register the user control on the page:

<%@ Register TagPrefix="EPiImage" 
   TagName="EPiImageGalleryViewer" 
   Src="~/EPiImage/UserControls/EPiImageGalleryViewer.ascx"%>

Then add this tag with the PropertyName set to the name of the EPiImageGallery property we want to render:

<EPiImage:EPiImageGalleryViewer 
    PropertyName="MyImageGalleryProperty" 
    runat="server" />

 

To end this series I will cover a few general EPiImage topics:

 

Configuring EPiImage

You can configure EPiImage by editing the ~/EPiImage/~EPiImage.config file.

 

Here you can change the path where EPiImage stores the cached images: (Please note: It has to be a VPP path)

<scaledimagechache vpppath="/Global/Scaled/" />

 

Scheduled Job

Over time the EPiImageResizer creates a lot of cached images in the /Global/Scaled/ folder. If you like you can run the scheduled job “EPiImage Cleanup” to delete old images. It will look at the “deletefilesolderthan” setting in the ~/EPiImage/~EPiImage.config file. 7 means that the scheduled job will delete all cached images older than 7 days.

<cleanupjob deletefilesolderthan="7" />
 

image

 

Final Note

So that concludes my 4 part blog series about EPiImage. I hope this module will be helpful in your next project. :-)

I am also happy to announce that EPiImage is no longer in beta!

 

Have feedback? Want to help out?

Leave your feedback in the comments, or feel free to email or twitter me: @ahaneng :-)

And finally: Thank you to Making Waves for donating it to EpiCode!

Oct 08, 2010

Comments

Arild Henrichsen
Arild Henrichsen May 4, 2011 02:01 PM

Feature suggestion: Ability to disable/enable big view of first picture.
How about a lightbox-type feature?

Daniel Farray
Daniel Farray Feb 12, 2013 11:00 PM

Is there a version where iPad users can swipe to move between images?

Please login to comment.
Latest blogs
Headless forms reloaded (beta)

Forms is used on the vast majority of CMS installations. But using Forms in a headless setup is a bit of pain since the rendering pipeline is based...

MartinOttosen | Mar 1, 2024

Uploading blobs to Optimizely DXP via PowerShell

We had a client moving from an On-Prem v11 Optimizely instance to DXP v12 and we had a lot of blobs (over 40 GB) needing uploading to DXP as a part...

Nick Hamlin | Mar 1, 2024 | Syndicated blog

DbLocalizationProvider v8.0 Released

I’m pleased to announce that Localization Provider v8.0 is finally out.

valdis | Feb 28, 2024 | Syndicated blog

Epinova DXP deployment extension – With Octopus deploy

Example how you can use Epinova DXP deployment extension in Octopus deployment.

Ove Lartelius | Feb 28, 2024 | Syndicated blog

Identify Azure web app instance id's for an Optimizely CMS site

When running Optimizely CMS in Azure, you will be using an instance bound cloud license. What instances are counted, and how can you check them? Le...

Tomas Hensrud Gulla | Feb 27, 2024 | Syndicated blog

Introducing Image Transformer - AI Assistant for Optimizely

We've got something super cool to share with you, and it's all about giving your images a fresh spin. Image Transformer, the latest feature from ou...

Luc Gosso (MVP) | Feb 26, 2024 | Syndicated blog