Add page modules
Anonymous Contributor
parent
7631915e00
commit
0b1410ec83
|
|
@ -0,0 +1,18 @@
|
|||
title: AutoSlideshow
|
||||
extends@:
|
||||
type: module
|
||||
context: blueprints://pages
|
||||
form:
|
||||
validation: loose
|
||||
fields:
|
||||
header.duration:
|
||||
type: text
|
||||
label: Anzeigedauer (s)
|
||||
help: Zeit in Sekunden bis zum Bildwechsel
|
||||
default: 10
|
||||
validate:
|
||||
required: true
|
||||
type: int
|
||||
header.media:
|
||||
type: pagemedia
|
||||
label: PLUGIN_ADMIN.PAGE_MEDIA
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
title: BoxList
|
||||
extends@:
|
||||
type: default
|
||||
context: blueprints://pages
|
||||
form:
|
||||
validation: loose
|
||||
fields:
|
||||
header.boxes:
|
||||
type: list
|
||||
style: vertical
|
||||
label: Einträge
|
||||
fields:
|
||||
.image:
|
||||
type: pagemediaselect
|
||||
label: Bild
|
||||
.url:
|
||||
type: text
|
||||
label: Link
|
||||
.title:
|
||||
type: text
|
||||
label: Titel
|
||||
.description:
|
||||
type: text
|
||||
label: Beschreibung
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
title: SlideshowExt
|
||||
extends@:
|
||||
type: default
|
||||
context: blueprints://pages
|
||||
form:
|
||||
validation: loose
|
||||
fields:
|
||||
header.slides:
|
||||
type: list
|
||||
style: vertical
|
||||
label: Slides
|
||||
fields:
|
||||
.image:
|
||||
type: pagemediaselect
|
||||
label: Bild
|
||||
.title:
|
||||
type: text
|
||||
label: Titel
|
||||
.description:
|
||||
type: markdown
|
||||
label: Beschreibung
|
||||
.btn:
|
||||
type: text
|
||||
label: Button-Text (optional)
|
||||
.url:
|
||||
type: text
|
||||
label: Button-Link (optional)
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
title: TextBG
|
||||
extends@:
|
||||
type: default
|
||||
context: blueprints://pages
|
||||
form:
|
||||
validation: loose
|
||||
fields:
|
||||
header.textstyle:
|
||||
type: text
|
||||
label: CSS für Textblock
|
||||
help: 'Zusätzliche Inline-CSS-Regeln, die den ganzen Textblock betreffen'
|
||||
default: ''
|
||||
validate:
|
||||
required: false
|
||||
header.bgcolor:
|
||||
type: text
|
||||
label: Hintergrundfarbe
|
||||
help: 'Als CSS-Parameter, z.B. Hex, rgb() oder rgba()'
|
||||
default: ''
|
||||
validate:
|
||||
required: false
|
||||
header.bgimage:
|
||||
type: pagemediaselect
|
||||
label: Hintergrundbild
|
||||
default: ''
|
||||
validate:
|
||||
required: false
|
||||
header.bgimgstyle:
|
||||
type: text
|
||||
label: CSS für Hintergrundbild
|
||||
help: 'Zusätzliche Inline-CSS-Regeln, die für das Hintergrundbild gelten.'
|
||||
default: ''
|
||||
validate:
|
||||
required: false
|
||||
header.fullwidth:
|
||||
type: toggle
|
||||
label: Volle Breite
|
||||
help: 'Aktiviert die Nutzung der vollen Bildschirmbreite für dieses Modul'
|
||||
highlight: 1
|
||||
default: 0
|
||||
options:
|
||||
1: PLUGIN_ADMIN.ENABLED
|
||||
0: PLUGIN_ADMIN.DISABLED
|
||||
validate:
|
||||
required: true
|
||||
type: bool
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
{% extends 'partials/base.html.twig' %}
|
||||
|
||||
{% block content %}
|
||||
{% for module in page.collection() %}
|
||||
<!-- MODULE START -->
|
||||
{{ module.content|raw }}
|
||||
<!-- MODULE END -->
|
||||
{% endfor %}
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
{% set slides = page.media.images %}
|
||||
|
||||
{% block custom_stylesheets %}
|
||||
{% do assets.addCss('theme://css/autoslideshow.css', 90) %}
|
||||
{% set slideStyle %}
|
||||
.auto-slideshow img {
|
||||
animation-duration: {{ page.header.duration * 3 }}s;
|
||||
}
|
||||
{% for image in slides %}
|
||||
.auto-slideshow img:nth-child({{ loop.index }}) { animation-delay: {{ loop.index0 * page.header.duration }}s }
|
||||
{% endfor %}
|
||||
{% endset %}
|
||||
{% do assets.addInlineCss(slideStyle, 90) %}
|
||||
{% endblock %}
|
||||
<div class="page-cell">
|
||||
<div class="text-tab-content grid-prop current-tab">
|
||||
<div class="text-inner">
|
||||
<div class="auto-slideshow">
|
||||
{% for image in slides %}
|
||||
<img loading="lazy" src="{{ image.url }}" alt="Slide">
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{% block custom_stylesheets %}
|
||||
{% do assets.addCss('theme://css/boxlist.css', 90) %}
|
||||
{% endblock %}
|
||||
|
||||
<h1 class="page-cell">{{ page.title }}</h1>
|
||||
|
||||
<div class="img-box-list page-cell">
|
||||
{% for box in page.header.boxes %}
|
||||
<div class="img-box">
|
||||
<div class="animated-image">
|
||||
<img loading="lazy" alt="{{ box.title }}" style="position: relative; left: 0px; top: 0px; user-select: none" draggable="false" unselectable="on" src="{{ page.media[box.image].url|e }}">
|
||||
{% if box.url != '' %}<a href="{{ box.url }}" target="_blank">Zur<br/>Webseite</a>{% endif %}
|
||||
</div>
|
||||
<div class="img-box-caption">
|
||||
<h6>{{ box.title }}</h6>
|
||||
<span>{{ box.description }}</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
{% set slides = page.header.slides %}
|
||||
|
||||
{% block custom_stylesheets %}
|
||||
{% do assets.addCss('theme://css/slideshowext.css', 90) %}
|
||||
{% set slideStyle %}
|
||||
{% for image in slides %}
|
||||
#slide{{ loop.index }}:checked ~ #slide-content{{ loop.index }} {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition: visibility 0s 2s, opacity 2s 2s linear;
|
||||
}
|
||||
{% endfor %}
|
||||
{% for image in slides %}
|
||||
.slideshow-ext > input:nth-of-type({{ loop.index }}):checked ~ .slideshow-controls > label:nth-of-type({{ loop.index0 }}){% if loop.index < slides|length %},{% endif %}
|
||||
{% endfor %}{
|
||||
display: block;
|
||||
left: 0;
|
||||
right: auto;
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
{% for image in slides %}
|
||||
.slideshow-ext > input:nth-of-type({{ loop.index }}):checked ~ .slideshow-controls > label:nth-of-type({{ loop.index + 1 }}){% if loop.index < slides|length %},{% endif %}
|
||||
{% endfor %}{
|
||||
display: block;
|
||||
right: 0;
|
||||
left: auto;
|
||||
-moz-transform: rotate(225deg);
|
||||
-ms-transform: rotate(225deg);
|
||||
-o-transform: rotate(225deg);
|
||||
-webkit-transform: rotate(225deg);
|
||||
transform: rotate(225deg);
|
||||
}
|
||||
{% endset %}
|
||||
{% do assets.addInlineCss(slideStyle, 90) %}
|
||||
{% endblock %}
|
||||
<div class="page-cell-fullwidth">
|
||||
<div class="text-tab-content grid-prop current-tab">
|
||||
<div class="text-inner">
|
||||
<div class="slideshow-ext">
|
||||
{% for image in slides %}
|
||||
<input type="radio" name="slide" id="slide{{ loop.index }}"{% if loop.index == 1 %} checked{% endif %} />
|
||||
{% endfor %}
|
||||
{% for image in slides %}<div id="slide-content{{ loop.index }}" class="slide-content"><div><h6>{{ image.title }}</h6><p>{{ image.description|markdown }}</p>{% if image.url != '' %}<a href="{{ image.url }}">{{ image.btn }}</a>{% endif %}</div><img loading="lazy" src="{{ page.media[image.image].url|e }}" alt="Slide"></div>{% endfor %}
|
||||
<div class="slideshow-controls">
|
||||
{% for image in slides %}<label for="slide{{ loop.index }}"></label>{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
{% block custom_stylesheets %}
|
||||
{% do assets.addCss('theme://css/text.css', 10) %}
|
||||
{% if page.header.bgimage != '' %}{% do assets.addInlineCss("#textbg-#{ page.id } { z-index: 1; position: relative; } #textbg-#{ page.id }::before { content: ''; background-image: url(#{ page.media[page.header.bgimage].url }); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-position: center top; background-size: cover; background-repeat: no-repeat; #{ page.header.bgimgstyle } }", 10) %}{% endif %}
|
||||
{% if page.header.bgcolor != '' %}{% do assets.addInlineCss("#textbg-#{ page.id } { background-color: #{ page.header.bgcolor } }") %}{% endif %}
|
||||
{% if page.header.textstyle != '' %}{% do assets.addInlineCss("#textbg-#{ page.id } { #{ page.header.textstyle } }") %}{% endif %}
|
||||
{% endblock %}
|
||||
<div id="textbg-{{ page.id }}" class="page-cell{% if page.header.fullwidth == 1 %}-fullwidth{% endif %}">
|
||||
<div class="page-content-wrapper">
|
||||
<div class="page-text-wrapper">
|
||||
<div class="text-inner">{{ page.content|raw }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue