Best way to handle multiple websites with similar templates, but different branding?
Hi,
I have multiple websites under one umbraco instance. Even though they are different websites that serve a different purpose, they have the same styling and pages. The only difference is the branding.
Currently, I have been sharing templates and doing razor logic to see what the domain is to determine the branding.
I was wondering if I should start splitting up the templates so I don't have to do a bunch of if else statements. My only issue with this is that it leads to more files and more duplication, but at the same time, if I decide to change one template for a site, I don't affect others.
Is this a good approach? Any ideas on how to handle this?
When you say branding, do you mean the logo? Or other things like color palette/css as well?
I would probobly do a composite "styling" doctype (if v7.4+) or add styling properties to the root node doctype (in a tab called "styling") and set these values dynamiclly through content.
Like for instance use a Media Picker for a logo and a color picker for the color palette. Or if you´d like you could have a file picker and select custom css/js for each specific root node.
If your templates needs to vary a lot in terms of html structure and such, then i quess you are on the right track with creating multiple templates, and then select the correct template for each page. You mentioned that this will lead to more files and duplication, which is true, but I think its easier to maintain two templates with less code instead of one huge template with lots of if/else/switch statement. Also try to move the code that are the same across templates into partials, and use these partials in both templates, to avoid duplications.
I really just mean the logo and some other information such as text. The css of the websites are the same (they use one stylesheet).
Currently, I was doing something like this for the logo:
@if(brand = "a")
{
//put image a
}
else if(brand = "b")
{
//put image b
}
I am also doing a similar if else for text. Are you saying it would be better if I did I created properties for the logos of the website? Would it also be better to create properties for text? I using the Grid, it is a custom css solution, so if I have little bits of text that need to change depending on the website, should I create place holders for that as well.
Exactly, so you can add a upload property on your root node (for instance "Home" doctype) called Logo and a Grid called "Text". Then instead of writing your logo and text in if/else statements, you just write:
The way I pictured it was to structure it so you have two root home nodes (BrandA, BrandB), both assigned with a unique URL and the same template and doc type.
That way you don't need two logo properties (logoA,logoB) for home nodes, you just need one logo property called logo. Then you upload different logos on each root node.
But maybe I've not understood your question correctly?
You are correct. I do have to root nodes with different names. I was thinking even though they are different, the property is shared, but now when I think about it, I shouldn't have to do an if else, it will pull the correct image or text depending on what I set on that node.
I guess my other question would now be is it worth it to have multiple templates or should I keep one and do document type properties?
Also, I actually have a partial view that is my navigation which has my logo. Is this an example where I would use recursive: true?
Yes, you are correct about the two root nodes and the properties.
Q2:
I think in this scenario I would go for one template and the brand specific properties since the two sites are sharing the same css and markup html. If it was a scenario where the two sites would look completely different markup wise, I would go with the multiple template option.
Q3:
Yes, the example you mentioned with the partial having the logo inside is correct. So you can have that partial on any subpages, and since this recursive is true it will crawl up to the root node and get the logo, that way you don't have to specify a logo for every page, just the root.
What about the scenario where there are some html differences? For example, I have 2 partials that each render a different product, so currently in my code, I have something like this:
@if(brand == "a")
{
//render partial a
}
else if(brand == "b")
{
//render partial b
}
Would you split up templates with a scenario like above?
Yes, in that scenario I would split into 2 templates, but keep the code that are shared by both template in a shared partial and include in both template. That way you avoid redundancy code.
I have successfully removed many if else statements by making use of properties as you recommended. I am really trying to avoid having multiple templates, so I had a few more questions and was curious if you agreed.
Currently, I am checking to see what site I am on by checking Request.Url.Host, but could I also create a website code property for example and use that within my template conditionally set a partial?
Also, what if instead of doing an if else to determine which partial to render, I have a property textbox that holds the name of the partial, something like productsPartial, so I just call @Umbraco.Field("productsPartial") to render the partial that I want.
In the above case, the productsPartial property might be aProducts.cshtml on one site, but bProducts.cshtml on the other
Could you move the code in your partialview into a macro partial view and then attach this macro-partial to each specific root node, either in the RTE or a Macro Container property?
This way you you treat these partials the same way as you did with the brand specific properties.
I'd say you are better off having a unique template per site.
However, you might be able to share components, e.g. having macros for your menus and breadcrumbs, pulling items from your Dictionary for multi-language sites, and inserting specific fields into your template from your DocType.
We've always done it this way and even with the duplication, it just means that you don't mess up every other template when you change one.
This is the approach I'm taking when moving our old set of sites to Umbraco.
We have the same kind of website, multiple root nodes with same templates and html but different css and images.
The different content images are managed in the Media section, so on each website we can manage different images. The static images like UI and logos have a prefix in their name and we do exactly what you do with css files.
For example : brandA_logo.png
And the brand is a property of the root node document type. To ensure no one can fill this field with a wrong value (a brand that do not exists, for example), we use a dropdownlist datatype for the brand property, so the user just has to choose which brand is used on the root node.
Yes, this is a solution, but Saied needs different structures in form of different partials on different site.
What about the scenario where there are some html differences? For
example, I have 2 partials that each render a different product, so
currently in my code, I have something like this: (Se discussion above)
What about using a macro picker to handle different structures of HTML ? It is not the best thing to do, and the macro picker seems to be old now and I don't know if it is still recommanded by the community.
So as I am going through my view and partial views, I have noticed many of the differences are images, text, or in one case a mailchimp newsletter id, so I took these out and put them into properties and now I only have one partial.
I actually have a 3rd website coming and each of them has a different google analytics code, so my first thought was to create a multi-line textbox property and then put the analytics script for each website in that property, but after seeing some of the discussion, I see that I have 2 more options:
Only store the analytics id in textbox and use that in the js script. I actually did this with the newsletter id from mailchimp.
Use the macro picker. I have never used the macro picker, so I am not sure how it works or what makes it different from just making a property to hold the analytics code for each website?
Here is where the macro picker could come in handy, but I am not sure. I have a partial view that is a vehicle search dropdown. So far for 2 sites, it has the same dropdowns (Make, Model, Year, Engine), so I have not had to create two separate partials; however, on the third website, it will only use Make and Engine for the Search, so I will need to create a 2nd partial, so this is a could case of should I use a property like I mentioned, a macro picker, or a separate template?
What did you think about my idea of having a site code instead of using Request.Url.Host? or is there another way to identify which site you are on?
Also, with a lot of things moving to properties, there may be things I don't want other users to see or to be able to change, so I was wondering if there was some package that would disable or hide tabs based on permissions.
Sorry for the long thread, but thanks for the great help,
Saied
Hi Saied.
You have to create partial views for each brand containing the proper html.
Then you create a macro per partial view, and you select in each macro the partial view file in the field "MVC partial view".
After creating a macro for each brand, you have to add to your document types a macro picker property at the places you have different html structures.
Then, on each page, you choose the macro containing the right html.
So one curiosity that I have is what does the macro partial view picker bring as an advantagebas opposed to still creating the different partial views, but instead of using the macro picker, I would use a textbox to store the name of the partial to tender on the page?
Also are partial macro views a good candidate for storing varying js scripts like analytics?
A macro picker can be used by anyone because it is safe.
And you can also reuse the macros in the Rich Text Editor.
For example, a content editor with no special skill on Umbraco can use the macro picker to choose the right macro on the right page (as the macros are well named). Having a simple textbox containing a partial view name is very dangerous and can lead to many errors.
A macro picker can be used by anyone because it is safe. And you can
also reuse the macros in the Rich Text Editor. For example, a content
editor with no special skill on Umbraco can use the macro picker to
choose the right macro on the right page (as the macros are well
named). Having a simple textbox containing a partial view name is very
dangerous and can lead to many errors.
I agree with Mohammed, storing Partialview names in a textbox does not feel like a safe way of doing this. The Macro container and macro insert in RTE is probobly a much more dynamic way to go about this, and probobly easier to implement.
Also are partial macro views a good candidate for storing varying js
scripts like analytics?
Yes, they are a good place for storing these kind of data. And if the Analytics code should vary amoung sites, you can use a macro parameter to provide the analytics code to the macro partial.
In the end, its your site and you code it however you want. If you feel like storing partialview names in textboxes then you should do that. There is not "universal right way" of coding this, whatever feels right for you.
Best way to handle multiple websites with similar templates, but different branding?
Hi,
I have multiple websites under one umbraco instance. Even though they are different websites that serve a different purpose, they have the same styling and pages. The only difference is the branding.
Currently, I have been sharing templates and doing razor logic to see what the domain is to determine the branding.
I was wondering if I should start splitting up the templates so I don't have to do a bunch of if else statements. My only issue with this is that it leads to more files and more duplication, but at the same time, if I decide to change one template for a site, I don't affect others.
Is this a good approach? Any ideas on how to handle this?
Hi Saied.
When you say branding, do you mean the logo? Or other things like color palette/css as well?
I would probobly do a composite "styling" doctype (if v7.4+) or add styling properties to the root node doctype (in a tab called "styling") and set these values dynamiclly through content.
Like for instance use a Media Picker for a logo and a color picker for the color palette. Or if you´d like you could have a file picker and select custom css/js for each specific root node.
If your templates needs to vary a lot in terms of html structure and such, then i quess you are on the right track with creating multiple templates, and then select the correct template for each page. You mentioned that this will lead to more files and duplication, which is true, but I think its easier to maintain two templates with less code instead of one huge template with lots of if/else/switch statement. Also try to move the code that are the same across templates into partials, and use these partials in both templates, to avoid duplications.
Hope this helps.
All the best / Dennis
Hi Dennis,
I really just mean the logo and some other information such as text. The css of the websites are the same (they use one stylesheet).
Currently, I was doing something like this for the logo:
I am also doing a similar if else for text. Are you saying it would be better if I did I created properties for the logos of the website? Would it also be better to create properties for text? I using the Grid, it is a custom css solution, so if I have little bits of text that need to change depending on the website, should I create place holders for that as well.
Hi Saied.
Exactly, so you can add a upload property on your root node (for instance "Home" doctype) called Logo and a Grid called "Text". Then instead of writing your logo and text in if/else statements, you just write:
The "recursive: true" will crawl upwards so that you only need to set the logo for the root node, and not every single subpage of Home.
Dennis,
Correct me if I am wrong, but if the websites have different logos, wouldn't I still need to do an if statement even with properties, something like:
The same applies to text
Hi again Saied.
The way I pictured it was to structure it so you have two root home nodes (BrandA, BrandB), both assigned with a unique URL and the same template and doc type.
That way you don't need two logo properties (logoA,logoB) for home nodes, you just need one logo property called logo. Then you upload different logos on each root node.
But maybe I've not understood your question correctly?
You are correct. I do have to root nodes with different names. I was thinking even though they are different, the property is shared, but now when I think about it, I shouldn't have to do an if else, it will pull the correct image or text depending on what I set on that node.
I guess my other question would now be is it worth it to have multiple templates or should I keep one and do document type properties?
Also, I actually have a partial view that is my navigation which has my logo. Is this an example where I would use recursive: true?
Thanks for the help, Saied
Yes, you are correct about the two root nodes and the properties.
Q2: I think in this scenario I would go for one template and the brand specific properties since the two sites are sharing the same css and markup html. If it was a scenario where the two sites would look completely different markup wise, I would go with the multiple template option.
Q3: Yes, the example you mentioned with the partial having the logo inside is correct. So you can have that partial on any subpages, and since this recursive is true it will crawl up to the root node and get the logo, that way you don't have to specify a logo for every page, just the root.
Best of luck to you with the rest of the site!
All the best / Dennis
Dennis,
What about the scenario where there are some html differences? For example, I have 2 partials that each render a different product, so currently in my code, I have something like this:
Would you split up templates with a scenario like above?
Yes, in that scenario I would split into 2 templates, but keep the code that are shared by both template in a shared partial and include in both template. That way you avoid redundancy code.
Hi Dennis,
I have successfully removed many if else statements by making use of properties as you recommended. I am really trying to avoid having multiple templates, so I had a few more questions and was curious if you agreed.
Currently, I am checking to see what site I am on by checking
Request.Url.Host
, but could I also create a website code property for example and use that within my template conditionally set a partial?Also, what if instead of doing an if else to determine which partial to render, I have a property textbox that holds the name of the partial, something like productsPartial, so I just call
@Umbraco.Field("productsPartial")
to render the partial that I want.In the above case, the productsPartial property might be aProducts.cshtml on one site, but bProducts.cshtml on the other
Thanks, Saied
Hi Saied.
Could you move the code in your partialview into a macro partial view and then attach this macro-partial to each specific root node, either in the RTE or a Macro Container property?
This way you you treat these partials the same way as you did with the brand specific properties.
I'd say you are better off having a unique template per site.
However, you might be able to share components, e.g. having macros for your menus and breadcrumbs, pulling items from your Dictionary for multi-language sites, and inserting specific fields into your template from your DocType.
We've always done it this way and even with the duplication, it just means that you don't mess up every other template when you change one.
This is the approach I'm taking when moving our old set of sites to Umbraco.
What I have done in similar situations is load a brand specific style sheet in the head section for the items that different across brands
IMHO, this is the right way to do that.
We have the same kind of website, multiple root nodes with same templates and html but different css and images.
The different content images are managed in the Media section, so on each website we can manage different images. The static images like UI and logos have a prefix in their name and we do exactly what you do with css files.
For example : brandA_logo.png
And the brand is a property of the root node document type. To ensure no one can fill this field with a wrong value (a brand that do not exists, for example), we use a dropdownlist datatype for the brand property, so the user just has to choose which brand is used on the root node.
Hi Mohammed.
Yes, this is a solution, but Saied needs different structures in form of different partials on different site.
Otherwise its a great way of fixing it.
All the best / Dennis
What about using a macro picker to handle different structures of HTML ? It is not the best thing to do, and the macro picker seems to be old now and I don't know if it is still recommanded by the community.
Yes, thats what i thought too might be a good solution. https://our.umbraco.org/forum/using-umbraco-and-getting-started/78142-best-way-to-handle-multiple-websites-with-similar-templates-but-different-branding#comment-249864
Will just have to see what Saied thinks about this approach.
Take care!
Hi Dennis,
So as I am going through my view and partial views, I have noticed many of the differences are images, text, or in one case a mailchimp newsletter id, so I took these out and put them into properties and now I only have one partial.
I actually have a 3rd website coming and each of them has a different google analytics code, so my first thought was to create a multi-line textbox property and then put the analytics script for each website in that property, but after seeing some of the discussion, I see that I have 2 more options:
Here is where the macro picker could come in handy, but I am not sure. I have a partial view that is a vehicle search dropdown. So far for 2 sites, it has the same dropdowns (Make, Model, Year, Engine), so I have not had to create two separate partials; however, on the third website, it will only use Make and Engine for the Search, so I will need to create a 2nd partial, so this is a could case of should I use a property like I mentioned, a macro picker, or a separate template?
What did you think about my idea of having a site code instead of using Request.Url.Host? or is there another way to identify which site you are on?
Also, with a lot of things moving to properties, there may be things I don't want other users to see or to be able to change, so I was wondering if there was some package that would disable or hide tabs based on permissions.
Sorry for the long thread, but thanks for the great help, Saied
Hi Dennis,
I saw this in the back office and was wondering if this is what you were referring to:
It looks like from the screenshot that it just chooses an MVC partial view, is that correct?
Is the Razor script for actually putting razor script? The textbox looks kind of small if that is what is intended.
Also, if you are able to can you explain the other settings in the screenshot and what are the parameters for?
Thanks very much again, Saied
Hi Saied. You have to create partial views for each brand containing the proper html. Then you create a macro per partial view, and you select in each macro the partial view file in the field "MVC partial view". After creating a macro for each brand, you have to add to your document types a macro picker property at the places you have different html structures. Then, on each page, you choose the macro containing the right html.
Hi Mohammed
So one curiosity that I have is what does the macro partial view picker bring as an advantagebas opposed to still creating the different partial views, but instead of using the macro picker, I would use a textbox to store the name of the partial to tender on the page?
Also are partial macro views a good candidate for storing varying js scripts like analytics?
Thanks for the help Saied
A macro picker can be used by anyone because it is safe. And you can also reuse the macros in the Rich Text Editor. For example, a content editor with no special skill on Umbraco can use the macro picker to choose the right macro on the right page (as the macros are well named). Having a simple textbox containing a partial view name is very dangerous and can lead to many errors.
I agree with Mohammed, storing Partialview names in a textbox does not feel like a safe way of doing this. The Macro container and macro insert in RTE is probobly a much more dynamic way to go about this, and probobly easier to implement.
Yes, they are a good place for storing these kind of data. And if the Analytics code should vary amoung sites, you can use a macro parameter to provide the analytics code to the macro partial.
In the end, its your site and you code it however you want. If you feel like storing partialview names in textboxes then you should do that. There is not "universal right way" of coding this, whatever feels right for you.
Take care.
All the best / Dennis
is working on a reply...
This forum is in read-only mode while we transition to the new forum.
You can continue this topic on the new forum by tapping the "Continue discussion" link below.