Overview of tags

See also other faculty-specific tags.

Email address

fi-email
This component allows you to embed an email on a page in a form that can only be converted into a readable form using JavaScript. This prevents most spambots from reading the email address from the page and sending spam to it.

Addresses are specified in the attributes to, ccand bcc. Each address can be of the form

• user@example.com
• 'First Name First Name' <user@example.com> (write < and > as &lt; and &gt; respectively)

There can be multiple addresses separated by a comma in each attribute. The element body is then displayed as the link text. For an empty body, the content of the to attribute is used.

Mandatory attributes

to="ADRESY"

Recipient addresses.

Optional attributes

cc="ADRESY"

A copy of the email.

bcc="ADRESY"

Hidden copies.

subject="TEXT"

Pre-filled message subject. This subject can be changed by the user, so it cannot be relied upon.

icon

Show the envelope icon before the address.

Examples

<fi-email to="john.doe@example.com"/>

<fi-email icon to="john.doe@example.com"/>

<fi-email to="'John Doe' &lt;john.doe@example.com&gt;"/>

<fi-email to="'John Doe' &lt;john.doe@example.com&gt;">John Doe</fi-email>

<fi-email to="john.doe@example.com,jane.doe@example.com"/>

<fi-email to="john.doe@example.com" cc="jane.doe@example.com"/>

Person on the faculty

fi-person
Inserts the person's name from IS including titles. The name or titles are automatically updated when changed, no need to overwrite the contact. The name can link to an unauthenticated IS, to a personal page on the MU website, or to the person's private page linked via URL.

Mandatory attributes

just one of:

uco="UCO"

The person's ID number.

login="LOGIN"

The person's faculty login.

Optional attributes

titles="no"

Person's name to display without titles.

href="(@IS|@MUNI|URL)"

The person's name will be clickable.

• @IS Generate a link to an unauthenticated section of the IS.
• @MUNI will generate a link to the MU website.
• Otherwise, the link specified as URL will be used.

db="(fi|is)"

Database for the data source.

• fi is the Faculty Administration database.
  This is the default for login. It supports both uco and login input. the link will not work after the record is deleted. The record is typically canceled several years after the student or employment ends.
• is is the IS MU database.
  This is the default value for uco. Cannot be used with login.

Examples

<fi-person uco="396157"/>

<fi-person login="xlacko1"/>

<fi-person uco="396157" titles="no"/>

<fi-person uco="396157" href="@IS"/>

<fi-person uco="396157" href="@MUNI"/>

<fi-person uco="396157" href="https://fi.muni.cz/~xlacko1"/>

News and events

fi-news
Inserts news and events from the required sources (IS bulletin boards or M Magazine categories) into the page.

Mandatory attributes

page="SOURCE"

News sources, see below.

count="(L,M,S,XS|N)"

The highest number of news items to be displayed. Can be specified separately for the four screen sizes, or uniformly.

Optional attributes

layout="(article|calendar|timeline|simple)"

Layout and shape:

• simple: simple text listing, displays actions and updates
• article: (default value) displays only actuals (messages without a filled in event date)
• calendar: display only events (messages with an event date) in calendar form
• timeline: display events in timeline form

See also examples.

type="(news|events|all)"

Force the display of a specific type:

• news: news (messages without a date)
• events: events (messages with an event date)
• all: all messages regardless of the limitation in the value layout.

Beware, some combinations of layout and type may not make sense and in the worst case may cause a page display error.

News feed

News items are synchronized to us once an hour (both from IS and M Magazine). For messages on the message board, to transfer them to us you still need to be the administrator of that section of the message board and enable display on the FI site when editing them (available by expanding more options). If you are not the administrator or don't see these options there but think you should, please contact istech@fi.muni.cz.

Sorting news

The layout parameter also determines the order in which news is displayed. For all types except article, news is ordered chronologically (older news before newer news), for articlethe reverse (newer news before older news).

More precisely, the chronological order is primarily determined by the date of the event (if not defined, the date 2999 is used) in ascending order. If the date of the event matches, secondary ordering is by the date of publication of the message, also in ascending order.

Overview of layout properties

( ¹) These can be changed with the type attribute.

News sources

In the page attribute, enter the abbreviation of the news source from the table below. You can also enter multiple sources, separate them with a comma (no spaces).

Examples

default layout (same as layout="article")

<fi-news page="mu-sci,mu-stud" count="4"/>

layout calendar

<fi-news page="title" count="4" layout="calendar"/>

layout timeline

<fi-news page="bcmgr" count="2" layout="timeline"/>

layout simple

<fi-news page="mu-sci" count="2" layout="simple"/>

Commission for State Final Examinations

fi-programme-committees
This component allows you to list the chairs and members of the state final exam committees.

Examples

<fi-programme-committees/>

Further examples of use can be seen on the State Final Examination Board for Bachelor's and Master's degree programmes (for studies commencing in the 2019/2020 academic year).

Awards

fi-awards
This component allows you to list the final theses that have received an award from the Dean of FI.

Mandatory attributes

type="TYP"

Type of thesis to be displayed. TYPE can be bc-mgrfor bachelor and master theses or phd for dissertations.

Optional attributes

year="ROK"

The year in which the awards were given. If the year is not listed, all awards of that type will be listed in order by year.

Examples

