Help:Extended Flickr Extension Syntax

From NYC Resistor Wiki
Jump to navigation Jump to search

This article is a detailed explanation on how to use the Flickr Extension for MediaWiki..

In brief, the syntax for displaying an image is:

<flickr>{photoid}|{type}|{location}|{size}|{caption}</flickr>

Only <flickr>{photoid}</flickr> is required. Most images will probably need <flickr>{photoid}|thumb|Example image caption</flickr> (and should not specify a size). The other details are optional and can be placed in any order.


Type
'thumb' / 'thumbnail' or 'frame'. Causes image to be displayed with specific formatting (see below).
Location
'right', 'left', 'center' or 'none'. Determines placement of the image on the page. Defaults to 'right'.
Size
's' (small square), 't' (thumbnail), 'm' (small), '-' (medium), 'b' (large). Defaults to '-'.
Caption
Any element which cannot be identified as one of the above is assumed to be caption text.

Detailed syntax[edit]

Type[edit]

  • "thumbnail" or "thumb": If a caption is written, it is shown below the image. Image defaults to placement on the 'right' unless overridden with the 'Location' attribute (see above).
  • "frame": If a caption is written, it is shown below the image.
  • (nothing specified): Original image size is preserved, no border is added around the image. If a caption is written, it is not shown.

Location[edit]

  • "right": Image including its box is placed on the right side of the page. The article text that follows the image flows around the image.
  • "left": Image including its box is placed on the left side of the page. The article text that follows the image flows around the image.
  • "center": Image including its box is placed in the center of the page. The article text that follows the image is placed below the image.
  • "none": Image including its box is placed on the left side of the page. The article text that follows the image is placed below the image.

Size[edit]

This attribute is based on information on this page under the heading Size Suffixes.

  • "s": A small square, size 75x75 pixels
  • "t": Thumbnail, 100 pixels on the longest side
  • "m": Small, 240 pixels on the longest side
  • "-": Medium, 500 pixels on the longest side
  • "b": Large, 1024 pixels on the longest side (N.B. this option only exists for large original images)

Caption[edit]

Any element which cannot be identified as one of the above is assumed to be caption text.

Syntax to use an image in medium size, with a caption[edit]

To use an image at default size with a caption use [[Image:Westminstpalace.jpg|frame|none|caption text]]. This is the size that Flickr uses on its image page.

Flickr Error ( Photo not found ): PhotoID 362100651


Syntax for images[edit]

Flickr Error ( Photo not found ): PhotoID 362100651

In the syntax <flickr>photoid|options</flickr> (e.g. <flickr>362100651|thumb|t|left|Buckingham Palace</flickr> shown in the left), several options can be set when including an image. Those affect the placing of the image, its size or the way the image will be presented. The options are right, left, center, none, size, thumbnail (thumb), frame, and alternate (caption) text.

Flickr Error ( Photo not found ): PhotoID 362100651

The options can be combined, and vertical bars ("|") are used to separate options from each other. The options can be put in any order. An unknown option is taken as the caption text, but appears only if thumbnail is specified: <flickr>362100651|thumb|m|right|Buckingham Palace from Birdcage Walk</flickr> (shown on the right).

Here is the description of the options other than the caption text:

right
Flickr Error ( Photo not found ): PhotoID 362100651The image is right-aligned, and text floats to the left of the image: <flickr>362100651|right|s</flickr> (shown on the right).
left
Flickr Error ( Photo not found ): PhotoID 362100651The image is left aligned, and text floats to the right of the image: <flickr>362100651|left|s</flickr> (shown on the left).
center
The image is centered, and...Flickr Error ( Photo not found ): PhotoID 362100651the text following the image starts below it: <flickr>362100651|center|s</flickr> (shown above).
none
The image is put at the left, and...Flickr Error ( Photo not found ): PhotoID 362100651the text following does not float to the right (or to the left, obviously), and starts below it: <flickr>362100651|none|s</flickr> (shown above).


