Jump to content

Editing Wikitext/Pictures/Tiled Images

From Wikibooks, open books for an open world
 
Other pages
The Quick Course
Images in Containers

Pelargonium: 'Geranium'; 300x225 pixels

Pink Gerbera: 300x225 pixels

Tiled Images

All in a Line

I

mages are easily placed in a line without the use of an image container, and most associate this kind of line-up with the notion of floating images; that is to say, if one too many of these images is added, the last one will just float to another page position rather than anchoring itself where it was put. The simplest method for an image line-up depends on limiting the image options to the minimum. Specify only the image names and their sizes, and disregard all other options, otherwise the method might become problematic. The image syntax can be written all in one line, or in successive lines, and an example of the coding to use has been included in a drop-box for the adjacent line-up of images.

Notice that the example shown has no captions, since captions can only be used in the frame or thumbnail format. However, by using templates such as Noframeleft for the images in such a lineup, tiled images with captions can be obtained. A set of these templates has been made to include all of the image positions.

A thin dividing space has been made between adjacent images by inserting a single space character between the image definitions. To set the images edge to edge without any space between them, simply omit the space characters. Because we rarely want to start an image line-up at the left margin of the page, it is useful to have a means of padding out the images. In fact, a transparent, blank image has been uploaded to the image collection for that purpose; it is called Padding.gif, and it can be sized on the page like any other image. Refer to the code notes for an example of its use. (Another method, capable of precise positioning, is described in the next section).

Images are rarely the size that you would prefer them to be and this is especially the case when the images are set side by side. There is a method to get the images standardized. Consider the image line-up. Because these images were greatly different in their initial shapes, and their exact dimensions were laborious to find, it was decided to set their heights to be the same, and to allow the widths to be scaled accordingly. The method to do this, shown in the code box below, is to specify the important dimension exactly, in this case the height, while greatly exaggerating the size of the less important dimension, the width. Note that some dimension for width is required, but its exact value need not be known. The software will use the smaller and more practical possibility, ignoring the implied larger scaling. In this way the vastly different shapes can be scaled without having to make calculations based on both width and height.



Press for the all-in-a-line' code
Extract from the Code Listing:

[[Image:Padding.gif|50px]]
[[Image:Nymphaea tetragona.jpg|500x226px]]
[[Image:Chamomile@original size.jpg|500x226px]]
[[Image:Krokus-kih.jpg|500x226px]]

or:

[[Image:Padding.gif|50px]][[Image:Nymphaea tetragona.jpg|500x226px]] [[Image:Chamomile@original size.jpg|500x226px]] [[Image:Krokus-kih.jpg|500x226px]]


Notes on the code:

Use either of these two listings in the Sandbox to produce a straight
line-up of the three images. They do not have any frames around them.
In fact, they must use only the file name and the size for this method
to work.

For the second of the listings, (all written in one line), a space can
be left between the image definitions to produce a white space. If the
space is missed out, then the edges will meet.

It is possible to tile a white blank image with the others, to produce
page spacing, and this has been done here to set the distance of the
first image from the margin by 50 pixels. A better way, and a bit
more complicated, is to place the images with an HTML inline style,
using position properties called Relative Positioning.

Some have used a table to solve image spacing problems, and tables have
been useful in the past owing to their profusion of formatting choices.
If images are placed into the cells of a table, and the borders made to
vanish, then the width of unused cells can be used to invisibly adjust
the spacing between the images. Captions can also be placed in the
cells beneath each image.

Other methods exist too; the image gallery, for example. Examples of
these other methods will be shown in the sections below.


Relative Positioning

M

ost image positioning is restricted to the three preset locations. These of course are, left, right, and center. However, with the help of a little in-line HTML, images, tables, text paragraphs and other structures can be placed anywhere on the page. In particular, this means that an image can be placed at a point relative to its position as expected by other code. To explain further, if the usual position for an image is at the left margin, according to the syntax used, then the addition of relative positioning code allows it to be shifted relative to that point, up or down, right or left, even beyond the margin. The pixel values for the vertical and horizontal shifts specify the exact extent of the displacements.

The main problem with this method, apart from its complexity, is that it will not deliver wrapped text for the placements. Like centered images, the text is restricted to following-on. Another problem concerns frames for the images; because shifting is applied to images within their immediate containers, all types of borders must be avoided. As a result of losing frames and thumbnail borders, all of the captions have to be arranged by other means.

