I got the idea for this thread from another going on at the moment, and thought it be good to have one dedicated to sharing bits of code or tricks that you think others might find useful, rather than waiting for folks to ask about something. Most of us don't actually know much HTML (I knew none a year ago) and this might be useful for both new and more experienced folks who might run across something they'd like to use.

The purpose of this thread is not to ask questions (unless you don't understand someone else's post). It is to share what you have learned.

To kick it off with a couple of items I've already posted elsewhere...

This website will let you preview a page you designed in various screen resolutions, to confirm it looks ok for everyone else.

http://www.screen-resolution.com/#



Another tip: Place this code after sections of a page with large or several photos on the right, but not a lot of text. This forces the end of the section to be below the photo, rather than just below the text, so photos don't get pushed down to other sections.

<BR CLEAR=ALL>

So a page looks like this:

http://c0278592.cdn.cloudfiles.rackspac ... 643060.jpg

and will not look like this:

http://c0278592.cdn.cloudfiles.rackspac ... 643059.jpg

Note- I left those simply as links intentionally.

done - http://www.w3schools.com/

Deleted.

Here are two great articles by <a href=http://www.summitpost.org/user_page.php?user_id=27417>thephotohiker</a>.

<a href=http://www.summitpost.org/article/276346/setting-tables-using-html.html>Setting Tables Using HTML</a>

<a href=http://www.summitpost.org/article/253395/pictures-in-tables-on-pages-oh-my.html>Pictures in Tables on Pages. Oh My!</a>

An excellent tip from <a href=http://www.summitpost.org/user_page.php?user_id=23627>MoapaPk</a>, that I've found very beneficial numerous times.

MoapaPk wrote:VI: find a page that behaves in the way you want, then right click on it and pick "view source" (that's the PC route). Then you get to see what other people did with html, to achieve that effect.

This site is useful for selecting a color, if you want a lighter or darker shade, or something in between two other colors:

http://vrx.net/sys/gradient?r1=ff&g1=ff ... capbut=off

Post pictures any size:

I picked this trick up using the "View Source" method in MoapaPk's quote above. Sometimes (well often) I want to put a photo on a mountain page but not be constrained to a thumbnail, small, medium, or large size. There are several ways to insert photos adjusted to any size you want, but the code below will let you do so while keeping the standard frame around the photo we are all familiar with on SummitPost pages.

Code: Select all

<center><div class='thumb'><div style='width:XX2px;'><a href='/view_object.php?object_id=??????'><img width='XX0' src='/images/large/??????.jpg'></img></a><div class='thumbcaption'><div class='magnify' style='float: right;'><a href='/view_object.php?object_id=??????' title='Enlarge'><img src='/images/layout/abby/magnify.gif' alt='Enlarge'></img></a></div>PHOTO CAPTION HERE</div></div></div></center>


This places the photo in the center. For left or right alignment take out the word center and the symbols around it at the beginning and end of the code. The replace 'thumb' with 'thumb tright' or 'thumb tleft'.

Replace the ?????? with the image ID. Replace the XX0 and XX2 with the image width you would like, keeping the first number two pixels higher ('500' and 502px for example). Then write the photo caption in the appropriate place.

Replace the XX0 and XX2 with the image width you would like

In that particular example, you're making the user download the Large size photo (src='/images/large/??????.jpg) which is 1000px wide, then asking their browser to resize it to 500px, which is exactly the size you'd get if you just downloaded the Medium size in the first place. Better to pick the cource image that's closest to the size you want.

nartreb wrote:

Replace the XX0 and XX2 with the image width you would like

In that particular example, you're making the user download the Large size photo (src='/images/large/??????.jpg) which is 1000px wide, then asking their browser to resize it to 500px, which is exactly the size you'd get if you just downloaded the Medium size in the first place. Better to pick the cource image that's closest to the size you want.

Actually, on my pages I often use this bit of code for panoramas, and make the photo 740 pixels wide, so use 740 and 742 in the numbers.

Yes- perhaps I used the bad example with the 500... This only makes sense if you want to do something in between large and medium photo sizes.

mrchad9 wrote:Post pictures any size:

I picked this trick up using the "View Source" method in MoapaPk's quote above. Sometimes (well often) I want to put a photo on a mountain page but not be constrained to a thumbnail, small, medium, or large size. There are several ways to insert photos adjusted to any size you want, but the code below will let you do so while keeping the standard frame around the photo we are all familiar with on SummitPost pages.

Code: Select all

<center><div class='thumb'><div style='width:XX2px;'><a href='/view_object.php?object_id=??????'><img width='XX0' src='/images/large/??????.jpg'></img></a><div class='thumbcaption'><div class='magnify' style='float: right;'><a href='/view_object.php?object_id=??????' title='Enlarge'><img src='/images/layout/abby/magnify.gif' alt='Enlarge'></img></a></div>PHOTO CAPTION HERE</div></div></div></center>


This places the photo in the center. For left or right alignment take out the word center and the symbols around it at the beginning and end of the code. The replace 'thumb' with 'thumb tright' or 'thumb tleft'.

Replace the ?????? with the image ID. Replace the XX0 and XX2 with the image width you would like, keeping the first number two pixels higher ('500' and 502px for example). Then write the photo caption in the appropriate place.

I occasionally include a photo from my own website in my SP pages, photos that I did not upload to SP for various reasons.

I just use img src=" photo url " enclosed in the less-than and greather-than brackets.

Bang, that's it.

Here's one such page:

http://www.summitpost.org/trip-report/3 ... otos-.html

You can govern the width by adding in width=500 or something like that.

A good tip from Bob Sihler on using a custom object to set up a workshop so that you can fine tune a page before creating the actual one...

Bob Sihler wrote:You can't save a draft here, but some of us have created custom objects so that we can work on a page at our own pace, set up pictures, etc. When ready, we just copy and paste the whole thing as a new page.

Here is my custom object. I am working on a route page right now and will be done in a couple days-- http://www.summitpost.org/custom-object/307131/page-workshop.html.

Thank you for asking and showing concern about this. Too many members, new and veteran alike, put up incomplete pages and take their sweet time finishing them. It is a real pet peeve around here.

Something I picked up and did recently (it may be elsewhere in this forum, not sure) is for links to jump to other parts of your page, similar to how the Contents bar works. So in my case I wanted to have the letters of the alphabet displayed as links, such that when someone clicked a letter the page would jump down to a bunch of things beginning with that letter.

To create the links I did: <a href="#A">A</a>, <a href="#B">B</a>, etc.
Then to mark/tag the point on the page where I wanted the links to jump to I placed <a id="A"></a>, <a id="B"></a> etc. as appropriate. These tags aren't actually visible though.

It would also be useful for example saying "as mentioned below" with a tag to the lower section you mean.