manage a multilanguage website

Anders Aleborg 35 posts 67 karma points

Sep 28, 2012 @ 10:15

General

Hi,

we have a website in 3 languages. Current setup is:

Content
- Swedish (host header: www.domain.se)
- - Page 1
- - Page 2
- Danish (host header: www.domain.dk)
- - Page 1
- - Page 2
- English (host header: www.domain.com)
- - Page 1
- - Page 2

The Danish and English websites are related to the swedish website and if we create a web page in swedish then a corresponding page is created in the danish and english websites as well.

So far all good, now to the problem, each website has about 800 pages, managing this is a hell.
The most ideal way for us to manage this would be to have it like this:

And a page that lists all pages and languages and shows if it's translated or not and if it's published.
Is this doable at all? Or do I need to do some serious digging and hacking in the whole core?

Copy Link

Giorgos Grispos 145 posts 179 karma points

Sep 28, 2012 @ 10:50

Hi,

Actually there are two ways to have a multilingual website with Umbraco the one you're using and the 1 on 1 way which is the screenshot you've post.

In my opinion the way you've set up this kind of website is the proper one. Read this article for more information on Umbraco and multilingual websites

http://webmove.be/home/blog/blog/2011/august/multilanguage-websites-with-umbraco-part1

Cheers, Giorgos

Copy Link

Anders Aleborg 35 posts 67 karma points

Sep 28, 2012 @ 11:00

Thanks Giorgos,

The thought of my screenshot was to have the related nodes that is currently in other nodes displayed as tabs under the "main" node instead, the setup would be the same but you can see all the languages in one page.So when a node is opened in swedish tabs are created for all availble languages and the page that is related to the current node is displayed in the correct language tab.

The way we have set it up now allows us to have correct URL:s for each language which is important but the pages are still related to each other. I want to keep that way but still have all management in one page instead of three :)

I saw a plugin that displays the related pages when editing a page, like that but instead of just linking to it why not bring the whole editing in to the same page?
http://our.umbraco.org/projects/backoffice-extensions/viziozrelationships

Copy Link

Giorgos Grispos 145 posts 179 karma points

Sep 28, 2012 @ 11:09

Andres,

That means that you should dig very deep to Umbarco core, not sure how and if can be done. Maybe a core developer of Umbraco can give you moer info on that.

I wouldn't reccommend you an approach like this, thing ahead, upgrades etc. Maybe the best way is to start working with the api and create a custom admin rather than starting breaking or changing things to the core. I've created a couple of custom panels for some of our clients and it's not a huge work that needs to be done but of course you need time to feel familiar with the api and custom admin is an extra work though.

Cheers, Giorgos

Copy Link

Erik 18 posts 39 karma points

Sep 28, 2012 @ 14:27

I am also making a multilingual site and was planning on adding a dropdown to the bar with save and publish. This dropdown would have each language on it and would allow you to switch to the related node of the given language. That might be easier to do from a UI perspective. I have found it fairly easy to add controls to that bar and I have implemented logic to switch pages before so I know it can be done. I haven't written it yet so I can't show you any code but I wanted to share the idea.

You can pull up the edit view for a page by doing something like this from within that frame: Response.Redirect("/umbraco/editContent.aspx?id=" + selectedId);

In the ApplicationBase you can add new controls to the tab bar.

Copy Link

Anders Aleborg 35 posts 67 karma points

Sep 28, 2012 @ 23:50

so I actually solved it, might not be the best solution but it works, just got to remember to implement it again after the next update

In umbraco/editContent.aspx I added this code inside the ContentPlaceHolderID="head":

    <script type="text/javascript">
function getParameterByName(name)
{
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.search);
  if(results == null)
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

function getFrameElement() {
    var iframes= parent.document.getElementsByTagName('iframe');
    for (var i= iframes.length; i-->0;) {
        var iframe= iframes[i];
        try {
            var idoc= 'contentDocument' in iframe? iframe.contentDocument : iframe.contentWindow.document;
        } catch (e) {
            continue;
        }
        if (idoc===document)
            return iframe;
    }
    return null;
}

    if(getFrameElement().id.indexOf('framenode')){
        window.location='relatedContent.aspx?id=' + getParameterByName('id');
 }
 </script>

I then created a new umbraco controler containing one aspx file

relatedContent.aspx:

<%@ Page Title="Edit related content" Language="c#" MasterPageFile="masterpages/umbracoPage.Master"
   CodeBehind="relatedContent.aspx.cs" ValidateRequest="false" AutoEventWireup="True"
    Inherits="relatedLanguageEditor.relatedContent" Trace="false" %>
<%@ Register TagPrefix="cc1" Namespace="umbraco.uicontrols" Assembly="controls" %>
<%@ Register TagPrefix="umb" Namespace="ClientDependency.Core.Controls" Assembly="ClientDependency.Core" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<script type='text/javascript'>    
    $(function(){
        var iFrames = $('iframe');
      function iResize() {
          for (var i = 0, j = iFrames.length; i < j; i++) {
            iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
              }
         
          if ($.browser.safari || $.browser.opera) { 
              iFrames.load(function(){
                  setTimeout(iResize, 0);
               });
            
             for (var i = 0, j = iFrames.length; i < j; i++) {
                   var iSource = iFrames[i].src;
                 iFrames[i].src = '';
                  iFrames[i].src = iSource;
               }
               
          } else {
             iFrames.load(function() { 
                this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
             });
            }
        });
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="body" runat="server">
   <umb:JsInclude ID="JsInclude1" runat="server" FilePath="js/umbracoCheckKeys.js" PathNameAlias="UmbracoRoot" />
  <umb:JsInclude ID="JsInclude2" runat="server" FilePath="ui/jquery.js" PathNameAlias="UmbracoClient"
        Priority="0" />
    <umb:JsInclude ID="JsInclude3" runat="server" FilePath="ui/jqueryui.js" PathNameAlias="UmbracoClient"
      Priority="1" />
    <cc1:TabView runat="server" ID="tabControl" Width="552px" Height="692px"/>
</asp:Content>

relatedContent.aspx.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using umbraco.uicontrols;
using umbraco;
using umbraco.cms.businesslogic.web;
using umbraco.cms.businesslogic.language;

namespace relatedLanguageEditor
{
    public partial class relatedContent : System.Web.UI.Page
  {
     protected void Page_Load(object sender, EventArgs e)
      {
         var currentRelatedNodes = library.GetRelatedNodes(Convert.ToInt32(Request.QueryString["id"]));
            if (((currentRelatedNodes == null) || (currentRelatedNodes.Length == 0)) )
            {
         }
         else
          {
             Language lang1 = GetLanguage(Convert.ToInt32(Request.QueryString["id"]));
             TabPage langTab1 = tabControl.NewTabPage("<img src=\"/css/MultiLanguage/flags/" + lang1.CultureAlias.Split('-')[0] + ".png\" style=\"float:left;padding-right:4px;\" /> " + lang1.FriendlyName.Split('(')[0].Trim());
               Pane pane1 = new Pane();
              PropertyPanel panel1 = new PropertyPanel();
               pane1.Text = "<iframe src=\"editContent.aspx?id=" + Convert.ToInt32(Request.QueryString["id"]).ToString() + "\" name=\"framenode" + Convert.ToInt32(Request.QueryString["id"]).ToString() + "\" id=\"framenode" + Convert.ToInt32(Request.QueryString["id"]).ToString() + "\" style=\"width:100%;height:100%;min-height:800px;\" frameborder=\"0\"></iframe>";
                langTab1.Controls.Add(pane1);

               foreach (var d in currentRelatedNodes)
                {
                 int id = 0;
                   if (Convert.ToInt32(Request.QueryString["id"]) == d.Child.Id)
                 {
                     id = d.Parent.Id;
                     Language lang = GetLanguage(id);
                      if (lang != null)
                     {
                         TabPage langTab = tabControl.NewTabPage("<img src=\"/css/MultiLanguage/flags/" + lang.CultureAlias.Split('-')[0] + ".png\" style=\"float:left;padding-right:4px;\" /> " + lang.FriendlyName.Split('(')[0].Trim());
                          Pane pane = new Pane();
                           pane.Text = "<iframe src=\"editContent.aspx?id=" + id.ToString() + "\" name=\"framenode" + id.ToString() + "\" id=\"framenode" + id.ToString() + "\" style=\"width:100%;height:100%;min-height:800px;\" frameborder=\"0\"></iframe>";
                         langTab.Controls.Add(pane);
                       }
                 }
                 if (Convert.ToInt32(Request.QueryString["id"]) == d.Parent.Id)
                    { 
                        id = d.Child.Id;
                      Language lang = GetLanguage(id);
                      if (lang != null)
                     {
                         TabPage langTab = tabControl.NewTabPage("<img src=\"/css/MultiLanguage/flags/" + lang.CultureAlias.Split('-')[0] + ".png\" style=\"float:left;padding-right:4px;\" /> " + lang.FriendlyName.Split('(')[0].Trim());
                          Pane pane = new Pane();
                           pane.Text = "<iframe src=\"editContent.aspx?id=" + id.ToString() + "\" name=\"framenode" + id.ToString() + "\" id=\"framenode" + id.ToString() + "\" style=\"width:100%;height:100%;min-height:800px;\" frameborder=\"0\"></iframe>";
                         langTab.Controls.Add(pane);
                       }
                 }
             }
         }
     }
     private Language GetLanguage(int id)
      {
         Domain[] currentDomains = library.GetCurrentDomains(id);
          if (((currentDomains == null) || (currentDomains.Length == 0)) || (currentDomains[0].Language == null))
           {
             return null;
          }
         return currentDomains[0].Language;
        }
 }
}

Added the aspx-file to the folder umbraco and the DLL to bin and it's working fine. But it requires each language site to have it's own hostheader bound to a language.

Copy Link

Anders Aleborg 35 posts 67 karma points

Sep 29, 2012 @ 00:05

relatedContent.aspx.cs should be:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using umbraco.uicontrols;
using umbraco;
using umbraco.cms.businesslogic.web;
using umbraco.cms.businesslogic.language;
using umbraco.cms.businesslogic.relation;
using umbraco.NodeFactory;

namespace relatedLanguageEditor
{
 public partial class relatedContent : System.Web.UI.Page
  {
     protected void Page_Load(object sender, EventArgs e)
      {
         var currentRelatedNodes = library.GetRelatedNodes(Convert.ToInt32(Request.QueryString["id"]));
            if (((currentRelatedNodes == null) || (currentRelatedNodes.Length == 0)) )
            {
             AddTab("Edit",
                    "<iframe src=\"editContent.aspx?id=" + Convert.ToInt32(Request.QueryString["id"]).ToString() + "\" name=\"framenode" + Convert.ToInt32(Request.QueryString["id"]).ToString() + "\" id=\"framenode" + Convert.ToInt32(Request.QueryString["id"]).ToString() + "\" style=\"width:100%;height:100%;min-height:800px;\" frameborder=\"0\"></iframe>");
            }
         else
          {
             Language currLang = GetLanguage(Convert.ToInt32(Request.QueryString["id"]));
              string text = string.Empty;

             if (currLang != null)
                 text = "<img src=\"/css/MultiLanguage/flags/" + currLang.CultureAlias.Split('-')[0] + ".png\" style=\"float:left;padding-right:4px;\" /> " + currLang.FriendlyName.Split('(')[0].Trim();
                else
                  text = "Edit";

              AddTab(text, "<iframe src=\"editContent.aspx?id=" + Convert.ToInt32(Request.QueryString["id"]).ToString() + "\" name=\"framenode" + Convert.ToInt32(Request.QueryString["id"]).ToString() + "\" id=\"framenode" + Convert.ToInt32(Request.QueryString["id"]).ToString() + "\" style=\"width:100%;height:100%;min-height:800px;\" frameborder=\"0\"></iframe>");

             foreach (var d in currentRelatedNodes)
                {
                 int id = 0;
                   if (Convert.ToInt32(Request.QueryString["id"]) == d.Child.Id)
                 {
                     id = d.Parent.Id;
                     Language lang = GetLanguage(id);
                      if (lang != null)
                     {
                         AddTab("<img src=\"/css/MultiLanguage/flags/" + lang.CultureAlias.Split('-')[0] + ".png\" style=\"float:left;padding-right:4px;\" /> " + lang.FriendlyName.Split('(')[0].Trim(),
                                "<iframe src=\"editContent.aspx?id=" + id.ToString() + "\" name=\"framenode" + id.ToString() + "\" id=\"framenode" + id.ToString() + "\" style=\"width:100%;height:100%;min-height:800px;\" frameborder=\"0\"></iframe>");
                        }
                 }
                 if (Convert.ToInt32(Request.QueryString["id"]) == d.Parent.Id)
                    { 
                        id = d.Child.Id;
                      Language lang = GetLanguage(id);
                      if (lang != null)
                     {
                         AddTab("<img src=\"/css/MultiLanguage/flags/" + lang.CultureAlias.Split('-')[0] + ".png\" style=\"float:left;padding-right:4px;\" /> " + lang.FriendlyName.Split('(')[0].Trim(),
                                "<iframe src=\"editContent.aspx?id=" + id.ToString() + "\" name=\"framenode" + id.ToString() + "\" id=\"framenode" + id.ToString() + "\" style=\"width:100%;height:100%;min-height:800px;\" frameborder=\"0\"></iframe>");
                        }
                 }
             }
         }
     }
     private Language GetLanguage(int id)
      {
         Domain[] currentDomains = library.GetCurrentDomains(id);
          if (((currentDomains == null) || (currentDomains.Length == 0)) || (currentDomains[0].Language == null))
           {
             return null;
          }
         return currentDomains[0].Language;
        }
     private void AddTab(string tabText,string tabContent)
     {
         TabPage langTab1 = tabControl.NewTabPage(tabText);

          Pane pane1 = new Pane();
          PropertyPanel panel1 = new PropertyPanel();
           pane1.Text = tabContent;
          langTab1.Controls.Add(pane1);
     }
 }
}

Copy Link

is working on a reply...

Flag this post as spam?

Manage a multilanguage website