Editable Image in Master Page

Matt Hennig asked on April 25, 2014 11:57

I put an editable image in my master page (Kentico v7.0.72 portal) and I expected that content editors would be able to edit the image on each page in the site that inherits this master page. But, the only place the editable image appears to be editable is when on the master page... what am I missing? Isn't the point of the editable image web part that it allows content editor to put a different image on each document in the site that uses that template? Does that not work when placed in a master page? Thanks, Matt

Recent Answers

Brenden Kehren answered on April 25, 2014 22:34

Since it is not at the same level or using the same template, no that's not the case. This works when you use the same template across many pages. Never been a fan of editable text or images because they don't give a user much power (publish to/from dates, navigation properties, meta data, etc.) whereas with a doc type you get a lot more.

The alternative would be to place a repeater on the page, add a new field to the Page doc type for the image and simply have your users upload an image there or select a URL and bind that repeater to the image field.

1 votesVote for this answer Mark as a Correct answer

Matt Hennig answered on April 29, 2014 08:34

Thanks Brenden for the ideas but I don't want this image in the individual page templates, it is part of the master page. I just want it to be customizable depending on the area of the site that you are on... for example, it is an ecom site, so each top level category needs its own banner image and the product pages will need to inherit the image from their parent category. Then certain content areas of the site will have different banner images, again their child pages will inherit their parent image (and allow for them to have their own if needed).

The problem is the location of the banner image is embedded in a place that can't easily be moved out of the master page without putting tons of redundant HTML and web parts in all the individual page templates on the site. That would be a pain to maintain because changes to one thing would require a change to all the templates instead of just the master page. I also looked into the possibility of multiple page placeholders on the master page but no matter what I did, the second place holder would not show in any pages. Any idea if multiple place holders would be a possible solution to this problem? Have you ever implemented them before and if so, maybe you can point me in the right direction. I found very little documentation on them and the articles I found did not help me get it working.

thanks again!

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on April 29, 2014 16:38

So if the image is set per top level page, then technically it isn't part of the master page. I'd suggest putting a repeater on the master page and set a default image location then dynamically set it for each top level page as the user navigates to it. Then if you use inheritance, the sub pages to each top level page will automatically pick up that image within the page itself. The image won't be within the template, it will be set on the document itself.

I've done this where the HTML was similar to what you mentioned and it worked pretty slick, just a matter of thinking through the solution and making sure it was easy for the content editors to work with and dynamic. I haven't used multiple placeholders before but wished I had found this article prior to a couple projects I worked on, it would have helped tremendously. Although its for 5.5, I believe the concept is the same for v6 and v7.

0 votesVote for this answer Mark as a Correct answer

Matt Hennig answered on May 1, 2014 09:23

Hi Brenden,

Thanks again... one more question though. I followed your idea of putting a repeater in the master page. Then I used the "Menu item image" field to set an image to override the default on any page. It works perfectly except I can't figure out a way to make it inherit the image from beyond just the parent. Here is what I did in the transformation:

<img alt="" src="<%# IfEmpty(CurrentDocument.DocumentMenuItemImage, IfEmpty(CurrentDocument.Parent.DocumentMenuItemImage, "/media/images/page-banner.jpg", CurrentDocument.Parent.DocumentMenuItemImage), CurrentDocument.DocumentMenuItemImage) %>?width=960&height=136" >

Like I said, this works for a parent and child but not when there are three or four levels. I was not sure what you meant about using inheritance in your last reply because that is what I was trying to do originally with the editable image in the master page... and as we have discussed, that does not work. Maybe I am just not understanding your suggestion fully.



0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on May 2, 2014 12:23

Matt, you'll set the repeaters path property not the image src property. I should say if there isn't an image then you'll do what you did in the transformation and set a default image (page-banner.jpg). But your path will be set in the repeater itself.

You can set the path property to use the current document by using "." You might use this in conjunction with NodeLevel and the IfImage() method to determine the path for the repeater.

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.