Templates download/Employee: Difference between revisions

(Created page with "<div class="downloadarea"> <span class="getButton">Download</span> 450x450px|link=Special:FilePath/banner-example.png </di...")
 
No edit summary
 
(8 intermediate revisions by the same user not shown)
Line 1: Line 1:
<div class="downloadarea">
<div class="downloadarea">
<span class="getButton">[[Media:HW-banner.zip|Download]]</span>
<span class="getButton">[[Media:HW-Employee.zip|Download]]</span>


[[File:banner-example.png|450x450px|link=Special:FilePath/banner-example.png]]
[[File:Employees gallery.png|alt=Screenshot of employees gallery|450x450px]]
</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 an employees gallery that you can include on portal pages, for example.  
==Importing the template==
==Importing the template==
The import file is included in the archive file ''HW-banner.zip''. Unpack the zip file first.
{{Templateimport|HW-Employee}}
 
On the page ''Special:Import'' follow these steps:
#'''Select file''' and choose ''HW-banner.xml''.
#'''Enter''' an Interwiki prefix. Since this field is required, simply add ''hw'' (for hallowelt).
#'''Keep''' the selection ''Import to default locations''.
#'''Click'''  ''Upload file...''
 
The  template is now available in your wiki.
==Pages included in the import==
==Pages included in the import==
The xml import creates the following files in your wiki:
The xml import creates the following files in your wiki:


*Template:Banner
*Template:Employee
*Template:Banner/styles.css
*Template:Employee/styles.css
 
==Creating a banner==
 
#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]]
#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]]
 
{{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.}}


==Creating the employee gallery==
You can add each individual employee card as a template. Alternatively, you can [[Templates download/Employee#Adding a "batch" of employees|add a "batch" of employees]] directly in the source mode of the page.
# From the Visual Editor ''Insert > Template'' menu, add the template "Employee". [[File:Employee template.png|alt=Screenshot of dialog to select the Employee template|center|thumb|450x450px|Select the Employee template]]
# Provide the necessary information in the [[Templates download/Employee#Available parameters|parameter fields]].


All settings for the banner are optional. This means that a box can  be generated without image, heading, or text.
=== Adding a "batch" of employees ===
To speed up the process, you can quickly add the template multiple times directly in the source editing mode. This also allows you to add a wrapper around the images to fine-tune the alignment of the images:<syntaxhighlight lang="text">
<div class="employees">
{{Employee|title=Title|image=|name=Employee name|department=Department|username=}}
{{Employee|title=Title|image=|name=Employee name|department=Department|username=}}
{{Employee|title=Title|image=|name=Employee name|department=Department|username=}}
{{Employee|title=Title|image=|name=Employee name|department=Department|username=}}
{{Employee|title=Title|image=|name=Employee name|department=Department|username=}}
{{Employee|title=Title|image=|name=Employee name|department=Department|username=}}
</div>
</syntaxhighlight>


==Example settings ==
== Available parameters==
[[File:hw-banner-vorlage.png|center|thumb|750x750px|Banner settings|link=Special:FilePath/hw-banner-vorlage.png|alt=]]
{| class="wikitable" style="width: 100%;"
{| class="wikitable" style="width: 100%;"
! 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);" class="" |
! 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);" class="" |
! 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);" class="" |Element
! 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);width:200px;" class="" |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);" class="" |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);width:180px;" class="" |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);" class="" |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);" class="" | 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);" |Banner image
| 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);" |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)
|-
|-
|7
|1
|Background icon
|title
|bgicon1, bgicon2, bgicon3, swoosh
|text
|Adds a [[Templates download/Banner#Background effect|background effect]] to the banner
|Job title
|}
|-
 
|2
=== Background effect ===
|image
The following background effects are available by default, here shown in different banner color variations:
|file name (without naemspace prefix)
{| class="contenttable" style="width: 100%;"
|Name of the uploaded user image (e.g.: lastnamefirstname.png). If left empty, the template looks for the profile image of the user.
! style="width:150px;" |Bgicon
! style="width:680px;" |Result
!Settings
|-
|-
| style="width:150px;" |bgicon1{{Bsvs|bsvFrom=4.3|bsvTo=|bsvFeature=}}
|3
| style="width:680px;" |[[File:banner-bgicon1.png|alt=Banner with bgicon1 as background effect|650x650px]]
|name
|Heading color: #2e6096
|text
Text color: #2e6096
|Name of the employee
 
Background color: #e9e9ee
 
Background icon: bgicon1
|-
|-
| style="width:150px;" |bgicon2
|4
| style="width:680px;" |[[File:banner-bgicon2.png|alt=Banner with bgicon2 as background effect|650x650px]]
|department
|Heading color: #ffffff
|text
 
|Department of the employee
Text color: #ffffff
 
Background color: #2e6096
 
Background icon: bgicon2
|-
|-
| style="width:150px;" |bgicon3{{Bsvs|bsvFrom=4.3|bsvTo=|bsvFeature=}}
|5
| style="width:680px;" |[[File:banner-bgicon3.png|alt=Banner with bgicon3 as background effect|650x650px]]
|username
|Heading color: #ffffff
|username (without namespace prefix)
 
|If the user exists in the wiki and the user name is provided, the employee card links to the user's profile page.
Text color: #ffffff
 
Background color: #747474
 
Background icon: bgicon3
|-
|-
| style="width:150px;" |swoosh
|6
| style="width:680px;" |[[File:banner-swoosh.png|alt=Banner with swoosh as background effect|650x650px]]
|employeepage
|Heading color: #2e6096
|name of a wiki page
 
|If the employee does not exist as user, an employee page can be created anywhere in the wiki. If a page name is provided here, the employee card links to that page.
Text color: #2e6096
 
Background color: #e9e9ee
 
Background icon: bgicon1
|}
|}
__NOTOC__
__NOTOC__
[[en:Vorlagen_Download/Seitenbanner]]
[[de:Vorlagen_Download/Mitarbeiter]]
[[en:{{FULLPAGENAME}}]]

