Mar 10, 2005 8:23am

How do I line up several images of different sizes?

Squirt asked me to explain this tip of his:

You have several images, say 3. Each is a different size, but you want them to neatly line up across your page, like this:


In their original form, these images are all different heights: 418, 291 and 439 pixels, respectively. In order to get the images to line up you have to proportionately resize them so that they are a) all the same height and b) so that the sum total of their widths adds up to less than the width of the SU review page (700 pixels is a good guide).

How do you find out their sizes? Right click on the image and view their Properties, or SU photoblog each image and note the code.

In order to get the proportions right, you will need a calculator and a sharp pencil, a sharp brain, or an image resizing tool (such as IrfanView).

I resized the images used above as shown in the following diagrams. Note that they all end up with the same height in pixels [180], but each image was resized by a different percentage.





Continued below.....

Mar 10, 2005 8:22am

How do I line up several images of different sizes? (continued)


Once you have calculated the right sizes - and it can take some time! - you simply combine the photoblog code for the three images (see here for examples on How to photoblog more than one image and How do you arrange your images vertically or horizontally?).

You need to edit the photoblog code to replace the original image width and height with your newly calculated sizes, like this:

<a rel="nofollow" href="http://www.lope.ca/prints/107/page.html"><img border=0 width=600258 height=418180
src="http://www.lope.ca/prints/107/107_slacker.jpg">

Not an easy technique, but a highly effective one if you want to make your blog stand out.


Note: it is very important that you resize your images proportionately - if you do not, the images will be squashed and/or stretched, and that is no way to treat good art!

Mr-Helpful would like to thank Lope for kindly giving permission to use some of his fine art in this demonstration.

Mar 2, 2005 1:04pm

How do they do that?

Some stumblers seem to do some really clever things on their pages and you might wonder, "how do they do that?" You can ask them, of course, or you can learn a trick that lets you find out for yourself.

It's a browser feature called "View Source" - and if you are using Firefox user you will find it provides a major advantage over Internet Explorer.

If you are using Internet Explorer:

Go to the page that you are interested in and right-click on the page. A menu will pop up, and you want to select the View Source option. This will launch a new window that gives you all the code that was used to construct the page you were looking at.

The bad news: there can be an awful lot of code to look through and it can be hard to work out which is the bit you are really interested in. Here's a tip - find a bit of text on the page that is near to, or in the section that you are interested in. Now find that same bit of text in the "View Source" page. Also, you might want to consider printing the "View Source" page out and using a highlighter pen to work out what does what.

If you are using Firefox:

Exactly the same deal as for Internet Explorer, but here the option is called "View Page Source." Firefox has another little trick up it's sleeve, though: if you use the mouse to highlight the part of the page you are interested in and then right-click, you will find an option called "View Selection Source". This time you will find the pop-up window highlights the bit of code you are interested in - much easier to work out what is going.

These two screen-grabs show you the Firefox option.

Mar 2, 2005 10:58am

How do you put text beside an image?

Many people place their text comments beside an image which they have photoblogged, rather than above or below it. Like this:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla. Proin augue. Quisque lacus. Vestibulum ornare. Aenean bibendum. Integer risus felis, rhoncus eget, semper nec, elementum ac, nisl. Aliquam pharetra, ipsum non iaculis tempus, turpis massa adipiscing mauris, sed vulputate dolor elit ac nisl.

You make this happen by adding a bit of code - the align tag - to your photoblog code. In the following example, I simply photoblogged the SU logo of the main pages and then edited the code it creates to add the bits [in red] to it:

<a href="http://www.stumbleupon.com/"><img align=left border=0 width=100 height=100 src="http://www.stumbleupon.com/images/smalllogo2.jpg"><font face="georgia">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla. Proin augue. Quisque lacus. etc. etc. etc. <font>

If you put align=right instead then the image would be on the right of the text - it is the image which is aligned to the text!

You can, if you wish, have several images in one comment area, some to the right of text and some to the left [see the example below]. You'll want to play with this a little until you are happy with the results - a good tip is to put a couple of
tags in between each text/image combination to separate them.

As always, play and delete the results if you don't like them. :o)

Mar 2, 2005 10:56am

An example of several images with text aligned left and right of them:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla. Proin augue. Quisque lacus. Aenean bibendum. Integer risus felis, rhoncus eget, semper nec, elementum ac, nisl. Aliquam pharetra, ipsum non iaculis tempus, turpis massa adipiscing mauris, sed vulputate dolor elit ac nisl.




Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla. Quisque lacus. Aenean bibendum. Integer risus felis, rhoncus eget, semper nec, elementum ac, nisl. Aliquam pharetra, ipsum non iaculis tempus, turpis massa adipiscing mauris, sed vulputate dolor elit ac nisl.




Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla. Quisque lacus. Aenean bibendum. Integer risus felis, rhoncus eget, semper nec, elementum ac, nisl. Aliquam pharetra, ipsum non iaculis tempus, turpis massa adipiscing mauris, sed vulputate dolor elit ac nisl.




