Skip Navigation

Orientation of map on blog page

Travel Forums System Talk Orientation of map on blog page

  • 1
  • 2

Last Post

1. Posted by nzhamsta (Respected Member 93 posts) 5y

This is probably a silly question , but is there a way of changing the map from the standard landscape view to a portrait view? I have a map with lots of north - south travel on it and to show it all at the moment means that it is too small.

Changing the orientation to portrait would make it a lot clearer.
Thanks and please excuse the silly questions that I come up with occasionally.


2. Posted by Peter (Admin 5906 posts) 5y

Hi Glynn,

There's no real way of doing this at the moment. Any CSS hacks would be extremely cumbersome. What you can do is make your maps use the full width of your content to give them a little more room.

Try adding this rule:

.map {width:99% !important;}

Should help a little at least :)


3. Posted by nzhamsta (Respected Member 93 posts) 5y

Thanks for the swift reply.

It makes the map a lot wider but doesn't really solve the problem. With a couple of maps it is not the width that is the issue but the height.

On the insert map dialogue box, why not have an option for portrait or landscape?



4. Posted by Peter (Admin 5906 posts) 5y

I'm not against having an option to go portrait. It's just going to have to be added to the to-do list of development work, which means it could be a while before it's actually done :)

If anyone else is interested in this option though, please chime in, because that will inevitably bump it up the list.

5. Posted by Sam I Am (Admin 5588 posts) 5y

Glynn, there is one way of doing this, but it's a bit of a manual process so prone to breaking. For example if you wanted to make the height of the map on be 400px, you could add this code to your template.

#mapInnertravellerspoint_membermap_5FCD4EF0-2219-AC68-1750312D72B8369A {height:400px !important;}

However you'd need to customize it for each blog entry, so if you have a different one you also want to have at 400px high, you'd need that long string for that one as well. It can be found in the code on the page, but not exactly as straightforward as you're probably after :)

6. Posted by nzhamsta (Respected Member 93 posts) 5y

Thanks for the reply.

1. Internet Explorer (v 8). It does not work at all. The map remains the original size and shape. I deleted history and temp files but it made no difference.

2. Opera (v 11.50) / Firefox (v5.0.1). The map changes size, but does not push the text down because the space the map is being placed into has not changed in size. This means that the map covers over the text below it. I can move the text down by entering half a dozen full stops in the main blog area to force the text down. It then looks ugly in IE.

See this page (Krakow):

Template code
.map,.tp_map {width:440px;height:250px;display:block;margin:10px 0;}

  1. mapInnertravellerspoint_membermap_B3FF2026-2219-AC68-17AA24EFB56F3827 {height:400px !important;width:250px !important;}

.map .map .map {margin-left: 2px; outline: 2px solid #666; border: 2px solid #fff;}

I also notice that the map ID string changes every time the page is published.


[ Edit: Edited on 03-Aug-2011, at 17:17 by nzhamsta ]

7. Posted by Sam I Am (Admin 5588 posts) 5y

IE is known to play a little difficult, but I wonder if the issue isn't the same as the one that causes the text to sit under the map. Does this fix it:

#travellerspoint_membermap_B4A0F1EF-2219-AC68-17766ACFAF321D9D {height:400px;width:250px;}

Essentially, in addition to the "mapInnertravellerspoint_membermap_B3FF2026-2219-AC68-17AA24EFB56F3827", the outer 'wrapper' so to speak also needs to be resized. The above will in any case remove the need for the full stops in Safari/Chrome/FF/Opera (the good browsers), and hopefully also fix the issue in IE.

However it is a pain in the butt that that id changes every time you publish. Hadn't thought of that. Clearly the best way to fix this is going to be allowing the option to set the size before inserting.

8. Posted by nzhamsta (Respected Member 93 posts) 5y

Getting closer. I have removed the dots from the blog page and the template code is as follows:

.map,.tp_map {width:440px;height:250px;display:block;margin:10px 0;}
'#travellerspoint_membermap_E6093D64-2219-AC68-17295A13862906EB {height:400px;width:250px;}
'#mapInnertravellerspoint_membermap_E6093D64-2219-AC68-17295A13862906EB {height:400px !important;width:250px !important;}
.map .map .map {margin-left: 2px; outline: 2px solid #666; border: 2px solid #fff;}
'#blognav_map .map,#blognav_map .tp_map {width:495px;height:270px;margin:0 0 10px;}

Opera and Firefox: Perfect. It moves the text down and changes the size of the map to a 250 wide x 400 high px as required.
IE: It moves the text down but does not change the size or orientation of the map at all.

Suggestions for the inserting of maps:
Option 1: On the map insert dialogue, there should be a drop down with four options:
Landscape (size 400 x 250)
Portrait (size 250 x 400)
Large square (size 400 x 400)
Small square (size 250 x 250)
As each one is selected the preview changes.

Option 2: This option would be to allow the user to specify what size map they wanted by using drop down boxes for both width and height, each with a range of values between say 100 and 900. So if a user wants a map 200 high and 800 wide (lots of east/west travel) they can show it neatly and easily.

Thanks and regards,

Post 9 was removed by a moderator
10. Posted by nzhamsta (Respected Member 93 posts) 5y

Hi guys,
Any ideas why the changes to the CSS file regarding my map sizes do not work in IE? I am using IE8 (both 32 and 64 bit versions). I cannot test in IE9 as it will not install.
Many thanks,