Custom Language selector
My standards prevent me from using the Language Selector Control as the markup that it renders is not compliant with our Web Standards. My goal is to have on my master page a Link that when I click on it switches me to the current viewed page to it's alternate language.
Example:
Page being viewed is my english home page ( url: http://localhost/home). I need my link (link text: Français) to point to my home page french URL (http://localhost/fr/accueil)
how can this be done in c# code behind
You can configure the language selector to render in a different ways.
From the docs:
"In the Display language selector as… radio button group, choose how to display the links to different languages, by selecting one of the following:
Horizontal list
Displays the language links one next to the other.
Vertical list
Displays the language links one under another.
Drop-down menu
Displays the language links in a dropdown box."
Hi Tim,
Unfortunatly, as stated, the markup that the selector renders is div-> ul-> li but my language toggle is already in an ul->li and make my layout un compliant to our standards hence the reason i need code behind logic
I'm trying to save you from unnecessary work. :)
Alright, if you need to change the markup that is actually rendered, you can do that by modifying the Layout Template. The one for the language switcher look to be:
<%@ Control Language="C#" %><%@ Register TagPrefix="sfFields" Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" %><%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %><div runat="server" id="controlWrapper"> <asp:Panel ID="errorsPanel" runat="server" CssClass="sfErrorSummary" /> <sf:ConditionalTemplateContainer ID="sfLangSelectorConditionalTemplateContainer" runat="server"> <Templates> <sf:ConditionalTemplate Left="SelectorType" Operator="Equal" Right="Horizontal" runat="server"> <asp:Repeater ID="languagesRepeater_horizontal" runat="server"> <HeaderTemplate> <ul id="langsWrapper" class="sflanguagesHorizontalList"> </HeaderTemplate> <ItemTemplate> <li runat="server" id="langHolder" class="sflanguageItem"> <a runat="server" id="langLink" href="" class="sflanguageLnk"><span runat="server" id="langName"></span></a> </li> </ItemTemplate> <FooterTemplate> </ul> </FooterTemplate> </asp:Repeater> </sf:ConditionalTemplate> <sf:ConditionalTemplate Left="SelectorType" Operator="Equal" Right="Vertical" runat="server"> <asp:Repeater ID="languagesRepeater_vertical" runat="server"> <HeaderTemplate> <ul id="langsWrapper" class="sflanguagesVerticalList"> </HeaderTemplate> <ItemTemplate> <li runat="server" id="langHolder" class="sflanguageItem"> <a runat="server" id="langLink" href="" class="sflanguageLnk"><span runat="server" id="langName"></span></a> </li> </ItemTemplate> <FooterTemplate> </ul> </FooterTemplate> </asp:Repeater> </sf:ConditionalTemplate> <sf:ConditionalTemplate Left="SelectorType" Operator="Equal" Right="DropDown" runat="server"> <div class="sflanguagesDropDownList"> <asp:DropDownList runat="server" ID="langsSelect" CssClass="sflanguagesDropDown"></asp:DropDownList> </div> </sf:ConditionalTemplate> </Templates> </sf:ConditionalTemplateContainer></div>Understand and much appreciated :)
I think it would be best to create the code in code behind in a cs file that is called from the master page as i don't want to burden the user with adding the language selector as our web standards are that a page always has to have content in both languages.
Thx for the help Tim!
Mathieu,
If you follow the same idea as in this post, you only have to change it once.
Morning Tim,
OK, I'll try this. Just to clarify a few things with you. In the backend admin section what would be my HostType? And for LayoutTemplatePath, in my project (SiteFinityApp) can I create the path at the root of the project or is there an alternative that is better? Also, with code provided above, What can or cannot be removed?
Hello Mathieu,
The HostType when changing the template of the Language selector would be: Telerik.Sitefinity.Localization.Web.UI.LanguageSelectorControl
On the second question, you can create the template in the root of the project. So for example if you template name is CustomTemplate.ascx, the path would be ~/CustomTemplate.ascx. I wouldn't advise you to remove markup from the template. You can set display none to the elements, that should not be visible, because the control might be looking for them and if you delete them, they will not be rendered in the html, which will result in errors. By setting display:none to them with css, they will be available for the control in the html, but will not be visible on the front-end.