Layout with web parts

Suneel Jhangiani asked on September 18, 2015 13:23

I'm looking for some suggestions on the best way to accomplish the following:

<div class="pagebanner-container" style="[background image from PageType field]">
    <div class="breadcrumb-container">
        [Breadcrumb Web Part]
    </div>
    <div class="container">
        [layout from transformation based on PageType fields]
    </div>
</div>

As you can see I am looking to generate a DIV with a background image. I know I can do this by cloning the Breadcrumb web part and adding the relevant code to generate the pagebanner-container, but was wondering if anyone had a better suggestion?

I should explain, the concept was to create a new Base Page which all other Page Types will inherit, and then use a single PageTemplate to display a different banner / hero image on each page which the editor can upload via the Form tag. In addition they would add a Hero Title and Hero text which would be displayed by the transformation. The transformation would also use another field from the PageType to specify layout and / or animation (ie. centered & fade-in), which would be checked using If statements in the transformation to alter the layout.

I am also looking at the possibility of the banner supporting video by checking the browsers compatability using an custom function in the transformation.

The issue I am seeing, is that the Breadcrumb web part needs to sit within the transformation. Given that the Transformation can be in ASCX format is there a way to include the Breadcrumb web part and define some of the properties?

To take this a step further, I would also like to know suggestions for handling cases where we may not have these fields set and hence to use the parent page's details. Hence why I am thinking it may just be easier to write a custom web part.

Correct Answer

Maarten van den Hooven answered on September 18, 2015 19:44

Hi Suneel,

Yeah that is also possible. Therefore I said in the beginning there are many solutions possible. That is the brilliancy and what I love from Kentico.

We for example use always one PageBase that we call Metadata and all page types inherit from this “PageBase” metadata. We use this to put fields inside which we need in all other pages/documents. For example description or teaser image. Of course you can also add here the fields of the Hero Banner.

But in your example you can also create an page type for the Hero Banner and make an field in a page type where you can select the hero banner.

In our last project we have also a Hero Banner and also we have a Metadata (PageBase) page type. We put in the Metadata page type also a field to select the Hero Banner(s) you wanted.

We did it this way so you can easily add and change fields in this page type Hero Banner, if you do that in the Metadata (PageBase) you need to go through all page types that inherits from this PageBase because Kentico adds the new fields add the top that is not always what you want.

Also an advantage of separate the Hero Banner is that you can add the Hero Banners in the content tree and change the order, or you can choose the same Hero Banner for multiple pages.

The field we added looks like this:

Form control : Multiple choice because in our case we wanted to have the possibility to select more then one image for an slider on the top of the website, bit this can also be drop-down list.

Data source : SQL Query with this query

SELECT DocumentGUID, HeroBannerTitle
FROM View_HeroBanner_Joined 
WHERE NodeSiteID = {%CurrentSite.SiteID|(identity)GlobalAdministrator%}'

There are no wrong solutions you can do it both ways and both ways have there advantages and disadvantages. Good luck with developing and searching your way in Kentico.

If this answer helped you, please vote for my answer :-)

0 votesVote for this answer Unmark Correct answer

Recent Answers

Maarten van den Hooven answered on September 18, 2015 14:02 (last edited on September 18, 2015 16:19)

Hi Suneel,

I read a lot of questions and there are a lot of answers because you can go a lot of different ways. Hopefully I can help you on the way with some issues. The first part where you have two web parts with mixed HTML you can fix it easy with an web part zone.

[START WEBPART ZONE (Content before)]
<div class="pagebanner-container" style="[background image from PageType field]">
    [START WEBPART BREADCRUMB (Content before)]
    <div class="breadcrumb-container">
        [Breadcrumb Web Part]
    </div>
    [END WEBPART BREADCRUMB (Content before)]
    [START WEBPART REPEATER (Content before)]
    <div class="container">
        [layout from transformation based on PageType fields]
    </div>
    [END WEBPART REPEATER (Content after)]
[END WEBPART ZONE (Content after)]
</div>

I don't think you need some custom webpart or code, you can come a far way with Kentico itself.

What do you mean with a Page Base? What I recommend is to make an page type "HeroBanner" and here put your properties of the banner. Then add to the page types where you want to add the Hero Banner an field (dropdown or multi selector) with an selection of all the documents with the page type "HeroBanner". So you can create for example an slider transformation with images or videos. The slider I should program in jQuery.

If this answer helped you, please vote for my answer :-)

0 votesVote for this answer Mark as a Correct answer

Suneel Jhangiani answered on September 18, 2015 17:05

I don't get this bit:

Then add to the page types where you want to add the Hero Banner an field (dropdown or multi selector) with an selection of all the documents with the page type "HeroBanner".

What I meant by a PageBase is that my other Page Types inherit from this Page Type thereby having the 'HeroBanner' and other fields included.

0 votesVote for this answer Mark as a Correct answer