Meridium

2. Meridium EPiServer Premium Partner EPiMore Partner EPiServer is a major focus area Founded in 2002 19 employees

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

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

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

6. 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”

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

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

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

10. Categories Categories exists to make finding files easier.

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

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

13. API continued ImageStoreNET.Developer.WebControls ImageStoreNET.Developer.Security ImageStoreNET.Developer.Filters ImageStoreNET.Developer.Core ImageStoreNET.Developer ImageStoreNET ImageStoreNET.CMS ImageStoreNET.CMS.Data

14. Dll’s ImageVault.Episerver5.dllAll classes and properties available to the developer <%@ Register TagPrefix="ImageVault" Namespace="ImageStoreNET.Developer.WebControls" Assembly="ImageVault.Episerver5" %> ImageStoreNET.dllContains user and event objects used internally and by the API

15. ImageStoreNET.Developer • Contains the important classes • IVUrlBuilder • IVDataFactory

16. IVDatafactory Methods used to create/modify/delete/search files and albums Events to affect files/albums before/when/after they are created/modified/updated

17. IVUrlBuilder 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 += "<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 ); Utility-class to parse/create Url’s to items in ImageVault

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

19. Datamodel IVFileData ConversionFormats Categories MetaData Album

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

21. ImageStoreNET.Developer.Security • Contains the IVAccessLevel-enumeration • Used in operations that requires authentication to bypass/enforce permission checks

22. ImageStoreNET.Developer.WebControls Contains controls and EPiServer-properties to choose and display items on pages in EPiServer

23. IVAlbumTree Used to show an albumtree. <ImageVault:IVAlbumTreerunat="server" id="AlbumTreeControl" AlbumProperty="IVAlbum"> <ItemIndentTemplate> <ul> </ItemIndentTemplate> <ItemHeaderTemplate> <li> </ItemHeaderTemplate> <ItemTemplate> <a href="<%#Container.CurrentAlbum.LinkURL%>"><%#Container.CurrentAlbum.Name%></a> </ItemTemplate> <ItemFooterTemplate> </li> </ItemFooterTemplate> <ItemUnindentTemplate> </ul> </ItemUnindentTemplate> </ImageVault:IVAlbumTree> Don’tforgetAlbumTreeControl.DataBind() in Page_Load.

24. IVCategoryList ... <ImageVault:IVCategoryList runat="server"> <itemtemplate> <%#Container.CurrentCategory.Name%><br/> </itemtemplate> </ImageVault:IVCategoryList> ... • Webcontrol to display the categories in a collection of categories, or the categories of a file • Usually used in combination with a IVFileList

25. IVConversionFormatList • Used to display a list of conversion formats • Often used when listing contents from an album … <ImageVault:IVConversionFormatListrunat="server"> <ItemTemplate> <a href="<%#Container.CurrentFormat.LinkURL%> " onclick="window.open('<%#Container.CurrentFormat.LinkURL%>');return false"><%#Container.CurrentFormat.Name%></a><br/> </ItemTemplate> </ImageVault:IVConversionFormatList> …

26. IVFileList <ImageVault:IVFileList runat="server" AlbumProperty="ImageRollerAlbum" id="ImageListControl"> <HeaderTemplate> <ul id="rotator"> </HeaderTemplate> <ItemTemplate> <li class="alpha-shadow"> <div> <ImageVault:IVImage runat="server" DataSource="<%#Container.CurrentFile%>"ImageWidth="350"ImageFormat="jpg" /> </div> </li> </ItemTemplate> <FooterTemplate> </ul> </FooterTemplate> </ImageVault: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.

27. IVImage Used to show an image with a specified size and format <ImageVault:IVImage runat="server" ImageWidth="122" ImageFormat=“JPG"/>

28. IVMetaDataList <ImageVault:IVMetaDataList runat="server"> <ItemTemplate> <%#Container.CurrentMetaData.Name %>: <%#Container.CurrentMetaData.Value%> <br /> </ItemTemplate> </ImageVault:IVMetaDataList> • Webcontrol to display the metadata in a collection of metadata, or the metadata of a file • Usually used in combination with a IVFileList

29. EPiServer properties PropertyImageVaultAlbum PropertyImageVaultComplexMedia PropertyImageVaultFile PropertyImageVaultFileList PropertyImageVaultURL ImageVaultImage, aka ImageType PropertyImageList

30. ImageVaultImage (ImageType) <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(); 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.

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

32. 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(...)

33. Categories – getting and setting // 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); • IVCategory • Accessed through • IVDataFactory.GetAllCategories() • IVFileData.Categories • Set the categories for a file with IVDataFactory.UpdateFile(...)

34. Uploading files to ImageVault 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); } } • 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

35. Events 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!!!"; } } 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!!!

36. Exercise - installation Download and install the demo-templates Open and compile the project

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

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

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

40. 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 eventsHint: The events i accessed thru IVDataFactory

41. If we have time over… Complex media More examples

42. More info • www.meridium.se • Demo http://products.meridium.se User: productdemo Pass: productdemo

43. 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();}

44. 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);

45. 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; } }

46. 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; }