This works quite simply by following the instructions above. The first image uses align=left the second uses align=right and the third align=left. There are a couple of those <br> tags in between each combination of image and text.

One word of warning: there is a limit to the number of characters (about 2000) you can post in a each comments box - which is why this example is shown in a separate comment. [spaces are characters too!]

Feb 28, 2005 8:45am

How do you indent text?

If you would like to indent your text, to create some space away from the left margin, you can use a couple of methods:

The first employs non-breaking spaces which are coded like this: &nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Creates a nice indent

Produces this result:

     Creates a nice indent

This method can be a bit laborious; you need the same number of non-breaking spaces at the front of each new line and they have a habit of disappearing each time you (re)edit.

An alternate method is to use the un-numbered list facility, like this:

<ul>Create as many
lines as you
like down the page
aligning the lines as you feel fit
(this might be good for
poetry!)
and then, after the last line
put one of these things
</ul>

and you get this result:

Create as many
lines as you
like down the page
aligning the lines as you feel fit
(this might be good for
poetry!)
and then, after the last line
close the UL tag

Credit for this brilliant tip goes to Ashlyn

Nov 17, 2004 5:25am

How do you link to a sound file in your blog?

You can link to sound files in exactly the way you link to another web page, or create a link to an image. The file must be on the web - not on your own computer! The link usually opens whatever sound player is installed on the computer to play the file.

First, you need to find out the "url" or location of the sound file you want to link to. One way to do this is to "right click" on the link to the sound file and look at it's Properties. Make a note of - or copy and paste - the http: location address shown there.

Here's an example:

clearance.mp3

The code used to create the example above looks like this:

    <a href="http://www.at94.dial.pipex.com/Stumblelinks/clearnce.mp3">clearance.mp3</a>

Use the same technique to link to other types of file too.

Tip: always test your links to check they work before someone else discovers they don't!

Oct 26, 2004 12:06pm

How do you change the font typeface in your blog?

Mr-Helpful thinks you should be careful doing this - use it frugally and it can create great impact, but used too often it can just be annoying. You should also consider that other stumblers might not have the font that you choose installed on their PC.

This is set in Garamond, which is a reasonably common type-face.

This is set in Papyrus, which might not be installed on every PC (or MAC).

The code used to create the example above looks like this:

<font face="Garamond">This is set in Garamond, which is a reasonably common type-face.</font>

<font face="Papyrus">This is set in Papyrus, which might not be installed on every PC (or MAC).</font>

Oct 12, 2004 1:24am

How do you create links to other stumblers in your comments?

Creating links to other stumblers - or any other web page - is quite easy. All you need to do is insert a piece of HTML code either side of the word that you want to make into a link, like this:

    Here is a link to Geoff - he is one of the founders of Stumbleupon.

The code used to create the example above looks like this:

    Here is a link to <a href="http://geoff.stumbleupon.com/">Geoff</a> - he is one of the <a     href="http://www.stumbleupon.com/founders.html">founders</a> of Stumbleupon.

Note that the words that form the links : Geoff and founders have an "HTML tag" either side of them. This is very important, be sure to follow these examples exactly or you may get some surprising results!

You should also note that it is important to put to the http:// bit in front of the stumbler's address. If you don't, something very different happens, as in this example:

    Here is a link to Geoff - he is one of the founders of Stumbleupon.

    Here is a link to <a href="geoff.stumbleupon.com/">Geoff</a> - he is one of the <a     href="http://www.stumbleupon.com/founders.html">founders</a> of Stumbleupon.


Another quick way to create a link to another stumbler - or any other web page - is to simply type (or copy and paste) the address of their page straight into your comments, like this:

    http://geoff.stumbleupon.com

and you will get this result:

     geoff.stumbleupon.com [geoff.stumbleupon.com]

Oct 9, 2004 12:56am

How do I center my images? (Method 1)

A couple of people have asked how they might "center" the images that they have photoblogged. Normally, you'd use HTML tables to do this - but you can't currently use tables in your SU blogs. Here's a couple of other ways to achieve the same end:

Photoblog your image, and then you are going to need to edit the comment to insert a small piece of extra code:

<a href="http://www.stumbleupon.com/"><img src="space.gif" border="0" height="0" width="70"> width=100 height=100 src="http://www.stumbleupon.com/images/smalllogo2.jpg">

This code effectively inserts a small, invisible "spacer" image into your blog. You can decide it's width but it's height must always be =0 .

Now, this won't exactly center your image - it will only "tab" it away from the left-hand edge of the comment box. It's up to you to decide how far by altering the width setting.

This example uses the code above - with width=70: