serguzim/reitanlage-oranienburg
1
0
Fork 0
Code Issues Pull requests Releases18 Wiki Activity Actions

add: gallery

Browse source 
fix: blog
This commit is contained in:
Tobias Reisinger 2020-01-03 13:36:14 +01:00
parent c9def51b7e
commit 188bac429d
10 changed files with 255 additions and 74 deletions

49
css/custom.css
View file

@ -15,10 +15,57 @@ footer
.flex-fill
{
flex:1 1 auto;
flex: 1 1 auto;
}
.card-image img
{
width: 100%;
}
.card-columns img,video
{
width: 100%;
}
.card-columns
{
column-gap: 1em;
}
.card-columns.card
{
margin-bottom: 1em;
}
@media (min-width: 576px)
{
.card-columns
{
column-count: 2;
}
}
@media (min-width: 768px)
{
.card-columns
{
column-count: 3;
}
}
@media (min-width: 992px)
{
.card-columns
{
column-count: 4;
}
}
@media (min-width: 1200px)
{
.card-columns
{
column-count: 6;
}
}

7
templates/blog.html.twig
View file

@ -7,14 +7,17 @@
{% set show_pagination = header_var('show_pagination', [page, blog])|defined(true) %}
{% block content %}
{{ page.content }}
{% if show_breadcrumbs and config.plugins.breadcrumbs.enabled %}
{% include 'partials/breadcrumbs.html.twig' %}
{% endif %}
{% embed 'partials/layout.html.twig' with {blog: page} %}
{% block item %}
{% for child in collection %}
{% if not loop.first %}
<hr class="my-5">
{% if loop.first %}
<hr class="mb-4 mt-1">
{% else %}
<hr class="my-4">
{% endif %}
{% include 'partials/blog-list-item.html.twig' with {blog: page, page: child} %}
{% endfor %}

29
templates/gallery.html.twig Normal file
View file

@ -0,0 +1,29 @@
{% extends 'partials/base.html.twig' %}
{% set collection = page.collection() %}
{% set gallery = page.find(header_var('blog_url')|defined(theme_var('blog-page'))) %}
{% set show_breadcrumbs = header_var('show_breadcrumbs', [page, gallery])|defined(true) %}
{% block content %}
{{ page.content }}
{% if show_breadcrumbs and config.plugins.breadcrumbs.enabled %}
{% include 'partials/breadcrumbs.html.twig' %}
{% endif %}
{% for child in collection %}
{% if loop.first %}
<hr class="mb-4 mt-1">
{% else %}
<hr class="my-4">
{% endif %}
<a href="{{ child.url }}">
{{ child.content }}
<div class="card-columns">
{% for media_item in child.media.images[:10] %}
<div class="card">
{{ media_item.html }}
</div>
{% endfor %}
</div>
</a>
{% endfor %}
{% endblock %}

46
templates/item.html.twig
View file

@ -3,39 +3,19 @@
{% set show_breadcrumbs = header_var('show_breadcrumbs', [page, blog])|defined(true) %}
{% set show_sidebar = header_var('show_sidebar', [page, blog])|defined(true) %}
{% set show_pagination = header_var('show_pagination', [page, blog])|defined(true) %}
{% set hero_image_name = page.header.hero_image %}
{% block hero %}
{% if hero_image_name %}
{% set hero_image = page.media[hero_image_name] %}
{% set content %}
<h1>{{ page.title }}</h1>
<h2>{{ page.header.subtitle }}</h2>
{% include 'partials/blog/date.html.twig' %}
{% include 'partials/blog/taxonomy.html.twig' %}
{% endset %}
{% include 'partials/hero.html.twig' with {id: 'blog-hero'} %}
{% block content %}
{% if show_breadcrumbs and config.plugins.breadcrumbs.enabled %}
{% include 'partials/breadcrumbs.html.twig' %}
{% endif %}
{% endblock %}
{% block body %}
<section id="body-wrapper" class="section blog-listing">
<section class="container {{ grid_size }}">
{% if show_breadcrumbs and config.plugins.breadcrumbs.enabled %}
{% include 'partials/breadcrumbs.html.twig' %}
{% endif %}
{% embed 'partials/layout.html.twig' %}
{% block item %}
{% include 'partials/blog-item.html.twig' %}
{% endblock %}
{% block sidebar %}
{% include 'partials/sidebar.html.twig' %}
{% endblock %}
{% endembed %}
</section>
</section>
<hr class="mb-4 mt-1">
{% embed 'partials/layout.html.twig' %}
{% block item %}
{% include 'partials/blog-item.html.twig' %}
{% endblock %}
{% block sidebar %}
{% include 'partials/sidebar.html.twig' %}
{% endblock %}
{% endembed %}
{% endblock %}

