Adding a teaser image to Composite.News

Question

Is it possible to add a teaser image to the default Composite.News package? Out of the box the news ext. brings all I need but a teaser image for the list view is missing in my case.

Answer 1

Yes, but this require modifications with package.

1. Edit News data type: go to Data -> Page Datafolders -> locate Composite.News.NewsItem -> right click -> Edit -> on the Fields tab add new field for example named "TeaserImage", Field Type = Data Reference, Reference Type = C1 Image File, Optional = Yes -> Save data type.

2. Modify the News Form Markup: The News data item contains custom Form Markup, so the new added field will be not automatically appear there, so you should manually add the markup for the new field: go to Data -> Page Datafolders -> locate Composite.News.NewsItem -> right click -> Edit Form Markup -> add markup for the new TeaserImage field:

    <cms:binding name="TeaserImage" type="System.String" optional="true" />

    </cms:bindings>
<cms:layout>
    <cms:layout.label>
        <cms:read source="Title" />
    </cms:layout.label>
    <TabPanels>
        <PlaceHolder Label="Settings">
            <FieldGroup>
                ...
                <TextArea Label="Teaser" Help="The short description of the news item">
                    <TextArea.Text>
                        <cms:bind source="Teaser" />
                    </TextArea.Text>
                </TextArea>
                <DataReferenceTreeSelector Label="TeaserImage" Help="" Handle="Composite.Management.ImageSelectorDialog" SearchToken="Composite.Plugins.Elements.ElementProviders.MediaFileProviderElementProvider.MediaFileSearchToken,Composite|MimeTypes=',\ \'image/gif\',\ \'image/jpeg\',\ \'image/png\',\ \'image/bmp\'', Extensions=null, Folder=null, HideSubfolders='False', Keyword=null" DataType="Composite.Data.Types.IImageFile,Composite" NullValueAllowed="true">
                       <DataReferenceTreeSelector.Selected>
                        <cms:bind source="TeaserImage" />
                      </DataReferenceTreeSelector.Selected>
                       </DataReferenceTreeSelector>
            </FieldGroup>
        </PlaceHolder>
        <XhtmlEditor Label="News Story" Help="News Story" ClassConfigurationName="common">
            ...
        </XhtmlEditor>

    </TabPanels>
</cms:layout>

1. Modify the XSLT function Composite.News.NewsList -> edit the function call "GetNewsItemXml" -> modify Selected fields (select the new TeaserImage field), -> edit function Template and add the code where you want to render the Tease Image.