Template:Overlaid images/doc

This template is intended to allow an overlay of a foreground ("front") image over a background ("back") image, with the ability to crop the result to a "frame" smaller than the background image. Both the foreground and background image should be scaleable.

This may be particularly useful for producing transparent overlays to label background images such as maps, etc.

Usage

The parameters are intended to be self-explanatory:

• The "frame" is the (cropped) area visible in the final rendered image. Set its height and width.
• "back" is the background image. Just use the filename without [[File: etc. Its height is set to determine its scale. By default its top-left corner is aligned with the top-left corner of the frame. It can be shifted right and down (these are most useful as 'negative offsets, i.e. left and up) relative to the frame. It may have its own alt text set.
• "front" is the foreground image. Just use the filename without [[File: etc. It is most useful with a transparent background, e.g. svg or png. Its height is set to determine its scale. By default its top-left corner is aligned with the top-left corner of the frame. It can be shifted right and down relative to the frame to position it over part of the background image. It may have its own alt text set. If it is against the right edge of the background image, it can also have a border set like this: |border=1px solid black, or whatever styling is desired.
• The entire grouping may have a caption which displays below the frame.

Full parameter list:

{{Overlaid images
| frame_width      =
| frame_height     =
| back_filename    =
| back_height      =
| back_rightshift  =
| back_downshift   =
| back_alt         =
| front_filename   =
| front_height     =
| front_rightshift =
| front_downshift  =
| front_alt        =
| border           =
| caption          =
}}

Test by Maproom

{{Overlaid images
| frame_width      = 501
| frame_height     = 640
| back_filename    = Staffordshire_UK_relief_location_map.jpg
| back_height      = 640
| back_rightshift  = 0
| back_downshift   = 0
| back_alt         = Relief map of Staffordshire
| front_filename   = Towns2.svg
| front_height     = 250
| front_rightshift = 0
| front_downshift  = 0
| front_alt        = locations of six towns
| caption          = The "six towns" forming what is now [[Stoke-on-Trent]]
}}

The "six towns" forming what is now Stoke-on-Trent

Attribution due to Maproom, who came up with the idea.

Example of offset overlay and floating

Commons logo over English ceremonial counties

<div style="float:right; border:1px solid grey; padding:0.3em;">
{{Overlaid images
| frame_width      = 250
| frame_height     = 250
| back_filename    = English ceremonial counties 1998.svg
| back_height      = 360
| back_rightshift  = -40
| back_downshift   = -90
| back_alt         = English ceremonial counties
| front_filename   = Commons logobanner.svg
| front_height     = 22
| front_rightshift = 140
| front_downshift  = 110
| front_alt        = Commons logo
| caption          = Commons logo over English ceremonial counties
}}
</div>