Shop Products
Houzz Logo Print
www_euphorbia_de

How to place thumbnails side by side

www_euphorbia_de
18 years ago

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

Comments (20)

  • Denise
    18 years ago

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


    {{gwi:484803}}
    {{gwi:484804}}
    {{gwi:484805}}

    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

  • shrubs_n_bulbs
    18 years ago

    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!):
    {{gwi:484798}}{{gwi:484800}}{{gwi:484801}}

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

  • www_euphorbia_de
    Original Author
    18 years ago

    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

  • shrubs_n_bulbs
    18 years ago

    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)

  • paracelsus
    18 years ago

    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!

    {{gwi:484806}} {{gwi:473249}} {{gwi:473250}}

  • rosemariero
    18 years ago

    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

  • jamesicus
    18 years ago

    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

  • billinsc
    18 years ago

    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

  • jeffrey_harris
    18 years ago

    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.

  • jeffrey_harris
    18 years ago

    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.

  • jamesicus
    18 years ago

    Jeffrey:

    {{gwi:484808}}

    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

  • jeffrey_harris
    18 years ago

    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!

  • billinsc
    18 years ago

    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

  • jamesicus
    18 years ago

    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.

    {{gwi:484030}} {{gwi:484030}} {{gwi:484030}}

    <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

  • Denise
    18 years ago

    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

  • jamesicus
    18 years ago

    {{gwi:484030}} 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.

    {{gwi:484032}} 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




    {{gwi:484034}} 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.

  • jamesicus
    18 years ago

    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

  • alealdo
    18 years ago

    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

  • shrubs_n_bulbs
    18 years ago

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

  • jamesicus
    18 years ago

    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

Sponsored
J.E.S. Home Improvement
Average rating: 5 out of 5 stars3 Reviews
Loudoun County's Full-Scale Construction Firm