Latest revision as of 10:04, 18 November 2024

This template creates an employees gallery that you can include on portal pages, for example.

Importing the template

Importing the template

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

On the page Special:Import follow these steps:

  1. Select file and choose HW-Employee.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:Employee
  • Template:Employee/styles.css

Creating the employee gallery

You can add each individual employee card as a template. Alternatively, you can add a "batch" of employees directly in the source mode of the page.

  1. From the Visual Editor Insert > Template menu, add the template "Employee".
    Screenshot of dialog to select the Employee template
    Select the Employee template
  2. Provide the necessary information in the parameter fields.

Adding a "batch" of employees

To speed up the process, you can quickly add the template multiple times directly in the source editing mode. This also allows you to add a wrapper around the images to fine-tune the alignment of the images:

<div class="employees">
{{Employee|title=Title|image=|name=Employee name|department=Department|username=}}
{{Employee|title=Title|image=|name=Employee name|department=Department|username=}}
{{Employee|title=Title|image=|name=Employee name|department=Department|username=}}
{{Employee|title=Title|image=|name=Employee name|department=Department|username=}}
{{Employee|title=Title|image=|name=Employee name|department=Department|username=}}
{{Employee|title=Title|image=|name=Employee name|department=Department|username=}}
</div>

Available parameters

Element Value Description
1 title text Job title
2 image file name (without naemspace prefix) Name of the uploaded user image (e.g.: lastnamefirstname.png). If left empty, the template looks for the profile image of the user.
3 name text Name of the employee
4 department text Department of the employee
5 username username (without namespace prefix) If the user exists in the wiki and the user name is provided, the employee card links to the user's profile page.
6 employeepage name of a wiki page If the employee does not exist as user, an employee page can be created anywhere in the wiki. If a page name is provided here, the employee card links to that page.



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