CMS Enable a Linked Image

Problem: you have a ImageWidget that needs to be hyperlinked to another page or resource, and it needs to be editable in the CMS. This includes editing the Link destination.

Solution: use a GalleryWidget with a custom template and a PropertyEditor.

Example Problem

<dc.Link To='https://www.channel3000.com/best-of-madison-2021-winners/#:~:text=by%20Tim%20Burton-,Pet%20Supplies%20Store,-%E2%98%85Mounds%20Pet'>
    <dcm.ImageWidget id="imgAward" Path="/misc/best-of-madison" alt="best of madison 2021 bronze award" />
</dc.Link>

Example Solution

<dcm.GalleryWidget id="imgAwards" Path="/misc" Size="1-1" PropertyEditor="home-awards">
    <Template>
        <dc.Link data-dcm-alias="{$_Image.Alias}" To="{$_Image.Element.@Link}">
                <dc.ImgCache Path="{$_Image.Path}" alt="{$_Image.Element.@Title}" />
        </dc.Link>
    </Template>

    <Image Alias="best-of-madison" Title="best of madison 2021 bronze award" Link="https://www.channel3000.com/best-of-madison-2021-winners/#:~:text=by%20Tim%20Burton-,Pet%20Supplies%20Store,-%E2%98%85Mounds%20Pet" />
</dcm.GalleryWidget>

Explanation

Sizing

Assuming the image is in a column consider using Size="1-1" so it continues to take the full column width.

Image Properties
The Title and Alias of <Image> are automatically supported but to allow the user to edit the Link attribute they'll need an extension to the property editor.

set the PropertyEditor attribute to some unique value for the website, such as home-awards .
create an html file in the folder path /www/dcm/cms/gallery-widget-image for the webs.
name the html file the same as the PropertyEditor, so the full path would be /www/dcm/cms/gallery-widget-image/home-awards.html for this example
add the fields needed to extend the standard property editor:

<dc.MixIn>
    <dc.Fragment>
        <dcf.Text Label="Link" Name="Link" Required="true" />
    </dc.Fragment>
</dc.MixIn>

Now the user can edit the Link as well as the Title.

CMS Enable

The custom template will contain the Link, like so:

<dc.Link data-dcm-alias="{$_Image.Alias}" To="{$_Image.Element.@Link}">
        <dc.ImgCache Path="{$_Image.Path}" alt="{$_Image.Element.@Title}" />
</dc.Link>

Note that the To attribute gets filled from the Link attribute of the <Image> . Note also that the data-dcm-alias attribute is set, this is essential for the CMS to work and should be on the top level element in the <Template> .

Furthermore, it is important for the Link to be a relatively positioned block, since <Link> (which renders as an <a> ) is not, we need to set CSS to do so. For our example it would be:

#dcuiMain.home #imgAwards a {
    display: block;
    position: relative;
}

Now you should have a fully CMS enabled way to edit / replace images with an associated link URL.

page header

CMS Enable a Linked Image

Example Problem

Example Solution

Explanation

See Also