Alexander Haneng

Jun 29, 2011

4347

(2 votes)

Using EPiImage with Page Type Builder (PTB)

I have gotten a few questions about how to use EPiImage with PTB. So in this blog post I thought I would cover the basics.

People have been using EPiImage with PTB almost since the start of EPiImage, but with the new 2.5 version it is even easier.

EPiImageProperty

Adding a EPiImageProperty to a PageType:

[PageTypeProperty(EditCaption = "Main image", Type = typeof(EPiImageProperty))]

public virtual EPiImagePropertyData MainImage

    get; set;

You can access the property directly:

Image url: <%=CurrentPage.MainImage.ImageUrl%>

Image description: <%=CurrentPage.MainImage.ImageDescription%>

Or use it with EPiImageResizer:

<%@ Register TagPrefix="EPiImage" TagName="EPiImageResizer"

    Src="~/EPiImage/UserControls/EPiImageResizer.ascx" %>

<EPiImage:EPiImageResizer ID="Image"

    PropertyName="MainImage"

    Width="200"

    Height="200"

    Transformation="ScaleToFit" runat="server" />

Adding a EPiImageGalleryProperty to a PageType:

[PageTypeProperty(EditCaption = "Image gallery", Type = typeof(EPiImageGalleryProperty))]

public virtual EPiImageGalleryImageCollection ImageGallery

    get;

    set;

You can access the property directly:

<%

foreach (EPiImageGalleryImage Image in CurrentPage.ImageGallery)

%>

  Image Url: <%= Image.ImageURL %><br />

  Link Url: <%= Image.LinkURL %><br />

  Description: <%= Image.Description %><br />

<%

%>

<%@ Register TagPrefix="EPiImage"

   TagName="EPiImageGalleryViewer"

   Src="~/EPiImage/UserControls/EPiImageGalleryViewer.ascx"%>

<EPiImage:EPiImageGalleryViewer ID="Viewer"

    PropertyName="ImageGallery"

    runat="server" />

<%@ Register TagPrefix="EPiImage"

    TagName="EPiImageGalleryGrid"

    Src="~/EPiImage/UserControls/EPiImageGalleryGrid.ascx" %>

<EPiImage:EPiImageGalleryGrid ID="Grid"

    PropertyName="ImageGallery"

    ThumbnailHeight="150" ThumbnailWidth="150"

    DescriptionHeight="20" DownloadLinkHeight="20"

    Transformation="ScaleToFill"

    ShowDescription="true"

    ShowDownloadLink="true"

    LinkThumbnailsTo="OriginalImage" runat="server" />

Jun 29, 2011

Please login to comment.