[SITE] add template, blueprint, css for photo pages

2016-04-05 18:38:00 +02:00 · 2016-04-05 18:38:00 +02:00 · c79ea83e0d
parent e810aa8071
commit c79ea83e0d
20 changed files with 494 additions and 703 deletions
--- a/.brackets.json
+++ b/.brackets.json
@ -5,26 +5,32 @@
            "sass.enabled": true,
            "sass.options": {
                "outputDir": "../css/",
-        "includePaths": ["../vendors/bootstrap/scss/"],
-        "sourceComments": true,
+                "includePaths": [
+                    "../vendors/bootstrap/scss/"
+                ],
+                "sourceComments": false,
                "outputStyle": "nested"
-      }
+            },
+            "linting.collapsed": false
        },
        "assets/scss/templates/*": {
            "sass.enabled": true,
            "sass.options": {
                "outputDir": "../../css/templates",
-        "includePaths": ["../../vendors/bootstrap/scss/"],
-        "sourceComments": true,
+                "includePaths": [
+                    "../../vendors/bootstrap/scss/"
+                ],
+                "sourceComments": false,
                "outputStyle": "nested"
-      }
+            },
+            "linting.collapsed": true
        },
        "assets/vendors/bootstrap/scss/*": {
            "sass.enabled": true,
            "sass.options": {
                "outputDir": "../../../css/twbs/",
                "includePaths": [],
-        "sourceComments": true,
+                "sourceComments": false,
                "outputStyle": "nested"
            }
        }
--- a/assets/css/foundation.css
+++ b/assets/css/foundation.css
--- a/assets/css/foundation.css.map
+++ b/assets/css/foundation.css.map
--- a/assets/css/main.css
+++ b/assets/css/main.css
@ -1,130 +1,106 @@
 /* STYLE for jannikbeyerstedt.de
 * generic styles
 */
-/* line 11, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
 body {
  margin: 0;
  font-family: 'Alegreya Sans', "Verdana", "Arial", sans-serif;
  min-width: 300px; }

-/* line 16, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
 h1, h2, h3, h4 {
  margin-bottom: 18px;
  font-family: 'Crimson Text', serif; }

-/* line 20, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
 h5 {
  margin-bottom: 8px; }

-/* line 23, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
 h6 {
  margin-bottom: 5px; }

-/* line 26, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
 p {
  margin-top: 0;
  line-height: 1.5em; }

-/* line 34, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+main div.container {
+  margin-top: 10px; }
+  @media (min-width: 992px) {
+    main div.container {
+      max-width: 940px; } }
+
 header {
-  margin-bottom: 20px; }
-  /* line 36, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+  margin-bottom: 10px; }
  header img {
    width: 75px;
    height: 75px;
    float: left; }

-/* line 49, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
 nav {
  box-sizing: border-box; }
-  /* line 51, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
  nav ul.nav {
    margin: 0;
    padding-left: 0; }
-    /* line 54, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
    nav ul.nav a {
      text-decoration: none;
      background-color: inherit;
      color: inherit; }
-    /* line 59, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
    nav ul.nav li {
      list-style-type: none; }
-    /* line 62, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
    nav ul.nav a:hover, nav ul.nav a:focus {
      text-decoration: none; }

@media (min-width: 544px) {
-  /* line 68, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
  nav {
    float: right;
    height: 75px; }
-    /* line 72, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
    nav ul.nav a {
      float: left;
      text-align: center;
      font-size: 16px;
      padding: 45px 0 5px;
      width: 109px; }
-    /* line 80, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
    nav ul.nav a:hover, nav ul.nav a:focus, nav ul.nav a.active {
      color: #fff;
      background-color: #0060e3; }
-    /* line 85, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
    nav ul.nav.home {
      color: #fff; }
-      /* line 87, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
      nav ul.nav.home a {
        background-color: #1779ff;
        border-right: 1px solid #0055ca; }
-      /* line 91, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
      nav ul.nav.home a:last-child {
        border-right: 0; }
-      /* line 95, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
      nav ul.nav.home a.active {
        color: #fff;
        border-bottom: 4px solid #2da301;
        padding-bottom: 1px; }
-    /* line 101, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
    nav ul.nav.main, nav ul.nav.second {
      height: 37.5px; }
-      /* line 103, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
      nav ul.nav.main a, nav ul.nav.second a {
        padding: 8px 0 5.5px; }
-    /* line 107, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
    nav ul.nav.main {
      color: #1779ff; }
-      /* line 109, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
      nav ul.nav.main a.active {
        color: #fff;
        border-bottom: 4px solid #2da301;
        padding-bottom: 1.5px; }
-    /* line 115, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
    nav ul.nav.second {
      color: #fff; }
-      /* line 117, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
      nav ul.nav.second a {
        background-color: #1779ff; }
-      /* line 120, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
      nav ul.nav.second a.active {
        border-bottom: 4px solid #2da301;
        padding-bottom: 1.5px; } }

@media (max-width: 543px) {
-  /* line 129, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
  nav button.navbar-toggler {
    float: right;
    margin-top: 10px;
    font-family: inherit;
    font-weight: 300; }
-  /* line 136, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
  nav ul.mobileNav a {
    font-size: 18px;
    font-weight: 300; }
-  /* line 140, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
  nav ul.mobileNav a.active {
    color: #4a96ff;
    font-weight: 700; }
-  /* line 149, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
  .navbar-toggler {
    padding: 0.5rem 0.75rem;
    font-size: 1.25rem;
@ -132,55 +108,45 @@ nav {
    background: none;
    border: 1px solid transparent;
    border-radius: 0.25rem; }
-    /* line 21, /Users/jannik/Sites/aquila-jannik4/assets/vendors/bootstrap/scss/mixins/_hover.scss */
    .navbar-toggler:focus,
    .navbar-toggler:hover {
      text-decoration: none; } }

