Meridium

• EPiServer Premium Partner• EPiMore Partner• EPiServer is a major focus area• Founded in 2002• 19 employees

2

ImageVault - History

• EPiServer’s first module• Announced to partners in april 2003• Version 2.0 in Januari 2004• Version 3.0 in November 2007• Today over 200 installations

3

URL’s & the ImageHandler• /ImageVault/Images/width_350/conversionFormatType_Jpeg/id_8/compressionQuality_0/ImageVaultHandler.aspx

• Every item in ImageVault is reached through a HTTPHandler

• The Url makes up a ”virtual” path to the item• All information about the item, the format, etc. is

included in the path

4

Internal structure

• All files a stored below the ”ImagePathOriginal”, set in web.config– The default is below /ImageStoreNET/Data/ImageDB

• Converted images are saved in corresponding folders below the ConversionFormats-folder

• All information ABOUT items is saved in the Database

5

Album

• Albums will help you organize your files in ImageVault.

• Settings like metadata, conversion formats and access rights is set on each album.

• Special albums: ”My files”, ”Uploaded files”, ”Archived files” and ”Favorites”

6

Rights for album

• Rights is set using the same users and groups used in EPiServer.

• Administer, Use, Move, Change, Delete, View• Special albums have different rights required for

some actions, e.g. uploading files.

7

Conversion formats

• Conversion formats is predifined templates used by ImageVault to automatically create copies of the original image.

• Helps the user selecting the right size and format for an image.

8

Metadata• Metadata is information about about item

– There are 5 different types of metadata• Text

– A text entered by the user when uploading/editing items• Date

– A date entered by the user• Date Added

– The date that the item was added to ImageVault• Archived before date

– A date entered by the user. Before this date occurs, the item is not visible in ImageVault• Archived after date

– A date entered by the user. After this date, the item is no longer visible in ImageVault

– Can store a maximum of 500 characters– Are create for the entire system, but bound to each album separately– Can be made mandatory for the system or an individual album– Can also be mapped to IPTC/EXIF-keys

9

Categories

• Categories exists to make finding files easier.

10

Language support

• It’s possible to define your own translations for metadata, categories and conversion formats.

• Use the files ImageVaultConversionFormatsEN.xml, ImageVaultCategoriesEN.xml, and ImageVaultAlbumsEN.xml

• Maps the ID’s to the translated name

11

API

• SDK, reference documentation describing the classes available in the API

• API, exposing public classes to the developer which could be used to extend or use the functionality and files in ImageVault

• Demo templates, examples of what can be done

12

API continued

13

ImageStoreNET.Developer.WebControls

ImageStoreNET.Developer.Security

ImageStoreNET.Developer.Filters

ImageStoreNET.Developer.Core

ImageStoreNET.Developer

ImageStoreNET

ImageStoreNET.CMS

ImageStoreNET.CMS.Data

Dll’s

14

ImageStoreNET.Developer

• Contains the important classes– IVUrlBuilder– IVDataFactory

15

IVDatafactory

• Methods used to create/modify/delete/search files and albums

• Events to affect files/albums before/when/after they are created/modified/updated

16

IVUrlBuilder

• Utility-class to parse/create Url’s to items in ImageVaultIVUrlBuilder ub = new IVUrlBuilder();ub.Width = 100;ub.Height = 100;ub.PreserveAspectRatio = true;ub.CompressionQuality = 90;foreach( IVFileData file in fileDataCollection ) { if( file.IsImage ) { ub.Id = file.Id; pnlImages.Text += "<img src=\"" + ub.ToString() +"\"/><br/>"; }}string someURL = "http://www.example.com/ImageVault/Images/width_350/” + ”conversionFormatType_Jpeg/id_8/compressionQuality_0/ImageVaultHandler.aspx";IVUrlBuilder ub = IVUrlBuilder.ParseUrl( someURL );

17

ImageStoreNET.Developer.Core

• Contains classes that maps against the entities in ImageVault, and utility classes to support them.

• Album – IVAlbumData• Category – IVCategory• Conversion format – IVConversionFormat• File or image – IVFileData• Meta data - IVMetaData

