Meridium: Webbplatser för offentlig sektor

Part 2 - Prepare Springshield for ImageVault

Skrivet av Marcus Lindblom den 12 januari 2011 ImageVault, EPiServer 8 kommentarer

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:

Edit Property view

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:

~/templates/units/mainslideshow.ascx.

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.

Diskussion

  1. Pär Wissmark, den 14 april 2011

    Hej jag har problem att få fart på serverkontrollerna som skall laddas från namespace="ImageStoreNET.Developer.WebControls" assembly="ImageVault.EPiServer6" Exemelevis om jag skapar en IVFIlelist så får jag inte upp templates taggaran. Jag har lagt en referens till kontrollerna i web.config och referens till både imagestorenet och imagevault.episerver6. Hoppas ni har något tips MVH Pär

  2. Marcus Lindblom, den 15 april 2011

    Får du något felmeddelande eller menar du att du har problem med code completion?

  3. Peter Suneson, den 18 april 2011

    Hej! Jag har samma problem. Själva kontrollen och dess attribut fungerar men jag får meddelandet "Content is not allowed between opening and closing tags for element IVFileList". Jag testade att ta bort designerfilen och kör "Convert to web application" men då får jag "unknown server tag". Några tips? /Peter

  4. Pär Wissmark, den 21 april 2011

    Hej Kontrollerna rullar om jag lägger in den färdiga kod ni dsitrubuerat, det är alltså i VS som problemet ligger, jag får inte upp dem i code completion, intellicense, som du säger. Jag har lagt till dll referensen i toolbaren så jag får upp alla kontroller som kan användas men när jag lägger ut dem så får jag inte fram "under taggarna". /Pär

  5. Marcus Lindblom, den 2 maj 2011

    Det stämmer att intellisensen inte fungerar för våra kontroller, vi kommer åtgärda det till nästa service release som är planerad innan semestern.

  6. Anders Branderud, den 11 oktober 2012

    Hej! Jag följer denna guide och får detta felmeddelande (visas i Console-mode i Firebug) när jag lägger till ett ett Slideshow-element till en content-tag: Parser Error Message: Unknown server tag 'ImageVault:IVFileList'.

    Hur fixar jag detta? Jag har inkluderat ImageVault.EPiServer6 i bin och som reference och följt restrerande instruktioner relaterade till Slideshow. Tack på förhand

  7. Anders Branderud, den 11 oktober 2012

    Det fungerar när jag endast har denna kod: Så nu får jag felsöka det systematiskt... mvh, Anders

  8. Anders Branderud, den 11 oktober 2012

    Allt fungerar när jag använder mig av dessa taggar: Ha en trevlig dag! mvh,Anders

Skriv kommentar

Ange kontrollordet i textfältet nedan.

Kategorier

Arkiv