Return to the Cacti Gallery Forum | Post a Follow-Up

 o
How to place thumbnails side by side

Posted by www_euphorbia_de Germany (My Page) on
Tue, Nov 1, 05 at 6:59

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 Gardenwebs 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


Follow-Up Postings:

 o
RE: How to place thumbnails side by side

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...







Free Image Hosting at www.picturetrail.com Free Image Hosting at www.picturetrail.com Free Image Hosting at www.picturetrail.com

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


 o
RE: How to place thumbnails side by side

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 ;)


 o
RE: How to place thumbnails side by side

Shrubs_n_bulbs,
this doesnt 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


 o
RE: How to place thumbnails side by side

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)


 o
RE: How to place thumbnails side by side

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!


 o
RE: How to place thumbnails side by side

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


 o
RE: How to place thumbnails side by side

Frank, you wrote:

In order not to confuse the Gardenwebs 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


 o
RE: How to place thumbnails side by side

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


 o
RE: How to place thumbnails side by side

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.


 o
RE: How to place thumbnails side by side-Bill's answer

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.


 o
HTML Code

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


 o
RE: How to place thumbnails side by side

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!


 o
RE: How to place thumbnails side by side

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


 o
image display

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


 o
RE: How to place thumbnails side by side

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


 o
Text wrapping around multiple images

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.


 o
Spacing misalignment

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


 o
RE: How to place thumbnails side by side

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


 o
RE: How to place thumbnails side by side

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!).


 o
RE: How to place thumbnails side by side

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


 o Post a Follow-Up

Please Note: Only registered members are able to post messages to this forum.

    If you are a member, please log in.

    If you aren't yet a member, join now!


Return to the Cacti Gallery Forum

Information about Posting

  • You must be logged in to post a message. Once you are logged in, a posting window will appear at the bottom of the messages. If you are not a member, please register for an account.
  • Posting is a two-step process. Once you have composed your message, you will be taken to the preview page. You will then have a chance to review your post, make changes and upload photos.
  • After posting your message, you may need to refresh the forum page in order to see it.
  • Before posting copyrighted material, please read about Copyright and Fair Use.
  • We have a strict no-advertising policy!
  • If you would like to practice posting or uploading photos, please visit our Test forum.
  • If you need assistance, please Contact Us and we will be happy to help.


Learn more about in-text links on this page here