<fi-awards year="2019" type="bc-mgr"/>

<fi-awards year="2019" type="phd"/>

<fi-awards type="phd"/>

You can see more examples of use on the Outstanding Dissertation or Dean's Awards to Students pages.

Gallery

fi-gallery, fi-photo, fi-image
The gallery is wrapped by the tag fi-gallery. Each descendant is then fi-image - any image (such as img) or fi-photo - a photo from the gallery. Clicking on an image in the gallery starts a slideshow that can be navigated by clicking on the arrows on the right or left side of the image, or by using the arrow keys on the keyboard. Two strings, ALBUM and ID, describe an image from the gallery. These numbers can be read from the URL of the image, e.g. in the URL

https://www.fi.muni.cz/app/gallery/04200022/018

the last part of the URL 04200022/018 means that the album number is 04200022 and the image ID is 018.

Optional attributes for fi-gallery

album="ALBUM"

Default album number for photos in the gallery.
Descendants of fi-photo then do not need to specify this number.

size="VELIKOST"

Responsive gallery size, default is default.

max-items="POČET"

The maximum number of images to display in the preview.
If there are multiple images, a message is generated after the last one informing about the number of hidden images. This message respect the number of images (1 image, 2 images, etc.) and the language.

Attributes for fi-photo

album="ALBUM"

The number of the album from which the photo came. Not mandatory if the parent element fi-gallery has this attribute.

photo="ID"

Mandatory ID of the photo from the gallery.

Attributes for fi-image

The same attributes can be used as for the HTML tag img.

See for example MDN web docs.

title="TEXT"

The title of the image to be displayed in the presentation. If not specified, the content of the mandatory attribute alt is used.

caption="TEXT"

A longer description of the image.

thumbnail="URL"

The image to be used in the preview.
The ideal dimensions are 270 x 150 pixels, if you use an image from the Files application then the preview will be generated automatically.

Examples

<fi-gallery album="01300163">
    <fi-photo photo="007"></fi-photo>
    <fi-photo photo="010"></fi-photo>
    <fi-photo album="divadlo" photo="0022"></fi-photo>
    <fi-image src="/files/unix/news-generic-1.jpg" alt="FI"></fi-image>
</fi-gallery>

The first and second images are from the album 01300163 (set with the tag fi-gallery), the third image is from the album divadlo, the fourth is not from the gallery but is a custom image stored in the Files app of the Faculty Wiki.

<fi-gallery fi-gallery album="01300260" max-items="4">
    <fi-photo photo="001"></fi-photo>
    <fi-photo photo="002"></fi-photo>
    <fi-photo photo="003"></fi-photo>
    <fi-photo photo="004"></fi-photo>
    <fi-photo photo="005"></fi-photo>
    <fi-photo photo="006"></fi-photo>
    <fi-photo photo="007"></fi-photo>
    <fi-photo photo="008"></fi-photo>
    <fi-photo photo="009"></fi-photo>
    <fi-photo photo="010"></fi-photo>
    <fi-photo photo="011"></fi-photo>
    <fi-photo photo="012"></fi-photo>
</fi-gallery>

The preview contains only 4 images due to the max-itemsattribute, and text appears to inform how many images are not shown. However, all 12 images appear in the gallery.

The entire gallery contains 8 more picture

Automatically scalable image

The fi-picture tag allows you to generate different image size variations. This image must be saved in the Files application, image variants from other sources cannot be generated.

Image sizes are selected according to the rules in the rules settings. The browser then selects one of the image variants according to the width of the page.

Mandatory attributes

src="URL"

The path to the image as for the img tag. If the path does not lead to an image in the Files application, the size variants are not generated.

alt="TEXT"

Image description as for the img tag.

Optional attributes

rules="(TEXT|RULE1 RULE2 …)"

Either the name of the preset or a list of rules (below).

width="INTEGER"

height="INTEGER"

Image width and height as for img. These will be used for the default image if no size option is selected by the browser.

Rules for

The simplest option for rules is to use presets. Specify one of the following as the value of rule:

news

Message size options, i.e. 4, 2 or 1 column depending on the page width. The base image should be at least 610 px wide.

timeline-box-img

Sizing options for the timeline with the image. The base image should be at least 370 px wide.

Custom sizing can be specified as a space-separated list of rules. Each rule is a pair of numbers of the form PAGE:IMAGE, where PAGE is the minimum page width in px and IMAGE is the width in px of the image to be used. If the image does not have the width attribute set, then the last rule must be of the form 0:IMAGE, or just one number for short, IMAGE. This is used as the default size.

The browser will interpret the rules sequentially. For the first rule PAGE:IMAGE, for which the current page view has a width of at least PAGE, the browser will select an image of width IMAGE.

Examples

<fi-picture src="/files/webmaster/news-generic-1.jpg" alt="FI" rules="news"></fi-picture>

An image suitable for displaying for news.

<fi-picture src="/files/webmaster/news-generic-1.jpg" alt="FI" rules="1024:300 600:600 150"></fi-picture>

Example of explicit rules. The first matching rule is selected:

• For a page at least 1024 px wide, an image 300 px wide is used.
• For a page at least 600 px wide, a 600 px wide image is used.
• Otherwise, an image of width 150 px is selected.

If you zoom in and out of the browser window, you should see the changes.