Difference between revisions of "Template:img/doc"

From WikiCorporates
Jump to navigation Jump to search
(Miscellaneous Examples)
(Keep Images Within a "li")
Line 38: Line 38:
 
{{Info Small|ntb=1|img={{img|Ineos-Petroineos.png|134|30}} }}
 
{{Info Small|ntb=1|img={{img|Ineos-Petroineos.png|134|30}} }}
 
</pre>
 
</pre>
 +
 +
==== Floating an image opposite an Info Box ====
 +
<div style="display:flex;">
 +
<div style="flex:1 1 auto;">In Apr.2016, a further group of 8 pro-Brexit economists founded {{em|Economists for Brexit}}. After the EU referendum, the group morphed into {{em|Economists for Free Trade}}. {{wbl|https://web.archive.org/web/20160622142913/http://www.economistsforbrexit.co.uk/|EconomistsForBrexit.co.uk}}</div>
 +
<div style="flex:0 0 90px;">{{img|Economists-for-Brexit.png|77|30|float=none}} &nbsp; </div>
 +
</div>
 +
Good example on [[Economists for Free Trade]]. See developer.mozilla.org for detailed info on [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox flexbox].
  
 
==== Keep Images Within a "li" ====
 
==== Keep Images Within a "li" ====

Revision as of 13:49, 16 September 2020

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

In Apr.2016, a further group of 8 pro-Brexit economists founded Economists for Brexit. After the EU referendum, the group morphed into Economists for Free Trade. EconomistsForBrexit.co.ukArchive-org-sm.svg
 

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

Need to pay £4 for this
{{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]}}