-/* line 165, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
 footer {
  margin-top: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
-  background-color: #bebebe; }
-  /* line 172, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
+  background-color: #bebebe;
+  color: #000; }
  footer p {
    margin-bottom: 0; }
  @media (max-width: 543px) {
-    /* line 165, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
    footer {
      text-align: center; }
-      /* line 178, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
      footer p {
        margin-bottom: 10px; } }
-  /* line 183, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
  footer i.fa {
    color: #000;
    font-size: 1.4rem;
    padding-right: 0.2em; }
-  /* line 188, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
  footer a > svg {
    height: 1.4rem;
    width: 1.4rem;
    position: relative;
    top: 0.18rem; }
-    /* line 192, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
    footer a > svg image {
      height: 1.4rem;
      width: 1.4rem; }

 /* make footer sticky */
-/* line 203, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
 html {
  position: relative;
  min-height: 100%; }

@media (min-width: 544px) {
-  /* line 208, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
  body {
    /* Margin bottom by footer height */
    margin-bottom: 85px; }
-  /* line 212, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
  footer {
    position: absolute;
    bottom: 0;
@ -188,11 +154,9 @@ html {
    height: 85px; } }

@media (max-width: 543px) {
-  /* line 220, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
  body {
    /* Margin bottom by footer height */
    margin-bottom: 162px; }
-  /* line 224, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
  footer {
    position: absolute;
    bottom: 0;
@ -202,26 +166,21 @@ html {
 /*
 * HELPERS
 */
-/* line 237, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
 .right {
  text-align: right; }

-/* line 240, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
 .center {
  text-align: center; }

@media (max-width: 543px) {
-  /* line 244, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
  .col-xxs-12.right, .col-xxs-12.center {
    text-align: inherit; } }

 /* to break down col-xs */
