Views: 3361
Number of votes: 2
Average rating:

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" />

 

EPiImageGalleryProperty

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 />
  <%
}
%>

 

Or using EPiImageGalleryViewer:

<%@ Register TagPrefix="EPiImage" 
   TagName="EPiImageGalleryViewer" 
   Src="~/EPiImage/UserControls/EPiImageGalleryViewer.ascx"%>
 
<EPiImage:EPiImageGalleryViewer ID="Viewer"
    PropertyName="ImageGallery" 
    runat="server" />

 

Or using EPiImageGalleryGrid:

<%@ 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" />

 

Download EPiImage

For more information about EPiImage and to download the module visit the EPiImage EPiCode page.

 

 

Posted by

Jun 29, 2011

Please login to comment.