Insert (add) RichImageField to RichHtmlField in a Page Layout

Question

I have created my own RichImageFields and RichHtmlField and a Page Layout using Visual Stuido 2102. Is it possible to insert or add RichImageFields in a RichHtmlField. My client wants to do this because it will be easier to add caption to the images (using PublishingImageCaption) inside the body of the page. 

Thanks and appreciate all kind of advice.

Answer 1

Hi,

According to your post, my understanding is that you want to add caption to the images inside the body of the page.

The following code for your reference:

<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">
	<div class="article article-left">
		<PublishingWebControls:EditModePanel runat="server" CssClass="edit-mode-panel title-edit">
			<SharePointWebControls:TextField runat="server" FieldName="Title"/>
		</PublishingWebControls:EditModePanel>
		<div class="captioned-image">
			<div class="image">
				<PublishingWebControls:RichImageField FieldName="PublishingPageImage" runat="server"/>
			</div>
			<div class="caption">
				<PublishingWebControls:RichHtmlField FieldName="PublishingImageCaption"  AllowTextMarkup="false" AllowTables="false" AllowLists="false" AllowHeadings="false" AllowStyles="false" AllowFontColorsMenu="false" AllowParagraphFormatting="false" AllowFonts="false" PreviewValueSize="Small" AllowInsert="false" AllowEmbedding="false" AllowDragDrop="false" runat="server"/>
			</div>
		</div>
		<div class="article-header">
			<div class="date-line">
				<SharePointWebControls:DateTimeField FieldName="ArticleStartDate" runat="server"/>
			</div>
			<div class="by-line">
				<SharePointWebControls:TextField FieldName="ArticleByLine" runat="server"/>
			</div>
		</div>
		<div class="article-content">
			<PublishingWebControls:RichHtmlField FieldName="PublishingPageContent" HasInitialFocus="True" MinimumEditHeight="400px" runat="server"/>
		</div>
		<PublishingWebControls:EditModePanel runat="server" CssClass="edit-mode-panel roll-up">
			<PublishingWebControls:RichImageField FieldName="PublishingRollupImage" AllowHyperLinks="false" runat="server" />
			<asp:Label text="<%$Resources:cms,Article_rollup_image_text15%>" CssClass="ms-textSmall" runat="server" />
		</PublishingWebControls:EditModePanel>
	</div>
</asp:Content>

More information is here:
http://frederik.se/how-to-sharepoint-online-branding-news-center-using-visual-studo-part-2-of-4/

Best Regards

---

Dennis Guo
TechNet Community Support

Answer 2

Thanks,
No it wasn't what I want.

I wanted to add following part of your code inside the PublishingPageContent field

<div class="captioned-image">
			<div class="image">
				<PublishingWebControls:RichImageField FieldName="PublishingPageImage" runat="server"/>
			</div>
			<div class="caption">
				<PublishingWebControls:RichHtmlField FieldName="PublishingImageCaption"  AllowTextMarkup="false" AllowTables="false" AllowLists="false" AllowHeadings="false" AllowStyles="false" AllowFontColorsMenu="false" AllowParagraphFormatting="false" AllowFonts="false" PreviewValueSize="Small" AllowInsert="false" AllowEmbedding="false" AllowDragDrop="false" runat="server"/>
			</div>
		</div>

Answer 3

Hi,

This is the test result in my environment.

The RichImageField and RichHtmlField are two different WebControls, so we can not add the RichImageField control into the RichHtmlField control.

Best Regards

---

Dennis Guo
TechNet Community Support