Image Garden

HTMLx
 HTMLx2
 HTMLx3
 HTMLx4
 CSSx1
 Image Garden
 Photo Sandbox
 
==Image Garden==
 
This space will be used to experiment with picture sizing/placement.
This is mostly about trying to gain some control over where a photo<BR>
ends up on a wiki page and how we can get text ... such as poetry ...<BR>
to be to the left or right of them.<BR>
This is a WIP (work in progress) ... more added as we figure it out.<BR>
It is pretty rough at the moment but you are more than welcome to<BR>
take a look and copy any code you might think will work for you.<BR>
I only ask that you please don't do any editing within the page as<BR>
this is intended to eventually be incorporated into a Photo Tutorial. 
<BR>
If you wish to experiment ...<BR>
feel free to copy the code and paste it into the 
Photo Sandbox<BR> and Play to your heart's delight.<Br>
Should you discover something Wonderful ... please let us know Here.<BR>
I thank you for your indulgence. 
----
 
Feel free to click on the discussion tab above to ask questions ...<BR>
comment or give suggestions.<BR>
thanks. -ts-
----
See also the latest thinking on Casading Style Sheets<BR>
http://en.wikipedia.org/wiki/Cascading_Style_Sheets
 
==Resize==
 [[Image:Manature2.jpg|320px|]] [[Image:Manature2.jpg|240px|]]
 [[Image:Manature2.jpg|160px|]] [[Image:Manature2.jpg|80px|]]
 will result in:
 
==Placement==
 [[Image:Still.jpg |thumb|right| Right]]
thumb|right| Right
 [[Image:Still.jpg |thumb|center| Center]]
thumb|center| Center
 [[Image:Still.jpg|thumb|left| Left]]
==caption in photo==
 [[Image:Still.jpg|200px|thumb|This is Sam's Still Pic]]
hmmmm ... seems we can't add a caption AND resize. ?!?!?!
We CAN have caption and resize, if we use THUMB as a keyword.
 [[Image:Still.jpg|200px|thumb|left|This is Sam's Still Pic]]
It even works with alignments...
==gallery==
To display a series of photos in a gallery, there is a simple method using wiki markup and Cascading Style Sheets: Float all images in the gallery to the left, and clear their left float at the end to avoid having the images run into following content.
<nowiki>
[[Image:Manature2.jpg|128px|thumb|left|manature2]]
[[Image:Manature3.jpg|128px|thumb|left|manature3]]
[[Image:Manature4.jpg|128px|thumb|left|manature4]]
[[Image:Mud3.jpg|128px|thumb|left|Mud3]]
[[Image:Manature11.jpg|128px|thumb|left|manature11]]
[[Image:Manature1.jpg|128px|thumb|left|manature1]]
[[Image:Manature8.jpg|128px|thumb|left|manature8]]
[[Image:Manature10.jpg|128px|thumb|left|Mud3]]
[[Image:Ice2.jpg|128px|thumb|left|Ice2]]
</nowiki>
Advantages: Adapts to screen width by wrapping, simple markup.
 
==new gallery syntax==
<gallery>
Image:Wiki.png
Image:Wiki.png|Captioned
Image:Wiki.png
Image:Wiki.png|[[Wikipedia|Links]] can be put in captions.
Image:Wiki.png
Image:Wiki.png
</gallery>
Image:Wiki.png
Image:Wiki.png|Captioned
Image:Wiki.png
Image:Wiki.png|Links can be put in captions.
Image:Wiki.png
Image:Wiki.png
==pics in tables==
spans 3 columns 	spans 3 columns 	spans 3 columns
Placing Pics in Tables	Placing Pics in Tables	Placing Pics in Tables
stumps me 	 	[[Image:Manature1.jpg|thumb|none|100px|missouri river]]
Splash 	 	[[Image:Manature8.jpg|thumb|none|100px|missouri river]]
Placing Pics in Tables 		
Cold!<BR> just wondering if we can do lots of text both before and after the pic and have it wrap.		now here we are to<BR>
the right of the pic and of course wanting to see if it wraps here as well as it does on the left side.
ladybugs 		[[Image:2b1v .jpg|thumb|none|100px|LadyBugs]]
==pics in invisible tables==
set border="0" and they disappear.
Text to the Left ...	Text on the Top Text Below	Text to the Right.
We can put text here ... <BR>
we can use linebreaks<BR>
:and indent ...<BR>
::use color.<BR>
and format our Text<BR>
Words should also wrap the text when it bumps up against the photo.<BR>
i imagine padding and spacing can also be utilized to pad the text from
the edge of the invisible borders.<BR>
Well alright then! ;)		
http://peace.wikicities.com/images/1/1b/Paper.gif