Meridium EPiServer Premium Partner EPiMore Partner EPiServer is a major focus area Founded in 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 ImageVault.Episerver5.dll All classes and properties available to the developer Register TagPrefix="ImageVault" Namespace="ImageStoreNET.Developer.WebControls" Assembly="ImageVault.Episerver5" %> ImageStoreNET.dll Contains user and event objects used internally and by the API 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 ImageVault IVUrlBuilder 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 += " "; } string someURL = " + ”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 Used to show an albumtree. "> Don’t forget AlbumTreeControl.DataBind() in Page_Load. 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

IVConversionFormatList … " onclick="window.open(' ');return false"> … 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. " ImageWidth="350" ImageFormat="jpg" /> 26

IVImage Used to show an image with a specified size and format 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

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 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 file IVCategoryCollection 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 -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 -tag with runat=”server” to show the picture in code in front. 37

Exercise – Meta data Get the ”Title” metadata for a IVFileData object Hint: 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 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 Demo User: productdemo Pass: productdemo 42

Solution - ImageVaultImage [Code in front] [Code in front] [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] [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