FANDOM


Mainpage Gallery - Set 4 Spoiler.jpg
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In felis urna, tincidunt vel erat in, dignissim lacinia eros. Vivamus porttitor dolor id felis viverra congue. Mauris at semper dolor, id accumsan nisl. Pellentesque ultrices justo quis rutrum tincidunt. Aenean efficitur egestas ligula vel luctus.
Author, Source
Template documentation (for the above template, sometimes hidden or invisible) [view] [edit] [history] [refresh]

Description

This template provides a stylized quotation layered over an image. It has additional pre-formatted attribution parameters for author and source. Note that an image must be provided to function correctly.

  • See {{Quote}} for a blockquote template without the image.

Syntax

Type {{ImageQuote|text = Quote goes here.|image = Image.extention}} on an article page, replacing the example text with the desired quotation and image.

Parameters

Required

Two parameters are required:

|text   = 

Quotation text may be user-formatted with standard wikitext. Quotation marks (“”) are not needed around the quoted material, as stylized ones already appear as part of the template (these may be removed, see the '|quoteMarks' parameter).

If left unfilled, the parameter defaults to several lines of lorem ipsum placeholder text.

Note that the amount of text is constrained by the image area, too much text will be cut off at the top. If this happens, use less text, a larger image size, or different image.

|image   = 

The image filename (including extension) must be specified, without it the template will display incorrectly. By default the template dimensions are determined by the image's size (after scaling).

If planning to create a banner-style, article-wide image, keep in mind that the current maximum (user-editable) horizontal content space is 858px wide. Images must be at least that large to fill the entire space, although images close to that max (800px wide for example) appear fine, as smaller images will center-align.

Attribution Parameters

Several optional parameters add additional functionality to the template:

|author   = 
|source   = 

These author/speaker and title/source attribution parameters are pre-formatted to appear below to quoted material, preceded with an attribution dash and separated by a comma. Wikitext may be used, so attribution may be customized.

Technical Parameters

Several parameters add inline-styling to override the template's CSS defaults.

|width   = 

By default, ImageQuote stretches fits the image and boxquote to fill available horizontal space (up to the original image's width). A defined width may be set by specifying a length, such as by |width = 300px. Using |width = 100% will force the full article width for the image, pushing other elements (such as infoboxes) below it.

|height  = 
|type    = banner

The height usually auto-scales with the image's width. A set height may be declared with the height parameter.

The value banner may be used for the type parameter instead for banner-style ImageQuotes to assign a pre-set height limit. This limit is between 200-250px, and automatically adjusts according to standard Wikia media breakpoints.

|yAdjust = ##

The visible portion of the image may be adjusted vertically using the 'yAdjust = ##' parameter. Negative values move the image up, for example 'yAdjust = -15' moves it up 15px. This is best used when the image height is reduced, either manually or for banners, as moving images without a set height will shrink the overall template's dimensions.

For now, the image is aligned along its top edge, so only use negative 'yAdjust' values. Positive ones will result in empty space at the top. Note that you do not include a unit (such as %, px, or em) - unlike the 'width' and 'height' parameters 'yAdjust' includes and is limited to pixels.

|float   = 

ImageQuote does not have float styles by default, use |float = right or |float = left with a defined width to allow text to flow around the quotation.

|quoteMarks = false

The quotation marks are on by default, but may be removed by setting the quoteMarks parameter to 'false'.

|cssID =

This parameter assigns an HTML 'id' attribute to the textbox, which may be used to create a 'frosted glass' background effect. See its section below for more details.

Dependencies

Custom CSS is used extensively to stylize this template. You may find the styles used in this wiki's site-wide CSS page.

'Frosted Glass' Background Effect

By default, the quotation is displayed with a semi-transparent black background. This should keep the text legible over the image. An optional 'frosted' background effect may be added, but requires additional steps beyond filling the cssID parameter.

For the effect to be applied, the styling must be manually added to the site-wide CSS. Each different image with the effect used with ImageQuote needs to be assigned as a background image of a unique id (targeted with the 'cssID' template parameter). Use the direct url (rather than the image file name) of the image used by the template. For example:

.imageQuote blockquote>#example {
    background-image: url(https://image.url.here);
}
Because the effect needs to be added to this wiki's site-wide CSS, styling must be edited by an admin. For testing purposes, users may add the style to their personal css page (User:<<username>>/common.css) before contacting an admin about changing the site-wide wiki css.
The above text is transcluded from Template:ImageQuote/doc; you can change it or view its history.
If you're done making changes, please refresh the text. (Why?)
You can experiment in this template's sandbox (create | mirror ) and testcases (create) pages.
Please add categories and interwikis to Template:ImageQuote/doc.
How does this work?Template Info: [usage] [subpages] [history]
Community content is available under CC-BY-SA unless otherwise noted.