Skip Navigation

Blog with different languages

Travel Forums System Talk Blog with different languages

1. Posted by manolo84 (Respected Member 9 posts) 3y

Hello

I have a question or maybe more a feature request...

I write my travel blog mainly in english but from time to time I write posts in french (to please some of my friends and my parents) and I was wondering if there could be some indications/categories to specify in which language a post is being written in.

For example, at the moment I am using the tag "francais" to all my posts written in french so that people could click on it in the tags cloud on the right part of the blog and have access to all the posts written in french.

But I was wondering if there could be something a bit nicer, for example at the time when you write the post, when you select the country or the other options, there could be a drop down list to set the language the post is being written in. Then a little flag of the country would appear next or under the subject of your post and there would be the same flags (for example US/UK flag and french flag) on the right side, with a number indicating how many posts have been written in this or this language, this would allow for an easier search and would be nicer visually.

Do you think such a thing is possible?

Many thanks!

Manuel

2. Posted by Sander (Moderator 4811 posts) 3y

I think mixed language blogs are a bit of an edge case, and putting in a whole lot of infrastructure to make them work better is not going to be high up on the priority list for the admins. And I think for single language blogs, showing visual indicators of the language is also not all that useful.

However, I do think your use of the tag system is inspired here.

Try adding the following to your user stylesheet (blog settings -> template), and see what you think of the result:

.entrydetails .tag_link[href$="/français/"]:after {

position: absolute;

right: 0;

top: 0;

display: block;

content: "";

width: 90px;

height: 60px;

background: -webkit-linear-gradient(to right, #002395 29px, white 30px, white 59px, #ED2939 60px) no-repeat;

background: linear-gradient(to right, #002395 29px, white 30px, white 59px, #ED2939 60px) no-repeat;

}

That's looking for all tag links ending in "/français/" at the end of a post. For each of those, it constructs a new pseudo-element, positions it in the top right corner of the post, sizes it to a rectangle of 90x60, and fills it with a background of the French flag. (Instead of using the linear-gradient technique I went for here to demo this, you could of course also use a regular image instead - background: url("http://link.to.your.image/of/the/french/flag.here") no-repeat; - you'd probably want to, as my linear gradient technique doesn't work in old versions of Internet Explorer.)

Note for future readers of this post: The above works because the watercolor template uses a position: relative on the .entry div. Other templates might need to add that manually to make it work:

.entry { position: relative; }

Similarly, you could move the "français" tag out from its regular place amongst the tagcloud, and style it separately just above or below the other tags. If you went ahead and added "english" tags to the rest of your posts, you could do the same with that. Can't give you a total number of entries out of each category, unfortunately, but it'd still go a long way toward doing what you want.

(Let me know if you'd want to experiment further along this route, and I'd be happy to put in some time to set up examples for you - wouldn't get around to it before the weekend, though.)

[ Edit: Edited on 01-Oct-2013, at 11:33 by Sander ]

3. Posted by manolo84 (Respected Member 9 posts) 3y

Hey thanks for that Sander!

I actually ended up using a standard picture with a bit of text and with a grey background like on the blog (because the transparency is not supported for .png). An interesting fact though, the blog system doesn't seem to like the special character "ç" of "français" in the tags so I had to change that tag to "french", as even when I was trying to revert back to "francais" without the special character, it would change it back to "français" with the ç .

Anyway the other thing you mentioned, setting the "french" tag above the other ones would be quite useful I think so let me know how I an do so when you have a bit of time. My CSS skills are unfortunately very rusty...

Thanks!

[ Edit: Edited on 01-Oct-2013, at 14:51 by manolo84 ]

4. Posted by Sander (Moderator 4811 posts) 3y

Quoting manolo84

I actually ended up using a standard picture with a bit of text and with a grey background like on the blog (because the transparency is not supported for .png).

That probably happens because an uploaded photo gets "resized" (and thus re-encoded) to a certain maximum size - even if it already falls within that. If you opt to save the original photo when uploading, you should be able to use that as the background image with fully working transparency.

An interesting fact though, the blog system doesn't seem to like the special character "ç" of "français" in the tags so I had to change that tag to "french", as even when I was trying to revert back to "francais" without the special character, it would change it back to "français" with the ç .

How annoying. Sounds like there's a non-UTF-8 character set in play somewhere; sounds like way too much trouble to figure out, though, and this works just as well as a workaround. :)

Anyway the other thing you mentioned, setting the "french" tag above the other ones would be quite useful I think so let me know how I an do so when you have a bit of time.

Will do. Please bump this thread on Sunday if I haven't posted any further replies to it by then, as I might not think of it otherwise...

5. Posted by Sander (Moderator 4811 posts) 2y

Ok, here we go:

#tag_cloud {
position: relative;
}
#tag_cloud:before {
display: block;
content: "Language";
font-family: Georgia,serif;
font-size: 18px;
padding-top: 15px;
padding-bottom: 10px;
margin-bottom: 7em; /* An "em" here is 18px (due to the font-size). Decrease this to 4.5em if you only want to show a link for a single language. */
background: url("/img/11/header_line.gif") no-repeat center bottom;
}
#tag_cloud a[href$="/french/"] {
top: 5em; /* An "em" here is 14px. */
}
#tag_cloud a[href$="/english/"] {
top: 8em; /* 3em below the first link. */
}
#tag_cloud a[href$="/french/"],
#tag_cloud a[href$="/english/"] {
position: absolute;
left: 0;
margin-left: 35px; /* Space for the flag. */
font-size: 14px; /* This font-size can vary due to the number of entries in the category, so we set it manually to a fixed value. */
}
#tag_cloud a[href$="/french/"]:before {
background: url("http://photos.travellerspoint.com/27181/franceflag.png") no-repeat;
}
#tag_cloud a[href$="/english/"]:before {
background: url("http://photos.travellerspoint.com/27181/ukflag.gif") no-repeat;
}
#tag_cloud a[href$="/french/"]:before,
#tag_cloud a[href$="/english/"]:before {
position: absolute;
content: "";
top: 9px;
left: -35px; /* Identical to the margin-left above. */
width: 25px;
height: 25px;
}

What we do here is: First we relatively position the tag cloud, so that all positioning within it is relative to the tag cloud. Then we create a pseudo-element as its first child, and make it look like a header. We also create a large amount of white-space underneath this header. Then we position the "french" tag (and hypothetical "english" tag) within this newly created white-space. And then for both those tags, we create pseudo-elements, which we position to the left of the links, giving them each a background image of their respective flags.
(I've used "em" for all the sizing, so that distances will scale along when someone uses a larger font-size.)

[ Edit: Edited on 05-Oct-2013, at 12:48 by Sander ]

6. Posted by manolo84 (Respected Member 9 posts) 2y

Thanks a lot man, this looks really great and is really what I was looking for, at the exception of the number of times a tag is being referenced, but I don't think that's possible purely using CSS.

So thank you! :)