How to place thumbnails side by side

www_euphorbia_de(Germany)November 1, 2005

To show thumbnails or simple images side by side you have to use html tags again.

1.

Begin with a frame of tags that produces a table like this.

(table)

(tr)

(td) (/td)

(td) (/td)

(td) (/td)

(/tr)

(tr)

(td) (/td)

(td) (/td)

(td) (/td)

(/tr)

(/table)

The example produces a frame of 2 rows, each beginning and ending with a tr (table row) tag, and 3 columns, each beginning and ending with a td (table data) tag. Keep in mind that the ending tags always begin with a slash.

2.

In order not to confuse the GardenwebÂs computer software I had to change

bracket "less then" against left parenthesis "(" and

bracket "larger then" against right parenthesis ")"

for this example. Before using it for own experiments you have to change that reverse.

3.

Place the tags for the thumbnails or simple images between the pairs of td tags.

4.

Use the preview to check if everything is working well.

There are some other useful tags to design your text..

(font color="red")red(/font) text

red text

(font color="green")green(/font) text

green text

(font color="blue")blue(/font) text

blue text

(b)bold(/b) text

bold text

(i)italic(/i) text, used for Botanical Names like (i)Euphorbia(/i)

italic text, used for Botanical Names like Euphorbia

Frank

www.euphorbia.de

Thank you for reporting this comment. Undo
denise_gw

Thanks, Frank! I printed this out, and I think I'll try it here to see if I get it... Pics of a few E. milii flowers...



Can you tell me why I have the large space between my text and the pics? There was only one space when I typed it out.

Denise in Omaha

    Bookmark   November 1, 2005 at 8:35AM
Thank you for reporting this comment. Undo
shrubs_n_bulbs(z8/9 UK)

Denise, you seem to have scattering of BR tags inside your table. I imagine these are pushing the pictures down, although the usage is a little odd and they might show up differently in different browsers.

Of course you don't actually need all those table tags top make your thumbnails come up in a row, they should do it automatically if the page is wide enough and provided you didn't put anything in between the thumbnail image tags that would break the line. From a purist standpoint, tables should be avoided except for displaying tabular data since it forces a layout which may be inappropriate for some viewers.

Voila, no table (note: these thumbnails are just downsized versions of the real pics 'cos I'm too lazy to upload real thumbnails for this post!):

P.S. Its also worth noting that the latest GardenWeb page layout is completely within a table, hence some of the alignment issues, just one of many things that have been completely butchered recently and would be very annoying if I wasn't using an advanced browser that de-butchers them for me ;)

    Bookmark   November 1, 2005 at 12:03PM
Thank you for reporting this comment. Undo
www_euphorbia_de(Germany)

Shrubs_n_bulbs,
this doesnÂt seem to work for me.

The way I used to use tags for thumbnails and images is as follows.

(a href="http://url_for_image1.jpg")(img src="http://url_for_thumbnail1.jpg")(/a)
(a href="http://url_for_image2.jpg")(img src="http://url_for_thumbnail2.jpg")(/a)
(a href="http://url_for_image3.jpg")(img src="http://url_for_thumbnail3.jpg")(/a)

They then appear one below the other and never side by side.
What exactly are you doing different? An easier way than creating a table would be much appreciated.

Frank
www.euphorbia.de

    Bookmark   November 1, 2005 at 1:05PM
Thank you for reporting this comment. Undo
shrubs_n_bulbs(z8/9 UK)

Frank, I suspect you are putting each image on a separate line in the HTML, so they come out on a separate line in the browser. A tiny thing, but it makes a big difference.

I'll try to show what I mean with your example, but I think it will make the screen ugly!
(a href="http://url_for_image1.jpg")(img src="http://url_for_thumbnail1.jpg")(/a)(a href="http://url_for_image2.jpg")(img src="http://url_for_thumbnail2.jpg")(/a)(a href="http://url_for_image3.jpg")(img src="http://url_for_thumbnail3.jpg")(/a)

    Bookmark   November 1, 2005 at 2:06PM
Thank you for reporting this comment. Undo
paracelsus

I think I got it. Thanks to Frank for starting the discussion and to shrubs for explaining why Franks brilliant table solution is unecessary if you just get rid of unecessary space! Tinkering showed a strategic space in between image links adds a nice white border between images. Thanks to Both of you!

    Bookmark   November 1, 2005 at 2:35PM
Thank you for reporting this comment. Undo
rosemariero(Z9 SW SUNDiegoCA)

Thanks Frank & SnB! I'm also going to save/print out these instructions. I've been posting tables over on the Garden Photo Gallery (using (center) additionally) & any steps eliminated is good by me! I haven't been using thumbnails here, because some can't view them, for whatever reason.

