Transcript Meridium - Meriworks

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
ImageStoreNET.Developer.WebControls
ImageStoreNET.Developer.Security
ImageStoreNET.Developer.Filters
ImageStoreNET.Developer.Core
ImageStoreNET.Developer
ImageStoreNET
ImageStoreNET.CMS
ImageStoreNET.CMS.Data
13
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 += "<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
ConversionFormats
Categories
MetaData
Album
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.
<ImageVault:IVAlbumTree runat="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’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
...
<ImageVault:IVCategoryList runat="server">
<itemtemplate>
<%#Container.CurrentCategory.Name%><br />
</itemtemplate>
</ImageVault:IVCategoryList>
...
24
IVConversionFormatList
• Used to display a list of conversion formats
• Often used when listing contents from an album
…
<ImageVault:IVConversionFormatList runat="server">
<ItemTemplate>
<a href="<%#Container.CurrentFormat.LinkURL%> "
onclick="window.open('<%#Container.CurrentFormat.LinkURL%>');return
false"><%#Container.CurrentFormat.Name%></a><br/>
</ItemTemplate>
</ImageVault:IVConversionFormatList>
…
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.
<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>
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
<ImageVault:IVMetaDataList runat="server">
<ItemTemplate>
<%#Container.CurrentMetaData.Name %>:
<%#Container.CurrentMetaData.Value %>
<br />
</ItemTemplate>
</ImageVault:IVMetaDataList>
28
EPiServer properties
•
•
•
•
•
•
•
PropertyImageVaultAlbum
PropertyImageVaultComplexMedia
PropertyImageVaultFile
PropertyImageVaultFileList
PropertyImageVaultURL
ImageVaultImage, aka ImageType
PropertyImageList
29
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.
<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();
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 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
<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 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 <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.se
User: productdemo
Pass: 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