Templates download/Image cards: Difference between revisions

VisualWikitext
(Created page with "<div class="downloadarea"> <span class="getButton">Download</span> 450x450px|link=Special:FilePath/banner-example.png </di...")
 
No edit summary
Tag: 2017 source edit
Line 1: Line 1:
<div class="downloadarea">
<div class="downloadarea">
<span class="getButton">[[Media:HW-banner.zip|Download]]</span>
<span class="getButton">[[Media:HW-ImageCards.zip|Download]]</span>


[[File:banner-example.png|450x450px|link=Special:FilePath/banner-example.png]]
[[File:Image cards large.png|450x450px|alt=large image cards example]]
</div>This template creates a page banner that you can include on portal pages, for example. You can see an example here in the Helpdesk on the page [[Community]].
</div>This template creates a set of images that is useful for linking to wiki pages.
==Importing the template==
== Importing the template==
The import file is included in the archive file ''HW-banner.zip''. Unpack the zip file first.
The import file is included in the archive file ''HW-IamgeCards.zip''. Unpack the zip file first.


On the page ''Special:Import'' follow these steps:
On the page ''Special:Import'' follow these steps:
#'''Select file''' and choose ''HW-banner.xml''.
#'''Select file''' and choose ''HW-ImageCards.xml''.
#'''Enter''' an Interwiki prefix. Since this field is required, simply add ''hw'' (for hallowelt).
#'''Enter''' an Interwiki prefix. Since this field is required, simply add ''hw'' (for hallowelt).
#'''Keep''' the selection ''Import to default locations''.
#'''Keep''' the selection ''Import to default locations''.
Line 17: Line 17:
The xml import creates the following files in your wiki:
The xml import creates the following files in your wiki:


*Template:Banner
*Template:Image_cards
*Template:Banner/styles.css
*Template:Image_cards/start
*Template:Image_cards/end
*Template:Image_cards/styles.css


==Creating a banner==
==Adding image cards to a page ==


#From the Visual Editor ''Insert > Template'' menu, add the template "Banner". <br />[[File:step4.png|thumb|Inserting the template through VisualEditor|462x462px|alt=Inserting the template through VisualEditor|center]]
===General considerations ===
#Click on the inserted template to view the available parameters for formatting the look of the banner.<br />


[[File:step5.png|thumb|center|450x450px|alt=Available banner settings|Available banner settings]]
*'''Start and end templates:''' Each card set needs the '''start''' template (Image cards/start) and the '''end''' template (Image cards/emd). Make sure to add the end template right after the last image card without a line-break. If you have a line break, you will see some unnecessary space after the last card.
*'''Card sizes:''' You can choose between ''medium'' (''standard)'', ''small'' and ''large'' image cards.  By default, standard cards are shown.
*'''Images or icons:''' You can choose to create image cards or icon cards. Icon cards are only available in the sizes ''small'' and ''medium.''  If you want to uses images, you need to upload them to your wiki first.