-/* line 250, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
 .visible-xxs {
  display: none !important; }

@media (max-width: 543px) {
-  /* line 254, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
  .col-xxs-12 {
    float: none;
    width: 100%;
@ -231,10 +190,8 @@ html {
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px; }
-  /* line 263, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
  .hidden-xxs {
    display: none !important; }
-  /* line 266, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
  .visible-xxs {
    display: block !important; } }

--- a/assets/css/main.css.map
+++ b/assets/css/main.css.map
--- a/assets/css/templates/photo.css
+++ b/assets/css/templates/photo.css
@ -0,0 +1,211 @@
+/* STYLE for jannikbeyerstedt.de
+ * for specific template
+ */
+body {
+  background-color: #424242;
+  color: #fff; }
+
+@media (min-width: 544px) {
+  nav ul.nav.main {
+    color: #fff; } }
+
+div.carousel {
+  max-width: 1300px;
+  margin: 0 auto; }
+
+.img-fluid, .carousel-inner > .carousel-item > img,
+.carousel-inner > .carousel-item > a > img {
+  display: block;
+  max-width: 100%;
+  height: auto; }
+
+.img-rounded {
+  border-radius: 0.3rem; }
+
+.img-thumbnail {
+  padding: 0.25rem;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 0.25rem;
+  transition: all 0.2s ease-in-out;
+  display: inline-block;
+  max-width: 100%;
+  height: auto; }
+
+.img-circle {
+  border-radius: 50%; }
+
+.figure {
+  display: inline-block; }
+
+.figure-img {
+  margin-bottom: 0.5rem;
+  line-height: 1; }
+
+.figure-caption {
+  font-size: 90%;
+  color: #818a91; }
+
+.carousel {
+  position: relative; }
+
+.carousel-inner {
+  position: relative;
+  width: 100%;
+  overflow: hidden; }
+  .carousel-inner > .carousel-item {
+    position: relative;
+    display: none;
+    transition: .6s ease-in-out left; }
+    .carousel-inner > .carousel-item > img,
+    .carousel-inner > .carousel-item > a > img {
+      line-height: 1; }
+    @media all and (transform-3d), (-webkit-transform-3d) {
+      .carousel-inner > .carousel-item {
+        transition: transform 0.6s ease-in-out;
+        backface-visibility: hidden;
+        perspective: 1000px; }
+        .carousel-inner > .carousel-item.next,
+        .carousel-inner > .carousel-item.active.right {
+          left: 0;
+          transform: translate3d(100%, 0, 0); }
+        .carousel-inner > .carousel-item.prev,
+        .carousel-inner > .carousel-item.active.left {
+          left: 0;
+          transform: translate3d(-100%, 0, 0); }
+        .carousel-inner > .carousel-item.next.left,
+        .carousel-inner > .carousel-item.prev.right,
+        .carousel-inner > .carousel-item.active {
+          left: 0;
+          transform: translate3d(0, 0, 0); } }
+  .carousel-inner > .active,
+  .carousel-inner > .next,
+  .carousel-inner > .prev {
+    display: block; }
+  .carousel-inner > .active {
+    left: 0; }
+  .carousel-inner > .next,
+  .carousel-inner > .prev {
+    position: absolute;
+    top: 0;
+    width: 100%; }
+  .carousel-inner > .next {
+    left: 100%; }
+  .carousel-inner > .prev {
+    left: -100%; }
+  .carousel-inner > .next.left,
+  .carousel-inner > .prev.right {
+    left: 0; }
+  .carousel-inner > .active.left {
+    left: -100%; }
+  .carousel-inner > .active.right {
+    left: 100%; }
+
+.carousel-control {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 15%;
+  font-size: 20px;
+  color: #fff;
+  text-align: center;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
+  opacity: 0.5; }
+  .carousel-control.left {
+    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); }
+  .carousel-control.right {
+    right: 0;
+    left: auto;
+    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); }
+  .carousel-control:focus,
+  .carousel-control:hover {
+    color: #fff;
+    text-decoration: none;
+    outline: 0;
+    opacity: .9; }
+  .carousel-control .icon-prev,
+  .carousel-control .icon-next {
+    position: absolute;
+    top: 50%;
+    z-index: 5;
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    margin-top: -10px;
+    font-family: serif;
+    line-height: 1; }
+  .carousel-control .icon-prev {
+    left: 50%;
+    margin-left: -10px; }
+  .carousel-control .icon-next {
+    right: 50%;
+    margin-right: -10px; }
+  .carousel-control .icon-prev::before {
+    content: "\2039"; }
+  .carousel-control .icon-next::before {
+    content: "\203a"; }
+
+.carousel-indicators {
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  z-index: 15;
+  width: 60%;
+  padding-left: 0;
+  margin-left: -30%;
+  text-align: center;
+  list-style: none; }
+  .carousel-indicators li {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    margin: 1px;
+    text-indent: -999px;
+    cursor: pointer;
+    background-color: transparent;
+    border: 1px solid #fff;
+    border-radius: 10px; }
+  .carousel-indicators .active {
+    width: 12px;
+    height: 12px;
+    margin: 0;
+    background-color: #fff; }
+
+.carousel-caption {
+  position: absolute;
+  right: 15%;
+  bottom: 20px;
+  left: 15%;
+  z-index: 10;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  color: #fff;
+  text-align: center;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
+  .carousel-caption .btn {
+    text-shadow: none; }
+
+@media (min-width: 544px) {
+  .carousel-control .icon-prev,
+  .carousel-control .icon-next {
+    width: 30px;
+    height: 30px;
+    margin-top: -15px;
+    font-size: 30px; }
+  .carousel-control .icon-prev {
+    margin-left: -15px; }
+  .carousel-control .icon-next {
+    margin-right: -15px; }
+  .carousel-caption {
+    right: 20%;
+    left: 20%;
+    padding-bottom: 30px; }
+  .carousel-indicators {
+    bottom: 20px; } }
+
+/*# sourceMappingURL=photo.css.map */
--- a/assets/css/templates/photo.css.map
+++ b/assets/css/templates/photo.css.map
--- a/assets/scss/_mainvariables.scss
+++ b/assets/scss/_mainvariables.scss
@ -0,0 +1,8 @@
+$fontcolor: #000;
+$col_xxs_bp: 543px;
+
+$nav_bgColor: #1779ff;
+$nav_borderColor: darken($nav_bgColor, 15%);
+$nav_fgColor: #fff;
+$nav_textXsWidth: 80px;
+$nav_textSmWidth: 109px;
--- a/assets/scss/foundation.scss
+++ b/assets/scss/foundation.scss
@ -49,3 +49,12 @@

 // Utility classes
@import "utilities";
+
+
+// bugfixes:
+@include media-breakpoint-down(xs) {
+  .row {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@ -5,8 +5,7 @@
@import "variables";
@import "mixins";

-$fontcolor: #000;
-$col_xxs_bp: 543px;
+@import "mainvariables";

 body {
  margin: 0;
@ -28,11 +27,18 @@ p {
  line-height: 1.5em;
 }

+main div.container {
+  margin-top: 10px;
+  @include media-breakpoint-up(lg) {
+    max-width: 940px;
+  }
+}
+

 $header_logoSize: 75px;

 header {
-  margin-bottom: 20px;
+  margin-bottom: 10px;
  img {
    width: $header_logoSize;
    height: $header_logoSize;
@ -41,11 +47,7 @@ header {
  }
 }

-$nav_bgColor: #1779ff;
-$nav_borderColor: darken($nav_bgColor, 15%);
-$nav_fgColor: #fff;
-$nav_textXsWidth: 80px;
-$nav_textSmWidth: 109px;
+
 nav {
  box-sizing: border-box;
  ul.nav {
@ -144,7 +146,7 @@ nav {
    }
  }

-  // from boostrap
+  // ---- from boostrap ----
  // @requires animation.scss and collapse.js, util.js
  .navbar-toggler {
    padding: .5rem .75rem;
@ -168,6 +170,7 @@ footer {
  padding-bottom: 20px;

  background-color: #bebebe;
+  color: $fontcolor;

  p {
    margin-bottom: 0;
--- a/assets/scss/templates/photo.scss
+++ b/assets/scss/templates/photo.scss
@ -0,0 +1,42 @@
+/* STYLE for jannikbeyerstedt.de
+ * for specific template
+ */
+@import "custom";
+@import "variables";
+@import "mixins";
+
+@import "../mainvariables";
+
+// change main.scss behavior
+body {
+  background-color: #424242;
+  color: #fff;
+}
+@include media-breakpoint-up(sm) {
+  nav {
+    ul.nav.main {
+      color: $nav_fgColor;
+    }
+  }
+}
+
+
+// additional css
+main.photo {
+  .container {
+    
+  }
+}
+
+div.carousel {
+  max-width: 1300px;
+  margin: 0 auto;
+}
+
+
+
+// ---- from boostrap ----
+// @requires animation.scss (already in main.scss) and carousel.js, util.js
+@import "images";
+
+@import "carousel";
--- a/site/blueprints/home.yaml
+++ b/site/blueprints/home.yaml
@ -1,6 +1,8 @@
 title: Page
 pages: true
+
 files: true
+
 fields:
  title:
    label: Title
--- a/site/blueprints/photo.yaml
+++ b/site/blueprints/photo.yaml
@ -0,0 +1,22 @@
+title: Photo
+pages:
+  build:
+    - title: carousel
+      uid:   carousel
+      template: carousel
+  template:
+    - photo
+    - carousel
+
+files: true
+
+fields:
+  title:
+    label: Title
+    type:  text
+  text:
+    label: Text
+    type:  textarea
+  text2:
+    label: Text below masonry
+    type:  textarea
--- a/site/blueprints/redirect.yaml
+++ b/site/blueprints/redirect.yaml
@ -0,0 +1,19 @@
+title: Page
+pages: true
+
+files: false
+
+fields:
+  title:
+    label: Title (not used)
+    type:  text
+  target:
+    label: Target
+    type:  page
+  red_type:
+    label: Redirect Type
+    type: radio
+    default: temporarly
+    options:
+      temp: temporarly (302)
+      perm: permanent (301)
--- a/site/blueprints/site.yaml
+++ b/site/blueprints/site.yaml
@ -3,6 +3,7 @@ Title: Site
 pages:
  template:
    - default
+    - redirect

 fields:
  title:
--- a/site/config/config.php
+++ b/site/config/config.php
@ -31,17 +31,17 @@ Modules Configuration
 */

 // plg-carousel
-//c::set('plg_carousel.enable', true);
-//c::set('plg_carousel.sort', 'sort'); // sortBy parameter: sort, title, etc.
-//c::set('plg_carousel.dir', 'asc');   // sortBy direction: asc, desc
+c::set('plg_carousel.enable', true);
+c::set('plg_carousel.sort', 'sort'); // sortBy parameter: sort, title, etc.
+c::set('plg_carousel.dir', 'asc');   // sortBy direction: asc, desc

 // plg-masonry
-//c::set('plg_masonry.enable', true);
-//c::set('plg_masonry.width', 170);
+c::set('plg_masonry.enable', true);
+c::set('plg_masonry.width', 170);
 //c::set('plg_masonry.sizelimit', 1300);  // limit the source image size (long edge)
-//c::set('plg_masonry.sort', 'sort');     // sortBy parameter: sort, title, etc.
-//c::set('plg_masonry.dir', 'asc');       // sortBy direction: asc, desc
-//c::set('plg_masonry.lightbox', 'swipebox');
+c::set('plg_masonry.sort', 'sort');     // sortBy parameter: sort, title, etc.
+c::set('plg_masonry.dir', 'asc');       // sortBy direction: asc, desc
+c::set('plg_masonry.lightbox', 'swipebox');

 // plg-navbar style:
 //c::set('navbar-class', 'navbar-inverse navbar-fixed-top');
@ -49,8 +49,8 @@ Modules Configuration
 //c::set('navbar-affix', true);

 // bastians columns.php plugin from https://github.com/getkirby/plugins/tree/master/columns
-//c::set('columns.container', 'row');
-//c::set('columns.item', 'col-sm-6 columns');
+c::set('columns.container', 'row');
+c::set('columns.item', 'col-sm-6 columns');

 // enhanced sitemap by Jannik Beyerstedt:
 c::set('smap_ignoreSite',     array('sitemap', 'error', 'home'));
--- a/site/snippets/base/html-end.php
+++ b/site/snippets/base/html-end.php
@ -12,6 +12,7 @@
 <?php
 echo js('assets/vendors/bootstrap/js/dist/util.js');
 echo js('assets/vendors/bootstrap/js/dist/collapse.js');
+echo js('assets/vendors/bootstrap/js/dist/carousel.js');
 ?>

 <?php if (c::get('navbar-affix')) : ?>
@ -32,14 +33,6 @@ echo js('assets/vendors/bootstrap/js/dist/collapse.js');
  echo js('assets/vendors/swipebox/src/js/jquery.swipebox.min.js');
 }?>

-<?php if (c::get('plg_carousel.enable')) : ?>
-  <script type="text/javascript">
-    $(document).ready(function () {
-      $('.carousel').carousel('cycle');
-    });
-  </script>
-<?php endif; ?>
-
 <?php if ((c::get('plg_masonry.lightbox')=='swipebox')) : ?>
  <script type="text/javascript">
  $(document).ready(function () {
--- a/site/snippets/plg-carousel.php
+++ b/site/snippets/plg-carousel.php
@ -0,0 +1,58 @@
+<?php
+// -------------------------------------------
+// kirby snippet GENERAL
+// Title:  plg-carousel
+// funct:  twitter bootstap carousel for photos in carousel subpage (folder)
+//         modified for bootstrap 4 !
+
+// copyright: Jannik Beyerstedt | http://jannikbeyerstedt.de | code@jannikbeyerstedt.de
+// license: http://www.gnu.org/licenses/gpl-3.0.txt GPLv3 License
+
+// usage:
+// snippet('plg-carousel', array('currentPage'=>$page,
+//                               'preNormal'=>'optional html to add before carousel',
+//                               'preAlt'=>'html if snippet is not displayed (for other styles)'))
+
+// and set these constants in config.php:
+//c::set('plg_carousel.sort', 'sort'); // sortBy parameter: sort, title, etc.
+//c::set('plg_carousel.dir', 'asc');   // sortBy direction: asc, desc
+// -------------------------------------------
+
+// display carousel only if there are images
+$carouselFolder = $currentPage->children()->find('carousel');
+if (!isset($preNormal)) {$preNormal="";}
+if (!isset($preAlt)) {$preAlt="";}
+$sort = c::get('plg_carousel.sort', 'title');
+$sdir = c::get('plg_carousel.dir', 'desc');
+
+// if folder exists
+if (!(false==$carouselFolder) && ($carouselFolder->hasImages())) : echo $preNormal
+?>
+
+  <div id="myCarousel" class="carousel slide" data-ride="carousel">
+
+    <!-- Indicators -->
+    <ol class="carousel-indicators">
+<?php $n=-1; foreach($carouselFolder->images()->sortBy($sort, $sdir) as $image): $n++; ?>
+        <li data-target="#myCarousel" data-slide-to="<?php echo $n ?>" class="<?php if($n==0) echo ' active' ?>"></li>
+<?php endforeach ?>
+    </ol>
+
+    <div class="carousel-inner" role="listbox">
+<?php $n=-1; foreach($carouselFolder->images()->sortBy($sort, $sdir) as $image): $n++; ?>
+      <div class="carousel-item<?php if($n==0) echo ' active' ?>">
+        <img src="<?php echo $image->url() ?>" alt="<?php echo $image->title()->html() ?>" />
+        <div class="carousel-caption">
+          <h3><?php echo $image->heading()->kirbytext() ?></h3>
+          <?php echo $image->caption()->kirbytext() ?>
+        </div>
+      </div>
+<?php endforeach ?>
+    </div>
+    <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
+    <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
+  </div>
+
+<?php else : echo $preAlt ?>
+
+<?php endif ?>
--- a/site/templates/photo.php
+++ b/site/templates/photo.php
@ -0,0 +1,31 @@
+<?php
+// -------------------------------------------
+// kirby template FOR jannikbeyerstedt.de
+
+// copyright: Jannik Beyerstedt | https://jannikbeyerstedt.de
+// license: http://www.gnu.org/licenses/gpl-3.0.txt GPLv3 License
+// -------------------------------------------
+
+snippet('base/html-head');
+snippet('base/cont-header');
+?>
+
+<main class="section photo">
+
+  <?php echo snippet('plg-carousel', array('currentPage'=>$page,
+                                           'preNormal'=>'',
+                                           'preAlt'=>'')); ?>
+
+  <div class="container">
+    <?php echo $page->text()->kirbytext(); ?>
+  </div>
+
+  <?php echo snippet('plg/plg-masonry-sb', array('currentPage'=>$page)) ; ?>
+  
+  <div class="container">
+    <?php echo $page->text2()->kirbytext(); ?>
+  </div>
+</main>
+
+<?php snippet('base/cont-footer') ?>
+<?php snippet('base/html-end') ?>
--- a/site/templates/redirect.php
+++ b/site/templates/redirect.php
@ -0,0 +1,18 @@
+<?php
+// -------------------------------------------
+// kirby template FOR jannikbeyerstedt.de
+
+// copyright: Jannik Beyerstedt | https://jannikbeyerstedt.de
+// license: http://www.gnu.org/licenses/gpl-3.0.txt GPLv3 License
+// -------------------------------------------
+
+$target = $page->target()->url();
+if ($page->red_type() == 'temp') {
+  $code = 302;
+}else if ($page->red_type() == 'perm') {
+  $code = 301;
+}else {
+  $code = 302;
+}
+header::redirect($target, $code);
+?>