4
templates/partials/base.html.twig
View file

@ -18,16 +18,12 @@
{# do assets.addCss('https://unpkg.com/purecss@1.0.0/build/pure-min.css', 100) #}
{% do assets.addCss('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css', 100) %}
{% do assets.addCss('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', 99) %}
{% do assets.addCss('theme://css/photoswipe.css', 98) %}
{% do assets.addCss('theme://css/default-skin/default-skin.css', 97) %}
{% do assets.addCss('theme://css/custom.css', 96) %}
{% endblock %}
{% block javascripts %}
{% do assets.addJs('jquery', 100) %}
{% do assets.addJs('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', 99) %}
{% do assets.addJs('theme://js/photoswipe.min.js', 98) %}
{% do assets.addJs('theme://js/photoswipe-ui-default.min.js', 98) %}
{% endblock %}
{% block assets deferred %}

16
templates/partials/blog-list-item.html.twig
View file

@ -5,12 +5,12 @@
<a href="{{ page.url }}" class="w-100">{{ image.cropZoom(800,400).html|raw }}</a>
</div>
{% endif %}
<div class="card-header container-fluid row mx-0">
<div class="col-12 col-sm-9">
<div class="card-header mx-0">
<div>
{% include 'partials/blog/title.html.twig' with {title_level: 'h5'} %}
</div>
<div class="col-12 col-sm-3 text-gray">
{% include 'partials/blog/date.html.twig' %}
<div class="text-gray ">
<small>{% include 'partials/blog/date.html.twig' %}</small>
</div>
</div>
<div class="card-body">
@ -20,8 +20,10 @@
{{ page.content|raw }}
{% endif %}
</div>
<div class="card-footer p-1">
{% include 'partials/blog/taxonomy.html.twig' %}
</div>
{% if page.taxonomy.tag %}
<div class="card-footer p-1">
{% include 'partials/blog/taxonomy.html.twig' %}
</div>
{% endif %}
</div>

2
templates/partials/blog/date.html.twig
View file

@ -1,5 +1,5 @@
<span class="blog-date">
<time class="dt-published" datetime="{{ page.date|date("c") }}">
<i class="fa fa-calendar"></i> {{ page.date|date(system.pages.dateformat.short) }}
<i class="fa fa-calendar"></i> {{ page.date|date("D d.m.Y H:i") }}
</time>
</span>

66
templates/partials/photoswipe.html.twig Normal file
View file

@ -0,0 +1,66 @@
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- Background of PhotoSwipe.
It's a separate element as animating opacity is faster than rgba(). -->
<div class="pswp__bg"></div>
<!-- Slides wrapper with overflow:hidden. -->
<div class="pswp__scroll-wrap">
<!-- Container that holds slides.
PhotoSwipe keeps only 3 of them in the DOM to save memory.
Don't modify these 3 pswp__item elements, data is added later on. -->
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<!-- Controls are self-explanatory. Order can be changed. -->
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share" title="Share"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
<!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
<!-- element will get class pswp__preloader--active when preloader is running -->
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
</button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
</button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>

42
templates/partials/sidebar.html.twig
View file

@ -6,38 +6,28 @@
{% include 'partials/simplesearch_searchbox.html.twig' %}
</div>
{% endif %}
{% if config.plugins.relatedpages.enabled and related_pages|length > 0 %}
<div class="sidebar-content">
<h4>{{ 'THEME_QUARK.SIDEBAR.RELATED_POSTS.HEADLINE'|t }}</h4>
{% include 'partials/relatedpages.html.twig' %}
</div>
{% endif %}
{% if config.plugins.random.enabled %}
<div class="sidebar-content">
<h4>{{ 'THEME_QUARK.SIDEBAR.RANDOM_ARTICLE.HEADLINE'|t }}</h4>
<a class="button" href="{{ base_url }}/random"><i class="fa fa-retweet"></i> {{ 'THEME_QUARK.SIDEBAR.RANDOM_ARTICLE.FEELING_LUCKY'|t }}</a>
</div>
{% endif %}
{{ page.find('/modules/sidebar').content|raw }}
{% if config.plugins.taxonomylist.enabled %}
<div class="sidebar-content">
<h4>Tags in diesem Blog</h4>
{% include 'partials/taxonomylist.html.twig' with {'base_url':new_base_url, 'taxonomy':'tag'} %}
</div>
<div class="sidebar-content">
<h4>Tags in diesem Blog</h4>
{% include 'partials/taxonomylist.html.twig' with {'base_url':new_base_url, 'taxonomy':'tag'} %}
</div>
<hr>
{% endif %}
{% if config.plugins.archives.enabled %}
<div class="sidebar-content">
<h4>Archiv</h4>
{% include 'partials/archives.html.twig' with {'base_url':new_base_url} %}
</div>
<div class="sidebar-content">
<h4>Archiv</h4>
{% include 'partials/archives.html.twig' with {'base_url':new_base_url} %}
</div>
<hr>
{% endif %}
{% if config.plugins.feed.enabled %}
<div class="sidebar-content syndicate">
<h4>Blog abonnieren</h4>
<a class="btn" href="{{ feed_url }}.atom"><i class="fa fa-rss-square"></i> Atom 1.0</a>
<a class="btn" href="{{ feed_url }}.rss"><i class="fa fa-rss-square"></i> RSS</a>
{% if config.plugins.feed.enable_json_feed %}<a class="btn" href="{{ feed_url }}.json"><i class="fa fa-rss-square"></i> JSON</a>{% endif %}
</div>
<div class="sidebar-content syndicate">
<h4>Blog abonnieren</h4>
<a class="btn" href="{{ feed_url }}.atom"><i class="fa fa-rss-square"></i> Atom 1.0</a>
<a class="btn" href="{{ feed_url }}.rss"><i class="fa fa-rss-square"></i> RSS</a>
{% if config.plugins.feed.enable_json_feed %}<a class="btn" href="{{ feed_url }}.json"><i class="fa fa-rss-square"></i> JSON</a>{% endif %}
</div>
{% endif %}

68
templates/pictures.html.twig Normal file
View file

@ -0,0 +1,68 @@
{% extends 'partials/base.html.twig' %}
{% set blog = page.find(header_var('blog_url')|defined(theme_var('blog-page'))) %}
{% set show_breadcrumbs = header_var('show_breadcrumbs', [page, blog])|defined(true) %}
{% block stylesheets %}
{% do assets.addCss('theme://css/photoswipe.css') %}
{% do assets.addCss('theme://css/default-skin/default-skin.css') %}
{{ parent() }}
{% endblock %}
{% block javascripts %}
{{ parent() }}
{% do assets.addJs('theme://js/photoswipe.min.js') %}
{% do assets.addJs('theme://js/photoswipe-ui-default.min.js') %}
{% endblock %}
{% set image_counter = 0 %}
{% block content %}
{% if show_breadcrumbs and config.plugins.breadcrumbs.enabled %}
{% include 'partials/breadcrumbs.html.twig' %}
{% endif %}
<hr class="mb-4 mt-1">
{{ page.content }}
<div class="card-columns">
{% for media_item in page.media.videos %}
<div class="card">
{{ media_item.html }}
</div>
{% endfor %}
</div>
<div class="card-columns">
{% for media_item in page.media.images %}
<div class="card" onclick="show_photoswipe({{ loop.index - 1 }})">
{{ media_item.html }}
</div>
{% endfor %}
</div>
{{ dump (image_counter) }}
{% include 'partials/photoswipe.html.twig' %}
<script>
let pswpElement = document.querySelectorAll('.pswp')[0];
let items = [
{% for media_item in page.media.images %}
{
src: '{{ media_item.url }}',
w: {{ media_item.width }},
h: {{ media_item.height }}
},
{% endfor %}
];
function show_photoswipe(start_index)
{
let options = {
index: start_index
};
let gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
}
</script>
{% endblock %}