Glad you started this thread, Frank!
~Rosemarie

    Bookmark   November 1, 2005 at 3:08PM
Thank you for reporting this comment. Undo
jamesicus(Tucson AZ)

Frank, you wrote:

In order not to confuse the GardenwebÂs computer software I had to change
bracket "less then" against left parenthesis "(" and
bracket "larger then" against right parenthesis ")"
for this example. Before using it for own experiments you have to change that reverse.

You can use the extended character set to depict the tag enclosures as follows:

&lt; = <
&gt; = >

Thus ..... <table>

Brackets are too confusing. BTW, these depictions are functions of HTML rather than the Board software which is based on HTML 4.0.

As S&B points out, the Table element is not necessary for horizontal image layout -- it is Browser dependent in any case.

James

    Bookmark   November 1, 2005 at 5:12PM
Thank you for reporting this comment. Undo
billinsc(7B SC)

I'm not computer literate at all and the directions, while very clear to others looks like Chinese arithmetic to me. I thought I would NEVER figure out how to post pics at all!! :-) Is there any reason that I should post my pics as thumbnails rather than full size?
Bill in SC

    Bookmark   November 1, 2005 at 5:21PM
Thank you for reporting this comment. Undo
jeffrey_harris(San Diego, CA)

Being the HTML neanderthal (and my apologies to all HTML-savvy Neanderthals out there), I am afarind I don't follow this at all.

Perhaps if I printed it and studied what you've written for say, an epoch, I might get it, but what I am reading doesn't yet 'click here' in my head.'

I hesitate to ask you to put it another way, just so that Ican understand what you're writing - you've all gone to a lot of work as it is.

Is there a way of seeing the code behind the pictures?

Perhaps if I see that, combined with what Frank, SnB and James have written, the code will become understandable to me.

    Bookmark   November 1, 2005 at 5:25PM
Thank you for reporting this comment. Undo
jeffrey_harris(San Diego, CA)

Hi Bill,

I think I know that one - if you have a slow connection, and the picture is large, it will take a long time to load. Using thumbnails prevents that.

    Bookmark   November 1, 2005 at 5:35PM
Thank you for reporting this comment. Undo
jamesicus(Tucson AZ)

Jeffrey:

Here is the HTML code behind the above picture:

<img src="http://jp29.org/dihors14.JPG";>

..... the HTML element tag that designates image retrieval and display (img src) and the URL (Uniform Resource Location) address for the image (domain name on my server = jp29.org)

James

    Bookmark   November 1, 2005 at 6:04PM
Thank you for reporting this comment. Undo
jeffrey_harris(San Diego, CA)

Dear James,

Thank you, but I should have been more specific; how do I see the code for the laterally -arranged pictures above?

Or, perhaps better, do yuou know of a website that would learn me such information as to how to post pictures in such a manner as Denise and Frank did?

Thanks much!

    Bookmark   November 1, 2005 at 6:20PM
Thank you for reporting this comment. Undo
billinsc(7B SC)

Yes Jeffrey, my dial up is slow, but the idea is to post pics on the lowest camera setting for ease of loading and viewing on the forum. In fact, the forum won't accept a pic if it is too large. Even with my slow dial up, properly sized pics pop right up for me. Mine are formated like the way James just illustrated..
Bill in SC

    Bookmark   November 1, 2005 at 7:40PM
Thank you for reporting this comment. Undo
jamesicus(Tucson AZ)

Jeffrey and Bill:

The following illustrates the horizontal layout of three clickable image thumbnails. As you can see, you do not have to use the HTML table element to effect this. I have repeated just one image to simplify this demonstration. You can cut and paste the HTML code that produced this image layout (below) and substitute your own URLs/images.

<a href="http://jp29.org/disubv01.JPG";><img src="http://jp29.org/head01.JPG";></a> <a href="http://jp29.org/disubv01.JPG";><img src="http://jp29.org/head01.JPG";></a> <a href="http://jp29.org/disubv01.JPG";><img src="http://jp29.org/head01.JPG";></a>

Glossary of terms used in above code:

HTML -- Hyper Text Markup Language
A -- Anchor tag/element
HREF -- Hyper Text Reference
IMG -- image/photo
SRC -- image source
HTTP -- Hyper Text Transfer Protocol

and .....

URL -- Uniform Resource Location: the internet address at which the requested image can be found.

Please visit my Home page where you will find clickable links to basic online HTML references/resources.

James

    Bookmark   November 1, 2005 at 8:16PM
Thank you for reporting this comment. Undo
denise_gw

Jeff,