18

Datamodel IVFileData

Album

ConversionFormats

MetaData

Categories

19

ImageStoreNET.Developer.Filters

• Contains filters and events to affect listings of files and albums– I.e. sortings, steppings, count, search conditions etc.

20

ImageStoreNET.Developer.Security

• Contains the IVAccessLevel-enumeration– Used in operations that requires authentication to

bypass/enforce permission checks

21

ImageStoreNET.Developer.WebControls

• Contains controls and EPiServer-properties to choose and display items on pages in EPiServer

22

IVAlbumTree

23

IVCategoryList

• Webcontrol to display the categories in a collection of categories, or the categories of a file– Usually used in combination with a IVFileList

24

IVConversionFormatList

• Used to display a list of conversion formats• Often used when listing contents from an album

25

IVFileList• Webcontrol to display a list of files– Can be used to display the results a of a search, the

contents of an album etc.

26

IVImage

• Used to show an image with a specified size and format

<ImageVault:IVImage runat="server" ImageWidth="122" ImageFormat=“JPG"/>

27

IVMetaDataList

• Webcontrol to display the metadata in a collection of metadata, or the metadata of a file– Usually used in combination with a IVFileList

28

EPiServer properties

• PropertyImageVaultAlbum• PropertyImageVaultComplexMedia• PropertyImageVaultFile• PropertyImageVaultFileList• PropertyImageVaultURL• ImageVaultImage, aka ImageType• PropertyImageList

29

