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 Alexander Haneng
Jun 29, 2011
Comments