SummitPost.org

is there a code i can add that will automatically resize a page to display to the width of the monitor? i just redid the mount williamson page, and because i did it on my super huge laptop, it looked great there, but now when i view it on my work monitor, i have to scroll from side to side because my work monitor is smaller.

example here:

http://www.summitpost.org/mount-williamson/152023

I did a bit of experimenting, and found that this works well in Google Chrome:

Code: Select all

<div align="center" class="image" style="max-width:30%;">
  <a href="/view_object.php?object_id=843149">
    <img src="/images/medium/843149.jpg" alt="Descending ..." style="width: 100%;">
  </a>
  <br>
  <span class="caption">Descending a steep snow field on Schesaplana</span>
</div>

This code is very similar to the code that's generated when you use the regular way to insert an image in page on SP (using the new editor). There are two key differences:

1) The div around the image doesn't have a fixed size, but is set at 30% instead. That's 30% of whatever else it is contained by. To use the full width of whatever it is contained by, simply use 100%.
2) The image width is not fixed either, but set at 100% instead. That's 100% of whatever it's contained by, which, in this case, is the div!

So, if your page is too wide, then, instead of using fixed size table cells, divisions and images, simply use relative ones where appropriate. You get the idea.

Whether this works in other browsers, and in older versions, I don't know. You'll have to test that yourself.

By the way, the example uses the medium version of the image. In your case, you may want to use the original version instead. However, if your original images are very big, remember that all the MB's are downloaded first, and only resized by the browser of whoever is viewing the page. If you use a lot of big images that way, loading the page will be slowed down; with a slow connection slowed down to the point of being useless. I've looked at SP pages while travelling, and not all internet cafés in the world have a fast connection...

Good luck and please let us know what you find,
Cheers, Rob

rgg wrote:I did a bit of experimenting, and found that this works well in Google Chrome:

Code: Select all

<div align="center" class="image" style="max-width:30%;">
  <a href="/view_object.php?object_id=843149">
    <img src="/images/medium/843149.jpg" alt="Descending ..." style="width: 100%;">
  </a>
  <br>
  <span class="caption">Descending a steep snow field on Schesaplana</span>
</div>

This code is very similar to the code that's generated when you use the regular way to insert an image in page on SP (using the new editor). There are two key differences:

1) The div around the image doesn't have a fixed size, but is set at 30% instead. That's 30% of whatever else it is contained by. To use the full width of whatever it is contained by, simply use 100%.
2) The image width is not fixed either, but set at 100% instead. That's 100% of whatever it's contained by, which, in this case, is the div!

So, if your page is too wide, then, instead of using fixed size table cells, divisions and images, simply use relative ones where appropriate. You get the idea.

Whether this works in other browsers, and in older versions, I don't know. You'll have to test that yourself.

By the way, the example uses the medium version of the image. In your case, you may want to use the original version instead. However, if your original images are very big, remember that all the MB's are downloaded first, and only resized by the browser of whoever is viewing the page. If you use a lot of big images that way, loading the page will be slowed down; with a slow connection slowed down to the point of being useless. I've looked at SP pages while travelling, and not all internet cafés in the world have a fast connection...

Good luck and please let us know what you find,
Cheers, Rob

gah. i'm sure i'm gonna gum things up, but i'll give this a try from my home computer tonight. thanks. or not, depending on how badly i mangle my work hahaha

brichardsson wrote:gah. i'm sure i'm gonna gum things up, but i'll give this a try from my home computer tonight. thanks. or not, depending on how badly i mangle my work hahaha

Well, before destroying your mountain page, you can experiment away with a code fragment in a separate (custom) object. Then, if and when it looks all right in the major browsers, you can copy it. That's the way I do it when trying something unusual. And with the new editor, trying stuff is much easier and faster. I just switch a lot from HTML to WYSIWYG mode without submitting the custom object in between.

When it looks good in Google Chrome, I submit the changes, then I check the result in IE. I have not done that in this case, that's your job , but for HTML stuff in my own pages I do. And if it's good in Chrome but not in IE, either I fiddle some more in Google Chrome, or I edit it in IE directly. I usually check it in Firefox after that, although I sometimes forget - that's because it's been a long time since something looked good in Chrome and IE, but not in Firefox. In fact, I can't even remember the last time.