My pic site is offering the "tags" (right word??) for thumbnails. Otherwise, I would have never gotten it! Does your pic site do so? The first time I did it, I used the "tag" that makes a full-sized picture. So I ended up with 3 big pics side-by-side. Then I realized my pic site had "thumbnail tags." Tried that and, voila!... worked like a charm!

Denise in Omaha

    Bookmark   November 1, 2005 at 11:31PM
Thank you for reporting this comment. Undo
jamesicus(Tucson AZ)

Of course, a really neat way to use images in postings is to align them left and wrap the text around them as I am doing here. The thumbnail can be presented without a border as has been done here for this photograph of Discocactus subvridigriseus. The full size image can still be displayed via clicking.

The virtue of text wrapping around images is that detailed descriptions and information relating to them can be included. Plant pictured here is Discocactus crystallophilus

Of course, all this is only really necessary when a considerable amount of text, data, or descriptive information is needed to accompany multiple images. Plant pictured here is Discocactus insignis.

    Bookmark   November 2, 2005 at 12:47AM
Thank you for reporting this comment. Undo
jamesicus(Tucson AZ)

Sorry, everyone, I didn't take into account the long line wrap of the first posting when I composed the above -- it's getting late!

James

    Bookmark   November 2, 2005 at 1:00AM
Thank you for reporting this comment. Undo
alealdo(z8 Torino-Italy)

Hi All,
just a comment: this is surely appreciable, but noone on earth still writes html code that way. Because even knowing the html, it's so easy to make mistakes and soooo annoying... There are programs that write html for you while you just drag&drop the objects on the screen.
Some forums I have seen give you the possibility of customizing the text you're entering writing some html on your behalf. This is not the case of GW: IMHO the essential look of GW makes it more "professional".
Anyway, for the curious people using Internet Explorer: if you want to know how a page has been written, just click on View->source and look for the piece of text of interest. Have a good time! :)

Alessandro

    Bookmark   November 2, 2005 at 3:39AM
Thank you for reporting this comment. Undo
shrubs_n_bulbs(z8/9 UK)

Even better, select the bit of the page you are interested in, right click, and click on view selection source (don't think you can do this in IE, get a real browser!).

    Bookmark   November 2, 2005 at 5:30AM
Thank you for reporting this comment. Undo
jamesicus(Tucson AZ)

Allesandro wrote:

just a comment: this is surely appreciable, but noone on earth still writes html code that way .....

No, that is not so, Allesandro, in fact most Web authors who are dedicated to producing interoperable pages -- those that will render in all user agents -- use text editors to hand code HTML Markup. Automatic code generators ("canned" Web page software) frequently employ non-standard propriety HTML Markup that may render correctly in the more popular graphical Browsers, but not in other rendering agents.

Although these software packages are getting better at generating interoperable pages, most still fall short, not even providing alternate text for images (as we are not doing here) thus violating the requirements of accessibility for people with disabilities.

While the majority of Rendering Agents used on the Internet are Graphical Browsers that display text and images (such as MSIE, FireFox, Opera, et al), Textual Browsers that only display text and Screen Readers that read pages from left to right -- top to bottom -- and render the text as synthesized speech are also frequently employed, particularly by People with Disabilities.

The major premise of the principle of Interoperability, as advanced by the W3C, is that Web pages which contain valid HTML markup -- measured against established standards -- will function satisfactorily in all Rendering Agents. Conversely, pages that contain invalid HTML Markup with propriety tags and constructs (tag soup) -- will only function reliably in Rendering Agents designed to accommodate those tags and constructs.

To get an idea of just how many Graphical Browsers alone (therefor excluding Text Browsers and Screen Readers) are currently used on the WWW visit .....


XHTML media type test - results

..... standards complying Markup is essential to insure correct rendering in all of them, i.e. Interoperability.

The most frequently used method of checking HTML Markup for standards compliance/Web page Interoperability is to use a reliable Validator such as .....

W3C Markup Validation Service

..... most extant Web pages, composed using non-standard automatically generated Markup, will fail Validation (not interoperable). Test this GW page -- or your own -- just out of curiosity. Pages that pass Validation are interoperable (will render correctly in ALL devices) and garner accolades for the author!

James

    Bookmark   November 2, 2005 at 7:40AM
Sign Up to comment
More Discussions
What is this succulent?
A friend gave me a lot of this succulent, but she didn't...
fre2bme64
help ID opuntia from colorado
i recieved this from colorado. my friend says its seen...
cactusgrower313
Need ID on a plant in South Maui
After driving past this area or South Maui for at least...
chisue
Molding Cactus
Hello! I am very new to cacti and succulent gardening....
HelloKinzy
What kind of cacti is this?
Anyone know what type this is? Very thick and unique...
gwod1
People viewed this after searching for:
© 2015 Houzz Inc. Houzz® The new way to design your home™