To expand on the matter of text having to follow-on, it is perhaps helpful to note the sequence of events for relative positioning. When the image, box or other structure is first placed, it is allocated to the space without relative positioning; that is, as if the shifting code were missing or set to zeros. Then the code shifts the item to its new position by the amounts given by the shifting code. A space is left at the first location, equal in size to the item that was moved. When the next line of text or another item is added to the work, it must take account of that allocated space. As a result, when a large image or block of text is moved vertically, the following text cannot be located until after the gap.

Although it is theoretically possible to shift tables and large blocks of text, the above mentioned limitation renders it less useful. Relative positioning works best when the shifts and texts are fairly small. The method meets these requirements for shifting images that are initially tiled across the page, and for overlapping effects.

An example of overlapping images is given below. The normal position for these images, without shifting,would have been in-line, starting from the left margin, and the padding image has been omitted for this example. The images were shifted from these tiled positions by the required amounts to create the overlapping effect.

The paleness or density of images can be varied. The code for twenty percent opacity can be found in the drop-box along with an example of shifted text.




Press for the Relative Positioning code
Extract from the three image code listing:
<span style="position:relative;left:100px;top:0px">[[Image:Nymphaea tetragona.jpg|500x226px]]</span>
<span style="position:relative;left:50px;top:-20px">[[Image:Chamomile@original size.jpg|500x226px]]</span>
<span style="position:relative;left:0px;top:-40px">[[Image:Krokus-kih.jpg|500x226px]]</span>

Extract from the text overlap code listing

<span style="opacity:0.2;filter:alpha(opacity=20)">[[image:gerbera_pink.jpg|center|340px]]</span>
<span style="font-family:lucida handwriting;line-height:1.5em;color:maroon;font-size:16pt;position:relative;left:300px;top:-225px">'''''This is the text.'''''</span>


Notes on the code:

Paste this code section into your editing window or the Sandbox to reproduce the overlapping image layout. These image lines would normally be shown as tiled inline, starting at the left margin, since there are no padding images used in it.

The normal position is modified by the mark-up code's left and top properties. In the first image line left=100 pixels and top=0 pixels, means that the left side of the image will be placed 100 pixels beyond the point otherwise expected for it; it would usually be at the left margin so it will be at 100 pixels from it to the right.

The top of the image will not be shifted. The left of the second image, which would usually be to the right of the first image anyway, need only be shifted 50 pixels onward from its usual position, to produce the effect. The second image is also moved upwards by 20 pixels. Relative to its usual position, the third image is not shifted along at all, but is shifted upwards by 40 pixels.

The important point in relative positioning is to note that they are positional changes that are specified; changes from the positions that the images could reasonably have been expected to occupy based on their other coding. Images placed at the left of the page are the easiest to calculate new positions for.

It is also possible to use the property right, meaning the right side of the image and bottom, meaning the bottom edge of the image. Their use follows similar reasoning to that above. The overlap, if any, is determined by the order that the image code was written; the last placed will be on top, with the first on the bottom. The stacking order can be changed with
further coding.

If images are placed in frames, the positioning is likely to become confused or fail altogether. Positioning within frames such as table cells or boxes is possible, but the shifting will take place within the image container.


This is the text.

Mouse-hover Images

Gerbera:Move the mouse on the image.

Two images can occupy the same space provided that only one of them is seen at a time. The usual way to do this is to hover the mouse over the default image, the one that is stable and seen most of the time. When this is done the alternative image replaces it, and when the mouse is removed, the original image reappears.

This technique is available using the template HoverImage. The names of the two images are provided to the template, along with any other image options, and two separate captions can be made. The method works best with images that are the same shape; that is, have the same aspect ratio. Then, with one base size setting, both will be scaled to the same size. When the shapes differ and the images change, the height or the width of the presented work changes too. Because the text adjusts in wrapping around the images the effect is not necessarily bad, and you can see this best for yourself by trying it in the sandbox. As was suggested elsewhere on this page, a method exists to allow fixing of image heights instead of widths, and this might suit some better.

In all other respects the template can be used as if it were a single image, with for example, text wrapping for the left and right positioned images. The template can be used in any situation that needs the full image syntax; for example, it could not be used to build gallery entries, since these use only an abbreviated image syntax; the image name. It could be used on a page, within tables and drop-boxes, and anywhere else that can make use of the full image syntax.

The image on the right shows an example of the template's use; more detailed notes can be found on the page Templates Ready to Use, and on the template page itself.

Other Pictures Pages

See also