Skip to content

Latest commit

 

History

History
305 lines (260 loc) · 12.6 KB

homepage_widget_options.md

File metadata and controls

305 lines (260 loc) · 12.6 KB
Raw

Homepage Widgets

This is a description of the available homepage widgets and their corresponding options.

Columns and Rows

<row-wide bgcolor="primary">
    <column span="12">
        <row>
            <column span="12">
                <title>Events</title>
                <events />
            </column>
        </row>
    </column>
</row-wide>

You can create different layouts with columns and rows. Columns and rows can contain other elements such as <slider/> for example.

Rows

Attribute Name Description Value if left empty Possible Values
bgcolor The background color of the row - primary, gray, darkgray
class Custom classes - Any class name

Additional Info:

There are two different types of rows, <row-wide> </row-wide> and <row> </row>. <row-wide> </row-wide> streches over the whole screen while <row> </row> creates a container with the same width as the header and footer information.

Columns

Attribute Name Description Value if left empty Possible Values
span Each row is divided into 12 units. Columns can span over any number of these units. 12 1 - 12
class Custom classes - Any class name

Title

Title

<title>
    Events
</title>
Attribute Name Description Value if left empty Possible Values
class Custom classes - Any class name

Text

Text

<text>
    Some Text.
</text>
Attribute Name Description Value if left empty Possible Values
class Custom classes - Any class name

Slider

Slider

<slider
    height-m="30vw"
    height-d="55vh"
></slider>
Attribute Name Description Value if left empty Possible Values
height-m The height of the slider on mobile devices. Images will center themselves and cover the available space. 40vw 30vw, 40vh, 100px, ...
height-d The height of the slider on desktop devices. Images will center themselves and cover the available space. 40vw 30vw, 40vh, 100px, ...

Additional Info:

The images for the slider are defined via photoalbums. You can find the "show on homepage"-Option in the settings of each album.

Autoplay Video(s)

Autoplay Video

    <autoplay_video 
        max-height="100vh"
        text="Text on video"
        link_mp4="/storage/..."
        link_mp4_low_res="/storage/..."
        link_webm="/storage/..."
        link_webm_low_res="/storage/..."
    />
Attribute Name Description Value if left empty Possible Values
max-height The maximum height of the video. Can for example be used for fullscreen videos on desktop. The video will center itself in the available space. Video height 30vw, 40vh, 100px, ...
text Text to be shown atop of the video - Any text
link_mp4_low_res Link to the video in the mp4 format with reduced size uploaded in the files-section. Will be shown for mobile devices instead of the full sized video. - /storage/...
link_mp4 Link to the full sized video in the mp4 format uploaded in the files-section. Will be shown for desktop and mobile, if no smaller size is available. - /storage/...
link_webm_low_res Link to the video in the webm format with reduced size uploaded in the files-section. Will be shown for mobile devices instead of the full sized video. - /storage/...
link_webm Link to the full sized video in the webm format uploaded in the files-section. Will be shown for desktop and mobile, if no smaller size is available. - /storage/...

Additional Info:

You can add multiple videos and wrap them with <random_videos> </random_videos> to display one of the videos at random each time the page gets refreshed. Like this:

<random_videos>
    <autoplay_video 
        link_mp4="/storage/video_1" />
    <autoplay_video 
        link_mp4="/storage/video_2" />

</random_videos>

Icon Links

Icon Links

<icon_link 
    icon="fa-concierge-bell" 
    title="Online-Schalter"
    link="/forms"
    text="Nehmen Sie online bequem Dienstleistungen in Anspruch"
/>
Attribute Name Description Value if left empty Possible Values
icon Font Awesome icon class. You can choose any from the free icons of the Version 5 of Font Awesome here: Font Awesome Icons Cannot be left empty * fa-user, fa-building, fa-...
title Title of the icon link widget Cannot be left empty * Any text
text Text of the icon link widget - Any text
text Where the icon link widget is linked to - https://...
text Inverts the colors of the icon link widget (white turns to primary color and vice versa). false true, false
class Custom classes - Any class name

* Icon link widget will not be displayed if this value is missing

Links

Links

<links>
    <link url="/resources"
        description="Book now">
        Reservations
    </link>
    <link url="https://..."
        description="Something">
        Some Text
    </link>
</links>
Attribute Name Description Value if left empty Possible Values
url URL of the link - https://...
description Link Name - Any text
class Custom classes - Any class name

News

News

<news />

No Attributes

Additional Info:

You can adjust the number of displayed news items in the homepage settings form.

Events

Events

<events />

No Attributes

Additional Info:

You can adjust the number of displayed events in the homepage-settings form.

Partners

Partners

<partners />
Attribute Name Description Value if left empty Possible Values
title Custom title of section Partners Any text
hide-title Option to hide title, if the title attribute is empty the title will be "Partners". false true, false

Additional Info:

Partners can be edited in the footer settings.

Services

Services

<panel>
    <services/>
</panel>

Additional Info:

The label and visibility of the services can be edited in the homepage settings. You can also add your own links to the services panel by using the links widget like this:

<panel>
    <services>
        <link url="/resources"
            description="Book now">
            Reservations
        </link>
    </services>
</panel>

Contacts

Contacts

<contacts_and_albums/>

Directories

Directories

<directories/>

Focus

Focus

<focus
    image-src="https://..."
    focus-url="https://..."
    title="New Website"
    lead="We got a new website."
    text-on-image="True"
>
    <text>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</text>
    <text>Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</text>
</focus>
Attribute Name Description Value if left empty Possible Values
title Custom title of focus widget, will be displayed on image if text-on-image is true. - Any text
lead Lead of focus widget, will be displayed on image if text-on-image is true. - Any text
image-src URL of the image for the focus card. - https://...
focus-url URL to which the focus card should link to. - https://...
text-on-image If true title and lead are displayed atop of the image. false true, false

Testimonial

<testimonial
    image="https://..."
    description="Person name, job title"
    quote="I love my job very much, this place is greaet."
/>
Attribute Name Description Value if left empty Possible Values
image Image URL of the testimony. - https://...
description Short description of who the person is (Name, job title, etc.). - Any text
quote A quote of the person. - Any text

Testimonials Slider

Testimonials

<testimonial_slider
    image_1="https://..."
    description_1="Person name, job title"
    quote_1="I love my job very much, this place is greaet."

    image_2="https://..."
    description_2="Person name, political party"
    quote_2="Money is very important to me."

    image_3="https://..."
    description_3="Person name, teacher"
    quote_3="Children are our future."
/>
Attribute Name Description Value if left empty Possible Values
image_1 Image URL of the #1 testimony. - https://...
image_2 Image URL of the #2 testimony. - https://...
image_3 Image URL of the #3 testimony. - https://...
description_1 Short description of who the person #1 is (Name, job title, etc.). - Any text
description_2 Short description of who the person #2 is (Name, job title, etc.). - Any text
description_3 Short description of who the person #3 is (Name, job title, etc.). - Any text
quote_1 A quote of the person #1. - Any text
quote_2 A quote of the person #2. - Any text
quote_3 A quote of the person #3. - Any text

Jobs

Jobs

<jobs
    rss_feed="https://www.publicjobs.ch/rss/~search1576049765b9fb8a630d17ec5dfcce06841a6e"
    jobs_card_title="Looking for ..."
    >
</jobs>
Attribute Name Description Value if left empty Possible Values
imrss_feedage_1 URL of the rss Feed for the job openings. Cannot be left empty * https://...
jobs_card_title Title of the card containing the job listings. - Any text

* Jobs widget will not be displayed if this value is missing.