<EPiServer:Property runat="server" PropertyName="ImageVaultImage" Width="200" ImageFormat="JPG" />....<img ID=”theImage” runat=”server” />... IVUrlBuilder ub = IVUrlBuilder.ParseUrl(CurrentPage[“ImageVaultImage"] .ToString()); ub.Width = 200; theImage.Src = ub.ToString();

ImageVaultImage (ImageType)

• Property used to display a single image• Friendly user interface where the editor can choose an image

and enter the desired alt-text• Use an EPiServer:Property to display or IVUrlBuilder in

CodeBehind. Note! In the second case the image-tag would not include the alt-text.

30

ImageVaultImage, IVImage, and IVFile

• Use ImageVaultImage when you want to show a image using the <EPiServer:Property>

• Use IVImage when you need to data bind to a list like IVFileList

• Use IVFile if you want to create the url to the image in code behind, using IVUrlBuilder.

31

Metadata, getting and setting

• IVMetaData• Accessed through– IVDataFactory.GetAllMetaData()– IVAlbum.MetaData– IVFileData.MetaData

• Use [”MetaDataName”] to get a specific metadata from a collection

• Set the metadata for a file with IVDataFactory.UpdateFile(...)

32

Categories – getting and setting• IVCategory• Accessed through– IVDataFactory.GetAllCategories()– IVFileData.Categories

• Set the categories for a file with IVDataFactory.UpdateFile(...)// Add category with ID = 2 to the fileIVCategoryCollection imageCategories = new IVCategoryCollection();imageCategories.Add(new IVCategory(2));IVDataFactory.UpdateFile(imageId, AlbumId, null, imageCategories, IVDataFactory.CurrentUser);

33

Uploading files to ImageVault• Can be done with two types of files

– System.IO.FileInfo• For files located on disk

– System.Web.HttpPostedFile• For files uploaded through a web-form

• Uploaded files will always be saved to the UploadAlbum if (IsPostBack) { HttpPostedFile file = filePicker.PostedFile; int imageId = IVDataFactory.UploadFile(IVDataFactory.CurrentUser, file); if (imageId != 0) { // Move the file to a album …… IVDataFactory.UpdateFile(imageId, AlbumId, MetaData, Categories, IVDataFactory.CurrentUser); } }

34

Events• Available events are located in IVDataFactory• Events to affect files/albums before/when/after they

are created/modified/updated• Should be used with extreme caution!!!private void InitializeComponent() {IVDataFactory.BeforeAddFileEvent += new IVDataEventHandler( IVDataFactory_BeforeAddFileEvent )...}void IVDataFactory_BeforeAddFileEvent( object source, IVDataEventArgs e ) { if( e.File.Length > 10 ) { e.Cancel = true; e.CancelReason = "To big!!!"; }}

35

Exercise - installation

• Download and install the demo-templates

• Open and compile the project

36

Exercise - ImageVaultImage

• Use the ImageVaultImage property and the <EPiServer:Property>-tag to show a picture on a page. Max width should be 200px.

• Do the same in code behind using the IVUrlBuilder class.Hint, you could use a <img>-tag with runat=”server” to show the picture in code in front.

37

Exercise – Meta data

• Get the ”Title” metadata for a IVFileData objectHint: Use [] and the meta data name on the IVMetaDataCollection object

• Search for files where ”Title” = ”test”Hint: Use the metod FindFilesWithCriteria in IVDataFactory

38

Exercise - Upload

• Make a simple upload page.Hint: Use <input type="file" id="filePicker" runat="server" /> to select the file.

• Extra excercise:Move the file to an album. Make sure metadata and categories is set correctly.

39

Exercise - Events

• Use events to prevent a file from being moved once it has been placed in an album.

Hint: Use [PagePlugIn()] and public static void Initialize(int optionFlag) on a class to hook on to the events

Hint: The events i accessed thru IVDataFactory

40

If we have time over…

• Complex media• More examples

41

More info

• www.meridium.se

• Demo http://products.meridium.seUser: productdemoPass: productdemo

42

Solution - ImageVaultImage[Code in front] <EPiServer:Property ID="Property1" PropertyName="IVImage" runat="server" ImageWidth="200" ImageFormat="JPG" />---------------------------------------------------------------[Code in front]<img id="Img1" runat="server" />

[Code behind] protected void Page_Load(object sender, EventArgs e) { IVUrlBuilder ub = IVUrlBuilder.ParseUrl(CurrentPage["IVImage"] .ToString()); ub.Width = 200; Img1.Src = ub.ToString();}

43

Solution - Meta data [Code behind] IVFileData file = IVDataFactory.GetFile(ub.Id);string title = file.MetaData["Title"] .Value;

[Code behind]IVMetaDataCollection mdc = new IVMetaDataCollection();IVMetaData md = new IVMetaData(1, "test");mdc.Add(md);IVFileDataCollection files = IVDataFactory.FindFilesWithCriteria(IVDataFactory.RootAlbumId, "", null, IVSearchConditions.And, mdc, true);

44

Solution - Events[PagePlugIn()]public class MoveFileEventHandler { public static void Initialize(int optionFlag) { IVDataFactory.BeforeUpdateFileEvent += new IVDataEventHandler(IVDataFactory_BeforeUpdateFileEvent); } static void IVDataFactory_BeforeUpdateFileEvent(object source, ImageStoreNET.CMS.Data.IVDataEventArgs e) { IVFileData file = IVDataFactory.GetFile(e.ID, IVAccessLevel.IgnoreAccess); // If currently in upload, or the album is the same if (file.AlbumId == IVDataFactory.UploadAlbumID || file.AlbumId == e.TargetID) { return; } e.Cancel = true; e.CancelReason = "This is not allowed!"; return; }}

45

Solution - Upload[Code in front]

<input type="file" id="filePicker" runat="server" /><input type="submit" />

[Code behind]protected void Page_Load(object sender, EventArgs e) { if (IsPostBack) { HttpPostedFile file = filePicker.PostedFile; int imageId = IVDataFactory.UploadFile(IVDataFactory.CurrentUser, file); if (imageId != 0) { // Move the file to album 1, adding a category and a metadata IVMetaDataCollection imageMetaData = new IVMetaDataCollection(); imageMetaData.Add(new IVMetaData(1, "UploadedTest")); IVCategoryCollection imageCategories = new IVCategoryCollection(); imageCategories.Add(new IVCategory(2)); IVDataFactory.UpdateFile(imageId, 1, imageMetaData, imageCategories, IVDataFactory.CurrentUser); } } return;}

46