What is the simpliest way to add a single image to a Sitefinity template?

Question

I have a Sitefinity 7.0 installation. I've added a custom content type, which includes a field for a single, required, image.

I created a custom template for this content type. On the site you can click on examples for how to add your fields to the widget template. This is what it gives me for the 'Picture' field:

<%--The following namespace should be registered at the top of the control if it doesn't exists--%>      
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Images" TagPrefix="sf" %>      
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI" TagPrefix="sf" %>
            <sf:ImagesView ControlDefinitionName="ImagesFrontend" runat="server" MasterViewName="ImagesFrontendThumbnailsListLightBox" Title="" UrlKeyPrefix="">
                <RelatedDataDefinition RelatedFieldName="Picture" RelatedItemType="Telerik.Sitefinity.DynamicTypes.Model.GIARRecipients.GiarRecipient" RelationTypeToDisplay="Child" RelatedItemSource="DataItemContainer">
                </RelatedDataDefinition>    
                <ControlDefinition ControlDefinitionName="ImagesFrontend" runat="server" ProviderName="OpenAccessDataProvider">
                    <Views>
                        <sf:ImagesViewMasterDefinition SortExpression="" ViewName="ImagesFrontendThumbnailsListBasic" runat="server">
                        </sf:ImagesViewMasterDefinition>
                        <sf:ImagesViewMasterDefinition  SortExpression="" ViewName="ImagesFrontendThumbnailsListLightBox" runat="server">
                        </sf:ImagesViewMasterDefinition>
                        <sf:ImagesViewMasterDefinition  SortExpression="" ViewName="ImagesFrontendThumbnailsListSimple" runat="server">
                        </sf:ImagesViewMasterDefinition>
                        <sf:ImagesViewMasterDefinition  SortExpression="" ViewName="ImagesFrontendThumbnailsListStrip" runat="server">
                        </sf:ImagesViewMasterDefinition>
                        <sf:ImagesViewDetailDefinition ViewName="ImagesDetailView" runat="server">
                        </sf:ImagesViewDetailDefinition>
                    </Views>
                </ControlDefinition >
            </sf:ImagesView>

This is way too much and the markup produced uses <ul><li>, even though it's always exactly one image. Ideally, I want it as simple as <img src='<%# Eval("Picture") %>' />

What is the simpliest way to add a single image to a Sitefinity template?

Ben Ben · Accepted Answer · 2014-05-20T16:10:15

For the image fields on custom content types, you can limit the number of images by clicking on the "Limitations" tab when adding the field. Select "Only 1 image can be uploaded or selected"

picture here .

The control that gets used in the template is instead is a Sitefinity Images control:

<sf:ImageControl runat="server" Title="" UrlKeyPrefix=""  ProviderName="OpenAccessDataProvider" >
    <RelatedDataDefinition RelatedFieldName="OneImage" RelatedItemType="Telerik.Sitefinity.DynamicTypes.Model.Solutions.Solution" RelationTypeToDisplay="Child" RelatedItemSource="DataItemContainer">
    </RelatedDataDefinition>
</sf:ImageControl>

And the markup that gets rendered is a image tag wrapped in a div:

<div class="sfimageWrp">                    
    <img id="ctl09_ctl00_ctl00_detailContainer_ctl03_0_ctl00_0_ctl00_0_imageItem_0" title="ootb" src="/images/default-source/default-album/ootb.png?sfvrsn=0" alt="ootb">
</div>

What is the simpliest way to add a single image to a Sitefinity template?

2 Answers