Fandom

Peace Elements

Image Garden

189pages on
this wiki
Add New Page
Talk2 Share
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
ends up on a wiki page and how we can get text ... such as poetry ...
to be to the left or right of them.

This is a WIP (work in progress) ... more added as we figure it out.
It is pretty rough at the moment but you are more than welcome to
take a look and copy any code you might think will work for you.

I only ask that you please don't do any editing within the page as
this is intended to eventually be incorporated into a Photo Tutorial.

If you wish to experiment ...
feel free to copy the code and paste it into the Photo Sandbox
and Play to your heart's delight.
Should you discover something Wonderful ... please let us know Here.

I thank you for your indulgence.


Feel free to click on the discussion tab above to ask questions ...
comment or give suggestions.
thanks. -ts-


See also the latest thinking on Casading Style Sheets
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:


Still Still Still Still

Placement

[[Image:Still.jpg |thumb|right| Right]]<br style="clear:both;" />
Still

Right


[[Image:Still.jpg |thumb|center| Center]]<br style="clear:both;" />
Still

Center


[[Image:Still.jpg|thumb|left| Left]]<br style="clear:both;" />
Still

Left


caption in photo

[[Image:Still.jpg|200px|thumb|This is Sam's Still Pic]]
Still

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]]
Still

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.


[[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]]
<br style="clear: left"/>

Advantages: Adapts to screen width by wrapping, simple markup.


File:Manature2.jpg
File:Manature3.jpg
File:Manature4.jpg
File:Mud3.jpg
File:Manature11.jpg
File:Manature1.jpg
File:Manature8.jpg
File:Manature10.jpg
Ice2

Ice2


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>

pics in tables

spans 3 columns
Placing Pics in Tables
stumps me
File:Manature1.jpg
[[Image:Manature1.jpg|thumb|none|100px|missouri river]]
Splash
File:Manature8.jpg
[[Image:Manature8.jpg|thumb|none|100px|missouri river]]


Placing Pics in Tables
Cold!
just wondering if we can do lots of text both before and after the pic and have it wrap.
now here we are to

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
File:2b1v.jpg
[[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
Still
Text Below
Text to the Right.


We can put text here ...

we can use linebreaks

and indent ...
use color.

and format our Text

Words should also wrap the text when it bumps up against the photo.
i imagine padding and spacing can also be utilized to pad the text from the edge of the invisible borders.

Well alright then! ;)

Still


Paper.gif Paper

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.