```## tabid=examples titletext='SimpleWiki examples' subjecttext='SimpleWiki Examples' navigationmarkup=examplesnav menuid=images <> == Images == |:p div float:right:|%s smaller%//[[Local:display/article/imagesexamples|view source markup]]// |:p posting:|posted November 21, 2009 Images are inline markup. ==== Image Markup ==== Image markup is similar to link markup, except it uses curly braces rather than square brackets. The basic format for images is {{{{{imageurl | caption | title }}}}}. The caption becomes the //alt// attribute of the //img// html element, and shows up if the picture file is not found by the browser. The //title// shows up as a popup when the user floats the mouse over the image. So {{{{{http://www.celos.ca/wiki/uploads/Issues/Kidscobbing2.jpg | Kids cobbing | Part of the work of building the cob playground}}}}} results in this (try floating the mouse over the image to see the popup text): (:div sidebar-right width:320px font-style:italic:) As a technical point, I added a %s font-style:normal%{{{|:p nop:|}}}%% paragraph decorator at the beginning of the line that has the image markup. This means "no paragraph" and prevents unwanted paragraph markup from being generated. (:divend:) |:p nop:|{{http://www.celos.ca/wiki/uploads/Issues/Kidscobbing2.jpg | Kids cobbing | Part of the work of building the cob playground}} |:b spacer:| ==== Putting a frame around a picture ==== |:p nop:|%i rframe%{{http://www.celos.ca/wiki/uploads/Issues/Kidscobbing2.jpg | Kids cobbing | Part of the work of building the cob playground}} As a special case, you can add an image frame decorator to the beginning of the picture, which will result in the image floating, and the image caption being used for the picture caption. So\\ {{{%i rframe%{{http://www.celos.ca/wiki/uploads}}} {{{/Issues/Kidscobbing2.jpg | Kids cobbing | Part of the work of building the cob playground}} }}} results in the image at the right. Note the "i" for "image" in the decorator. You can make the frame float left or right by using the {{{lframe}}} or {{{rframe}}} decorators. To just float a picture, use the decorators {{{%i float:left%}}} or\\ {{{%i float:right%}}} |:b spacer:| ==== Including a Link in the picture caption ==== %i lframe%{{http://www.celos.ca/wiki/uploads/Issues/Kidscobbing2.jpg | Kids cobbing. See %l newwin%[[http://dufferinpark.ca | Dufferin Park Website]]\\ for more information. | Part of the work of building the cob playground}} You can include link markup in the picture caption. So\\\\ {{{%i lframe%{{http://www.celos.ca/wiki/uploads}}}\\{{{/Issues/Kidscobbing2.jpg | Kids cobbing. See}}}\\{{{%l newwin%[[http://dufferinpark.ca | Dufferin Park Website]]\\ for more information. | Part of the work of building the cob playground}} }}}\\\\ gives the image at the left. Note the line break markup ({{{\\}}}) before "for more information." to break the line size to fit the picture. |:b spacer:| ==== Making both the caption and the image a live link ==== (:div rframe:) |:p nop:| ```--------start of link to image------ ``%l newwin% ``[[http://dufferinpark.ca ``|{{http://www.celos.ca/wiki/uploads/Issues/Kidscobbing2.jpg ``|Kidscobbing2.jpg ``|Part of the work of building the cob playground}}]] ```---------start of caption with link ------ ``\\%s smaller%Kids cobbing. See ``%l newwin% ``[[http://dufferinpark.ca ``| Dufferin Park Website]] ``\\ for more information. (:divend:) To make both the image and the link clickable, use this markup: {{{ (:div rframe:) |:p nop:| ```--------start of link to image------ ``%l newwin% ``[[http://dufferinpark.ca ``|{{http://www.celos.ca/wiki/uploads/Issues/ ``Kidscobbing2.jpg ``|Kidscobbing2.jpg ``|Part of the work of building the cob playground}}]] ```---------start of caption with link ------ ``\\\\%s smaller%Kids cobbing. See ``%l newwin% ``[[http://dufferinpark.ca ``| Dufferin Park Website]] ``\\\\ for more information. (:divend:) }}} So working from the outside in: * Create a {{{(:div:)...(:divend:)}}} block with the "rframe" (or "lframe") decorator to create the floating block * place a {{{|:p nop:|}}} decorator at the beginning of the next line, to prevent unwanted paragraph element generation (thus preventing an unwanted trailing margin under the caption) * create a link, with the image link as the caption * within the image link, create a title for the popup text (optional), and no caption (the url address will be assigned to the {{{img alt}}} attribute in case the picture is not found by the browser) * add line break markup ({{{\\}}}) after the outer link to start the visible caption on the next line * add the visible caption, including a separate link there. Note that the {{{(:div ...:)}}}, {{{(:divend:)}}} and {{{|:p nop:|}}} markups have to be physically at the beginning of their lines in the source text. In practice you can just copy the markup above and change bits of it to suit your needs. ==== Alternate looks ==== (:div imagebox-right:){{http://celos.ca/wiki/uploads/CELOS/skating.jpg | Skating | Skating at dufferin rink}}\\Skating (:divend:) For a different look you can use the imagebox div class to surround the image (see right). This is written as: {{{ (:div imagebox-right:) {{http://celos.ca/wiki/uploads/CELOS/skating.jpg | Skating | Skating at dufferin rink}}\\Skating (:divend:) }}} |:b spacer:| Or you can apply style classes directly to images: ```------------ one row table -------------- |%i image-bordered-left% ``{{http://celos.ca/wiki/uploads/CELOS/skating.jpg ``| Skating | Skating at dufferin rink}} ``|%i shadow-outer% ``{{http://celos.ca/wiki/uploads/CELOS/skating.jpg ``| Skating | Skating at dufferin rink}} ``|%i shadow-inner% ``{{http://celos.ca/wiki/uploads/CELOS/skating.jpg ``| Skating | Skating at dufferin rink}}| These images are written as (in order) (:ul:) (:li:) {{{ %i image-bordered-left% {{http://celos.ca/wiki/uploads/CELOS/skating.jpg | Skating | Skating at dufferin rink}} }}} (:liend:) (:li:) {{{ %i shadow-outer% {{http://celos.ca/wiki/uploads/CELOS/skating.jpg | Skating | Skating at dufferin rink}} }}} (:liend:) (:li:) {{{ %i shadow-inner% {{http://celos.ca/wiki/uploads/CELOS/skating.jpg | Skating | Skating at dufferin rink}} }}} (:liend:) (:ulend:) %i width:300px height:50px border:'5px solid blueviolet' float:right% ``{{http://celos.ca/wiki/uploads/CELOS/skating.jpg ``| Skating | Skating at dufferin rink}} Or of course you can apply arbitrary styles directly to the image, as at the right. The markup: {{{ %i width:300px height:50px border:'5px solid blueviolet' float:right% ``{{http://celos.ca/wiki/uploads/CELOS/skating.jpg ``| Skating | Skating at dufferin rink}} }}}