Template:img

From WikiCorporates
Jump to navigation Jump to search

[edit] Documentation


Simple template to format and display images that have not been uploaded. Path is set to {{SERVER}}/Images/

Parameters

{{img
|image-name.svg  - filename of the image
|300             - width
|200             - height
|float           - optional. [left|right|none]. If not set, the image will float right, with margin-left=10px.
|ml              - optional margin-left. If left empty, the default is 10px.
|mr              - optional margin-right. If left empty, the default is 10px.
|pb              - optional. Padding-bottom, so can space stacked images apart.
|border          - optional border colour
|caption         - optional image caption
|round           - optional. Square images rendered round; rectangular images rendered oval.
}}

Examples

To float an image on the same line as a header:

This is a Header

<div>{{img|Internet-Security-Research-Group-Lets-Encrypt.svg|150|116}}
=== PetroIneos ===
</div>

OR

This is a Header

Note this has an underline underneath the image.
==== This is a Header ====
{{Info Small|ntb=1|img={{img|Ineos-Petroineos.png|134|30}} }}

Floating an image opposite an Info Box

<div style="display:flex;"><br/>
 <div style="flex:1 1 auto;">Lorem ipsum dolor sit amet...</div>
 <div style="flex:0 0 90px;">{{img|Economists-for-Brexit.png|77|30|float=none}}   </div>
</div>

Gives:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 

Good example on Economists for Free Trade. See developer.mozilla.org for detailed info on flexbox.

Keep Images Within a "li"

This will keep images within the list item, even when opposite another image, table, or whatever. For a good example, see Pets at Home Group plc

  • Pets-at-Home-Pets-at-Home.svg
    Pets at Home: the omni-channel retailing business operates from the Pets at Home "one-stop-shop" store network and website.
  • Pets-at-Home-Groom-Room.svg
    Groom Room: dog and cat grooming services, through Groom Room salons, are found within many Pets at Home stores, offering full dog grooming, baths, microchipping and nail clipping.
<ul style="overflow:auto; overflow:hidden;">
<li>[[File:Pets-at-Home-Pets-at-Home.svg|49x30px|right]] {{em|b=1|Pets at Home:}} the omni-channel retailing business operates from the [http://www.petsathome.com/ Pets at Home] "one-stop-shop" store network and website.</li>
<li>[[File:Pets-at-Home-Groom-Room.svg|47x30px|right]] {{em|b=1|Groom Room:}} dog and cat grooming services, through [https://www.petsathome.com/shop/en/pets/in-store-services/new-groom-room Groom Room] salons, are found within many Pets at Home stores, offering full dog grooming, baths, microchipping and nail clipping. </li>
</ul>

Miscellaneous Examples

Pets-at-Home-Pets-at-Home.svgFinancial Weapons of Mass Destruction
{{img|file=1|Pets-at-Home-Pets-at-Home.svg|100|61|border=#808080
|caption=Financial Weapons of Mass Destruction]}}
Financial Weapons of Mass Destruction
{{img|Financial-Weapons-of-Mass-Destruction.png|100|100|border=#808080
|caption=Financial Weapons of Mass Destruction]}}

{{img|Cannabis-Law-Reform.svg|103|100|border=#808080}}

Inline, with defaults margin-left=5px, margin-right=5px: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Inline, with user-set margin-left=0px, and default margin-right=5px: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Float right, with default margin-left=10px: {{img|Compass.svg|60|20|border=red}} Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Float right, with user-set margin-left=20px and margin-right=50px: {{img|Compass.svg|60|20|ml=20|mr=50|border=red}} Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Float left, with defaults margin-left=0px and margin-right=10px: {{img|Compass.svg|60|20|float=left}} Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

A Caption
Float left, with defaults margin-left=0, margin-right=10px, Caption and Border: {{img|Compass.svg|60|20|float=left|border=#808080|caption=A Caption}} Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Round image: {{img|Andrew-Bridgen.png|67|80|round=1}} takes all the same parameters as above. Round images work best, but rectangular ones are also fine. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Nestle-2015-horiz.svg

Stacked images:
{{floatRightStacked
|sep=0
|[[File:Nestle-2015-horiz.svg|200x56px]]
|{{img|Princes-Gate-Cariad-Coffee.svg|200|87|float=none|ml=0|mr=0}}
}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Captions

{{img|Toy-Factory-Wages.png|200|217|border=red
|caption=[http://www.chrismadden.co.uk/cartoon-gallery/exploitation-of-factory-workers-in-the-developing-world/ Need to pay £4 for this]}}