Part 2 - Prepare Springshield for ImageVault
First we need to locate the page types that contains an image property. We will find a list of eight page types that uses a standard EPiServer image property type.
- Document list *
- Form page *
- Index page *
- News list *
- News page *
- Regular web page *
- Search page *
- Start page
We start off with the document list, on this page type we need to make two minor changes. First, change the type of the property named MainImage from URL to image to ImageVaultImage.
When we're done with that, the Edit Property view should look something like this:
The page type contains a seperate field for alternative text, ImageVault does not need a separate field for this so can remove the EPiServer property called MainImageAlt.
Now, do same changes to all page types marked with an asterisk in the list above.
Go back to the page type named News page, change the property called TeaserImage from Url to image to ImageVaultImage.
Find the page type called Start page, change the property named StartMainImage from URL to image to ImageVaultFileList and remove the property called MainImageAlt. Finally, we change the name of the property to MainImageFileList and then we're done modifying page types.
Now it's time to make some changes to the code, begin with the user control named MainImage.ascx. Remove the code in this file and add two new EPiServer properties, take a look at the result.
Remove RenderMainImage and RenderMainImageText from the code behind.
Then we need to add a new user control, name it eg MainSlideShow. Delete the contents of the user control and add a new server control called IVFileList from the assembly ImageVault.EPiServer6. This control's responsibility is to render the images and a couple of pre defined metadata that we need to create the slideshow.
In the ItemTemplate we will use another server control from the same ImageVault assembly named IVImage. We will define the width and height of the image and the cropping conditions. Copy the complete code from codplex and paste into MainSlideShow.ascx.
We also need to add a new method called GetMetaData that simply returns the value of a meta data field in ImageVault. For this example I use static names for the meta data fields so you need to have one field named Beskrivning and one named Fotograf. You can of course change these names to your needs.
Change the path to the usercontrol for the main image on default.aspx to:
We also need to change the teaser images with property name TeaserImage on the the start page. Change the tag name from Image to Property and add a new attribute called ImageWitdth with a value of 120.
The last modification we need to do is to newslist.aspx, replace the method GetTeaserImage(Container.CurrentPage) with a common EPiServer property.
You can download a copy of the complete source for the ImageVault branch from codeplex, I strongly recommend you to test the code before running it in production.
Feed free to post a comment or send me an email if you have any questions.
- SharePoint 2 inlägg
- ImageVault 19 inlägg
- EPiServer 20 inlägg
- ProcessMap 2 inlägg
- EmailEncoder 1 inlägg