Notes:
Flickr Error ( Photo not found ): PhotoID 362100651The above four options are incompatible. When used combined, the last one overrides the rest: <flickr>362100651|none|right|center|left|s|</flickr> (shown on the left).
Flickr Error ( Photo not found ): PhotoID 362100651What is between the last vertical bar and the closing brackets ("]]"), void or not, is taken as the last option, and works as usual. For instance, when the last option is right, the image is right-aligned, and text floats to the left: <flickr>362100651|s|right</flickr> (shown on the right).
size
Flickr Error ( Photo not found ): PhotoID 362100651This option renders a version of the image that's [size] as per the Flickr API (e.g. <flickr>362100651|thumb|t|right</flickr> shown on the right).
Notes:
All the sizing is done by Flickr, thus there are only a few choices rather than the full range as per the in-built [[Image]] function.
thumbnail, thumb
Flickr Error ( Photo not found ): PhotoID 362100651Flickr Error ( Photo not found ): PhotoID 362100651The thumbnail (thumb) option generates a thumbnail image. It is automatically resized when the "size" attribute is not specified. Without the options left, center, and none, the image is normally on the right. If the image has a caption text, it is displayed in the lower margin. E.g. <flickr>362100651|thumb|t|right</flickr> (shown on the left) and <flickr>362100651|thumb|Buckingham Palace</flickr> (shown on the right). Note: thumbnail (thumb) cannot be used in lists.
frame
Flickr Error ( Photo not found ): PhotoID 362100651With this option, the embedded image is shown with its actual size enclosed by a frame, regardless of the "thumb" or "size" attribute, and the caption, if any, is visible in the frame. Without the options left, center, and none, the image is normally on the right: <flickr>362100651|frame|thumb|s|Buckingham Palace</flickr>.

With none of the options other than sizepx and alternate (caption) text, an embedded image is rendered inline.

text text text text text text
<flickr>362100651|thumb|m|Buckingham Palace</flickr>
text text text text text
<flickr>524523411|thumb|m|Something else.</flickr>
text text text text

gives

text text text text text text Flickr Error ( Photo not found ): PhotoID 362100651 text text text text text Flickr Error ( Photo not found ): PhotoID 524523411 text text text text

The option none can be used to have thumbnails without left- or right-alignment. This is probably most useful for tables. This is an example:

How to use none
London's palaces
Buckingham Palace Flickr Error ( Photo not found ): PhotoID 362100651 <flickr>362100651|thumb|none|t|From Birdcage Walk</flickr>
Westminster Palace Flickr Error ( Photo not found ): PhotoID 384194246 <flickr>384194246|thumb|none|t|From Albert Embankment</flickr>

Thumbnail with caption text underneath that has one or more links[edit]

Currently links in captions do not work, as at version 0.2a.

If you would like this then please leave a comment on the talk page.

<flickr>362100651|right|thumb|m|This is an example of the [[Flickr Extension]]</flickr>

Flickr Error ( Photo not found ): PhotoID 362100651


Additional caption formatting options[edit]

Additional caption formatting options are possible.

<flickr>362100651|right|thumb|<div align="center">This is <span style="color: green">Buckingham</span><br /> Palace<br /> in <span style="color: red">London</span></div></flickr>

Flickr Error ( Photo not found ): PhotoID 362100651


Compatibility considerations[edit]

The floating options left, center, and right explained above are supported by modern browsers, but have unfortunately no effect with legacy browsers. If necessary it's simple to get a floating effect also for old browsers:

Flickr Error ( Photo not found ): PhotoID 362100651
{| align="right"
| <flickr>362100651|-|Example</flickr>
|}

This code is not intended for general use, however. There are few, if any, instances where support for such legacy browsers is necessary.

Cancelling floating-around-image mode[edit]

After having had an image floating next to text, putting further text below it and again using the full width can be done with the following markup. This blocks an image from appearing next to the material following this markup, possibly due to aesthetic reasons or a change in topics.

<br style="clear:both" />

For legacy align="right" (etc.) floating this isn't good enough; legacy browsers would ignore inline CSS. To cancel floating under all conditions the following markup (valid XHTML 1.0 transitional) works:

<br clear="all" />

See also[edit]