{{Messagebox|boxtype=important|Note text=The settings only take effect after you save the page if you have just inserted the banner template on your page.}}
<span><span /><br /></span>
[[Templates download/Image cards#Template parameters|See below for a complete list of available settings (template parameters).]]


===Image cards===
The easiest way to add card is to choose a starting layout from the examples provided on this page. Simply copy and paste the example code in source-editing mode into your page.


All settings for the banner are optional. This means that a box can  be generated without image, heading, or text.
{{Messagebox|boxtype=important|icon=|Note text=Always paste any code using plaintext - '''<code>Ctrl+Shift+v</code>''' - in your wiki in source editing mode to avoid creating unnecessary tags which will break the view.|bgcolor=}}


==Example settings ==
====Standard-sized image cards====
[[File:hw-banner-vorlage.png|center|thumb|650x650px|Banner settings|link=Special:FilePath/hw-banner-vorlage.png]]
[[File:Image cards standard.png|alt=Standard-sized cards|center|thumb|950x950px|Standard-sized cards]]
{| class="wikitable" style="width:950px;"
 
|+ style="box-sizing: inherit; padding-top: 8px; padding-bottom: 8px; color: rgb(119, 119, 119); text-align: left; font-weight: bold;" |
<span><span /><br /></span>
! style="background-color:rgb(234, 236, 240);text-align:center;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |
 
'''Code to copy:'''<syntaxhighlight lang="text">
{{Image cards/start|cardsize=}}
{{Image cards|imgname=yourimage1.jpg|label=London|imglink=https://google.de|alt=office in London headquarters}}
{{Image cards|imgname=yourimage2.jpg|label=Helsinki|imglink=http://google.de|alt=}}
{{Image cards|imgname=yourimage3.jpg|label=Madrid|imglink=Main Page|alt=}}
{{Image cards|imgname=yourimage4.jpg|label=Hamburg|imglink=Main Page|alt=}}
{{Image cards|imgname=yourimage5.jpg|label=Regensburg|imglink=|alt=}}{{Image cards/end}}
</syntaxhighlight>
 
====Large image cards====
[[File:Image cards large.png|alt=Large image cards|center|thumb|850x850px|Large image cards]]
 
 
Code to copy:
<syntaxhighlight lang="text">
{{Image cards/start|cardsize=large|flexwrap=wrap}}
{{Image cards|imgname=yourimage1.jpg|label=Sales & Marketing|imglink=Main Page|alt=}}
{{Image cards|imgname=yourimage2.jpg|label=IT Admin|imglink=Main Page|alt=}}
{{Image cards|imgname=yourimage3.jpg|label=Development|imglink=Main Page|alt=}}
{{Image cards|imgname=yourimage4.jpg|label=Tech Support|imglink=Main Page|alt=}}
{{Image cards|imgname=yourimage5.jpg|label=Accounting|imglink=Main Page|alt=}}
{{Image cards|imgname=yourimage6.jpg|label=Management|imglink=Main Page|alt=}}{{Image cards/end}}
</syntaxhighlight>
[[File:Image cards bootstrap icons.png|alt=Bootstrap icon name|thumb|Bootstrap icon name]]
 
===Icon cards===
For icon cards, you can use most current bootstrap icons.  (BlueSpice includes Bootstrap icons v.)
 
On the bootstrap icons website, select an icon by clicking on it. Copy the name of the icon font into your template.<span /><br />
 
* <span>Icon cards support card sizes ''medium (standard)'' and ''small'', but '''not''' ''large''.</span>
 
 
 
[[File:Image cards icons.png|alt=Icon cards|center|thumb|950x950px|Icon cards]]
 
 
Code to copy:<syntaxhighlight lang="text">
{{Image cards/start|cardsize=}}
{{Image cards|iconname=bi bi-gear|iconcolor=Tomato|label=Processes|imglink=Main Page|alt=}}
{{Image cards|iconname=bi bi-lightbulb|label=How-to's|imglink=Main Page|alt=}}
{{Image cards|iconname=bi bi-eyeglasses|label=Knowledge base|imglink=https://google.de|alt=}}
{{Image cards|iconname=bi bi-signpost|label=Directories|imglink=Main Page|alt=}}
{{Image cards|iconname=bi bi-geo-alt|label=Locations|imglink=|alt=}}{{Image cards/end}}
</syntaxhighlight><span><span /><br /></span><span><span /></span>
 
==Available Settings==
 
===Template:Image_cards/start===
{| class="wikitable" style="width:100%;"
! style="background-color:rgb(234, 236, 240);text-align:center;width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Element
! style="background-color:rgb(234, 236, 240);text-align:center;width:180px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Value
! style="background-color:rgb(234, 236, 240);text-align:center;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" | Description
|- style="box-sizing: inherit;"
| style="width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |
| style="width:180px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |
| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |
|}
 
===Template:Image_cards===
{| class="wikitable" style="width:100%;"
! style="background-color:rgb(234, 236, 240);text-align:center;width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Element
! style="background-color:rgb(234, 236, 240);text-align:center;width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Element
! style="background-color:rgb(234, 236, 240);text-align:center;width:180px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Value
! style="background-color:rgb(234, 236, 240);text-align:center;width:180px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Value
! style="background-color:rgb(234, 236, 240);text-align:center;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Description
! style="background-color:rgb(234, 236, 240);text-align:center;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Description
|- style="box-sizing: inherit;"
|-
| rowspan="3" style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |1
| style="width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |
| style="width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Banner image
| style="width:180px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |
| style="width:180px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |QM:Flower_white.jpg
| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |
| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Image name (with namespace prefix, if it exists, but without the  ''File:'' prefix). The banner  image is optional.
|- style="box-sizing: inherit;"
| style="width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Image width
| style="width:180px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |200
| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Number. The width will automatically be used as pixel-value. Default value: ''200''
|- style="box-sizing: inherit;"
| style="width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Image alignment
| style="width:180px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |left, right
| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Shows the imag to the left or right. Default value: ''left''.
|- style="box-sizing: inherit;"
| rowspan="3" style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |2
| style="width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Heading
| style="width:180px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Meine Überschrift
| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Heading text
|- style="box-sizing: inherit;"
| style="width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Heading size
| style="width:180px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |1.6em
| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Size can also be entered as 16px or any other css size value. Default value: ''1.6em''.
|- style="box-sizing: inherit;"
| style="width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Heading color
| style="width:180px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |#444444
| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Color as [https://www.w3schools.com/colors/colors_picker.asp hex value].
|- style="box-sizing: inherit;"
| rowspan="3" style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |3
| style="width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Text
| style="width:180px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Das ist der Inhalt.
| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Text of the  box.
|- style="box-sizing: inherit;"
| style="width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Text size
| style="width:180px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |1.2em
| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |''see Heading size''
|- style="box-sizing: inherit;"
| style="width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Text color
| style="width:180px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |#444444
| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |''see Heading color''
|- style="box-sizing: inherit;"
| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |4
| style="width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Content padding
| style="width:180px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |20px
| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Distance of the title/text area to the box and the image. Default value:''10px.''
|- style="box-sizing: inherit;"
| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |5
| style="width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Padding of the container box
| style="width:180px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |10px
| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Padding of the box itself. Default value: ''0.''
|- style="box-sizing: inherit;"
| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |6
| style="width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Background color
| style="width:180px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |#efefef
| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |<span>Color as</span> [https://www.w3schools.com/colors/colors_picker.asp hex value] <span>. Default value</span> ''#efefef'' (a light grey)
|}
|}
<br />
__NOTOC__
__NOTOC__

Revision as of 17:24, 18 November 2022

Download

large image cards example

This template creates a set of images that is useful for linking to wiki pages.

Importing the template

The import file is included in the archive file HW-IamgeCards.zip. Unpack the zip file first.

On the page Special:Import follow these steps:

  1. Select file and choose HW-ImageCards.xml.
  2. Enter an Interwiki prefix. Since this field is required, simply add hw (for hallowelt).
  3. Keep the selection Import to default locations.
  4. Click Upload file...

The template is now available in your wiki.

Pages included in the import

The xml import creates the following files in your wiki:

  • Template:Image_cards
  • Template:Image_cards/start
  • Template:Image_cards/end
  • Template:Image_cards/styles.css

Adding image cards to a page

General considerations

  • Start and end templates: Each card set needs the start template (Image cards/start) and the end template (Image cards/emd). Make sure to add the end template right after the last image card without a line-break. If you have a line break, you will see some unnecessary space after the last card.
  • Card sizes: You can choose between medium (standard), small and large image cards. By default, standard cards are shown.
  • Images or icons: You can choose to create image cards or icon cards. Icon cards are only available in the sizes small and medium. If you want to uses images, you need to upload them to your wiki first.


 See below for a complete list of available settings (template parameters).

Image cards

The easiest way to add card is to choose a starting layout from the examples provided on this page. Simply copy and paste the example code in source-editing mode into your page.

Important!Always paste any code using plaintext - Ctrl+Shift+v - in your wiki in source editing mode to avoid creating unnecessary tags which will break the view.


Standard-sized image cards

Standard-sized cards
Standard-sized cards

Code to copy:

{{Image cards/start|cardsize=}}
{{Image cards|imgname=yourimage1.jpg|label=London|imglink=https://google.de|alt=office in London headquarters}}
{{Image cards|imgname=yourimage2.jpg|label=Helsinki|imglink=http://google.de|alt=}}
{{Image cards|imgname=yourimage3.jpg|label=Madrid|imglink=Main Page|alt=}}
{{Image cards|imgname=yourimage4.jpg|label=Hamburg|imglink=Main Page|alt=}}
{{Image cards|imgname=yourimage5.jpg|label=Regensburg|imglink=|alt=}}{{Image cards/end}}

Large image cards

Large image cards
Large image cards


Code to copy: 

{{Image cards/start|cardsize=large|flexwrap=wrap}}
{{Image cards|imgname=yourimage1.jpg|label=Sales & Marketing|imglink=Main Page|alt=}}
{{Image cards|imgname=yourimage2.jpg|label=IT Admin|imglink=Main Page|alt=}}
{{Image cards|imgname=yourimage3.jpg|label=Development|imglink=Main Page|alt=}}
{{Image cards|imgname=yourimage4.jpg|label=Tech Support|imglink=Main Page|alt=}}
{{Image cards|imgname=yourimage5.jpg|label=Accounting|imglink=Main Page|alt=}}
{{Image cards|imgname=yourimage6.jpg|label=Management|imglink=Main Page|alt=}}{{Image cards/end}}
Bootstrap icon name
Bootstrap icon name

Icon cards

For icon cards, you can use most current bootstrap icons. (BlueSpice includes Bootstrap icons v.)

On the bootstrap icons website, select an icon by clicking on it. Copy the name of the icon font into your template.

  • Icon cards support card sizes medium (standard) and small, but not large.


Icon cards
Icon cards


Code to copy:

{{Image cards/start|cardsize=}}
{{Image cards|iconname=bi bi-gear|iconcolor=Tomato|label=Processes|imglink=Main Page|alt=}}
{{Image cards|iconname=bi bi-lightbulb|label=How-to's|imglink=Main Page|alt=}}
{{Image cards|iconname=bi bi-eyeglasses|label=Knowledge base|imglink=https://google.de|alt=}}
{{Image cards|iconname=bi bi-signpost|label=Directories|imglink=Main Page|alt=}}
{{Image cards|iconname=bi bi-geo-alt|label=Locations|imglink=|alt=}}{{Image cards/end}}

Available Settings

Template:Image_cards/start

Element Value Description

Template:Image_cards

Element Value Description


To submit feedback about this documentation, visit our community forum.

Retrieved from "https://en.wiki.bluespice.com/w/index.php?title=Templates_download/Image_cards&oldid=5290"
No categories assignedEdit

Discussions