Meridium

1
(No Transcript)
2
Meridium

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

3
ImageVault - History

• EPiServers 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
URLs the ImageHandler

• /ImageVault/Images/width_350/conversionFormatType_
  Jpeg/id_8/compressionQuality_0/ImageVaultHandler.a
  spx
• 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

• Its possible to define your own translations for
  metadata, categories and conversion formats.
• Use the files ImageVaultConversionFormatsEN.xml,
  ImageVaultCategoriesEN.xml, and
  ImageVaultAlbumsEN.xml
• Maps the IDs 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
Dlls

• ImageVault.Episerver5.dllAll classes and
  properties available to the developer
• lt_at_ Register TagPrefix"ImageVault"
  Namespace"ImageStoreNET.Developer.WebControls"
  
• 
  Assembly"ImageVault.Episerver5" gt
• 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

• Utility-class to parse/create Urls 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 "ltimg src\"" ub.ToString()
"\"/gtltbr/gt"
string someURL "http//www.example.com/ImageVau
lt/Images/width_350/

conversionFormatType_Jpeg/id_8/compressionQuality
_0/ImageVaultHandler.aspx" IVUrlBuilder ub
IVUrlBuilder.ParseUrl( someURL )
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.
• ltImageVaultIVAlbumTree runat"server"
  id"AlbumTreeControl" AlbumProperty"IVAlbum"gt
• ltItemIndentTemplategt
• ltulgt
• lt/ItemIndentTemplategt
• ltItemHeaderTemplategt
• ltligt
• lt/ItemHeaderTemplategt
• ltItemTemplategt
• lta href"ltContainer.CurrentAlbum.LinkURLgt"gt
  ltContainer.CurrentAlbum.Namegtlt/agt
• lt/ItemTemplategt
• ltItemFooterTemplategt
• lt/ligt
• lt/ItemFooterTemplategt
• ltItemUnindentTemplategt
• lt/ulgt
• lt/ItemUnindentTemplategt
• lt/ImageVaultIVAlbumTreegt

24
IVCategoryList

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

... ltImageVaultIVCategoryList runat"server"gt lti
temtemplategt ltContainer.CurrentCategory.Namegt
ltbr /gt lt/itemtemplategt lt/ImageVaultIVCategoryLis
tgt ...
25
IVConversionFormatList

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

• ltImageVaultIVConversionFormatList
  runat"server"gt
• ltItemTemplategt
• lta href"ltContainer.CurrentFormat.LinkUR
  Lgt " onclick"window.open('ltContainer.Current
  Format.LinkURLgt')return false"gtltContainer.Curr
  entFormat.Namegtlt/agtltbr/gt
• lt/ItemTemplategt
• lt/ImageVaultIVConversionFormatListgt

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

ltImageVaultIVFileList runat"server"
AlbumProperty"ImageRollerAlbum"
id"ImageListControl"gt ltHeaderTemplategt
ltul id"rotator"gt lt/HeaderTemplategt
ltItemTemplategt ltli class"alpha-shadow"gt
ltdivgt
ltImageVaultIVImage runat"server"
DataSource"ltContainer.CurrentFilegt"
ImageWidth"350" ImageFormat"jpg" /gt
lt/divgt lt/ligt lt/ItemTemplategt
ltFooterTemplategt lt/ulgt
lt/FooterTemplategt lt/ImageVaultIVFileListgt
27
IVImage

• Used to show an image with a specified size and
  format
• ltImageVaultIVImage runat"server"
  ImageWidth"122" ImageFormatJPG"/gt

28
IVMetaDataList

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

ltImageVaultIVMetaDataList runat"server"gt ltItemT
emplategt ltContainer.Current
MetaData.Name gt
ltContainer.CurrentMetaData.Value gt ltbr
/gt lt/ItemTemplategt lt/ImageVaultI
VMetaDataListgt
29
EPiServer properties

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

30
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 EPiServerProperty to display or
  IVUrlBuilder in CodeBehind. Note! In the second
  case the image-tag would not include the alt-text.

ltEPiServerProperty runat"server"
PropertyName"ImageVaultImage" Width"200"
ImageFormat"JPG" /gt .... ltimg IDtheImage
runatserver /gt ... IVUrlBuilder ub
IVUrlBuilder.ParseUrl(CurrentPageImageVaultImage
" .ToString()) ub.Width 200 theImage.Src
ub.ToString()
31
ImageVaultImage, IVImage, and IVFile

• Use ImageVaultImage when you want to show a image
  using the ltEPiServerPropertygt
• 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

• 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)
34
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)

35
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_BeforeAddFileEve
nt ) ... void IVDataFactory_BeforeAddFileEvent(
object source, IVDataEventArgs e ) if(
e.File.Length gt 10 ) e.Cancel true
e.CancelReason "To big!!!"
36
Exercise - installation

• Download and install the demo-templates
• Open and compile the project

37
Exercise - ImageVaultImage

• Use the ImageVaultImage property and the
  ltEPiServerPropertygt-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 ltimggt-tag with
  runatserver 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 testHint Use
  the metod FindFilesWithCriteria in IVDataFactory

39
Exercise - Upload

• Make a simple upload page.Hint Use ltinput
  type"file" id"filePicker" runat"server" /gt to
  select the file.
• Extra excerciseMove 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 ltEPiServerProperty
  ID"Property1" PropertyName"IVImage"
  runat"server" ImageWidth"200" ImageFormat"JPG"
  /gt-----------------------------------------------
  ----------------
• Code in frontltimg id"Img1" runat"server"
  /gt Code behind protected void
  Page_Load(object sender, EventArgs e)
  IVUrlBuilder ub IVUrlBuilder.ParseUrl(CurrentPag
  e"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.FindFi
  lesWithCriteria(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_BeforeUpdateF
  ileEvent)
• static void IVDataFactory_BeforeUpdateFileEven
  t(object source, ImageStoreNET.CMS.Data.IVDataEven
  tArgs e)
• IVFileData file IVDataFactory.GetFile(e.
  ID, IVAccessLevel.IgnoreAccess)
• // If currently in upload, or the album
  is the same
• if (file.AlbumId IVDataFactory.UploadAl
  bumID file.AlbumId e.TargetID)
• return
• e.Cancel true
• e.CancelReason "This is not allowed!"
• return

46
Solution - Upload

• Code in front ltinput type"file"
  id"filePicker" runat"server" /gt
• ltinput type"submit" /gt
• Code behind
• protected void Page_Load(object sender, EventArgs
  e)
• if (IsPostBack)
• HttpPostedFile file filePicker.PostedFil
  e
• int imageId IVDataFactory.UploadFile(IVD
  ataFactory.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