PublishingpageImage: Using field value controls and edit mode panels to tweak your page rendering

When using a publishingpageImage in your pagelayout it displays a border of 1px at the side of your image. This is especially annoying when you want to display a second image next to it, and you can’t get it aligned perfectly.

Before you drive yourself nuts for hours like I did to find out where that pixel comes from look at the following post from ECM Team.

It shows that this pixel is caused by the “editing” field of the PublishingPageImage and you can avoid this by using the EditModePanel. This way you add it twice to your page, once where you want to display it (without the pixel!) and once where you want it to appear when editing the page.

<PublishingWebControls:EditModePanel runat=server id=”EditModePanelA” PageDisplayMode=”Display“>

<SharePointWebControls:FieldValue runat=”server” id=”RichImageFieldValue” FieldName=”PublishingPageImage”/>


<PublishingWebControls:EditModePanel runat=server id=”EditModePanelB” PageDisplayMode=”Edit“>

<PublishingWebControls:RichImageField ID=”RichImageField” FieldName=”PublishingPageImage” runat=”server”></PublishingWebControls:RichImageField>




leave your comment