Add mediaView to press

Change post structure to include images
Add data for blog images

_data/images.yml

@@ -0,0 +1,9 @@
+new:
+    url: new.png
+    license:
+    origin:
+34C3:
+    url: 34c3_logo.png
+    name: 34C3 logo
+    author: Gregor Sedlag
+    origin: https://engelsystem.de/img/34c3_logo.png

_layouts/post.html

@@ -16,7 +16,21 @@ layout: blog_with-sidebar-post
     </header>
 
     <div class="post-content text-justify-sm" itemprop="articleBody">
+        {% if page.image %}
+        <div class="row">
+            <div class="col-md-3 col-img" onclick="viewMediaFile(this)" data-toggle="modal" data-target="#mediaFileView">
+                {% assign image = site.data.images[page.image] %}
+                <img src="/img/{{ image.url }}" class="img-responsive postImg" />
+                By <a href="{{ image.origin }}">{{ image.author }}</a>
+                {% if image.license %} under {{ image.license }}{% endif %}
+            </div>
+            <div class="col-md-9">
+                {{ content }}
+            </div>
+        </div>
+        {% else %}
         {{ content }}
+        {% endif %}
     </div>
 
     <div class="post-categories">
@@ -27,4 +41,12 @@ layout: blog_with-sidebar-post
         {% endfor %}
     </div>
 
+    <!-- Modal -->
+    <div id="mediaFileView" class="modal fade" role="dialog" data-dismiss="modal">
+        <img id="mediaFullScreen" src="" class="img-full-width screenshot-image" data-dismiss="modal"/>
+        <i class="fa fa-lg fa-times" aria-hidden="true" data-dismiss="modal" ></i>
+    </div> <!-- Modal -->
+
+    <script src="{{ site.baseurl }}/js/mediaview.js"></script>
+
 </article>

_posts/2017-12-18-34C3.md

@@ -5,9 +5,9 @@ short: NewPipe at 34C3
 date: 2017-12-18 05:00:00 +0100
 categories: [talk, pinned]
 author: TheAssassin
+image: 34C3
 ---
 
-<img src="/img/34c3_logo.png" class="postImg">
 In December, the annual [Chaos Communication Congress](https://events.ccc.de/2017/08/09/34c3-presale/) will take place. This is the 34th time hackers from all around the world meet and attend the largest hacker convention in Europe.
 
 Like last year Christian Schabesberger, the initial author and primary maintainer of NewPipe will talk about the deveopment progress of this year, and the roadmap of the next year.

_posts/2017-12-18-new-blog.md

@@ -5,9 +5,10 @@ short: Team NewPipe start blog
 date: 2017-12-18 01:00:00 +0200
 categories: [announcement, pinned]
 author: TheAssassin
+image: new
+imageHidePress: true
 ---
 
-<img src="/img/new.png" class="postImg"/>
 After two years of development, we decided to keep you up a little better about what we do. Therefore, today, we introduce our new blog, which will be used to announce releases, changes, and keep you up with all the cool stuff we work on.
 
 Since we started this blog only recently, we haven't decided on how to use it, and whether we consider publishing third-party posts. Therefore, feel free to contact us with ideas and/or texts. See [this page]({{ site.baseurl}}/press/contact/) for information how to get in touch with us.

blog/index.html

@@ -12,7 +12,20 @@ short: All posts
 <div class="border-box anchor-right-full-parent">
     <h4><a href="{{ BASE_PATH }}{{ post.url }}">{{ post.title }}</a></h4>
     <p><span>{{ post.date | date_to_string }}, by {{ post.author }}</span></p><br>
-    {{ post.content | truncatewords:100}}
+    {% if post.image %}
+    <div class="row">
+        <a href="{{ BASE_PATH }}{{ post.url }}">
+            <div class="col-md-3 col-img">
+                <img src="/img/{{ site.data.images[post.image].url }}" class="img-responsive postImg" />
+            </div>
+        </a>
+        <div class="col-md-9">
+            {{ post.content | truncatewords:100 }}
+        </div>
+    </div>
+    {% else %}
+    {{ post.content | truncatewords:100 }}
+    {% endif %}
     <p><a href="{{ post.url }}">Read more...</a></p>
     <p class="categories">
         {% for category in post.categories %}

css/blog.css

@@ -4,6 +4,10 @@ body, html {
 body {
     font-family: Arial;
 }
+body.modal-open {
+    padding: 0!important;
+    overflow-y: scroll;
+}
 .container .container {
     width:auto;
 }
@@ -468,11 +472,12 @@ strong.extra {
 
 
 /* Posts */
-.postImg {
-    width:200px;
-    padding-right:15px;
-    padding-bottom:15px;
-    float: left;
+.col-img {
+    text-align: center;
+    padding-bottom: 15px;
+}
+.col-img > img {
+    display: inline-block;
 }
 .navbar-fixed-top ~ .post-collection {
     margin-top: 64px;
@@ -553,12 +558,46 @@ strong.extra {
         background: transparent;
     }
 }
+@media (min-width: 992px) {
+    .col-img {
+        text-align: left;
+        padding-right: 5px;
+        padding-bottom: 0;
+    }
+}
 @media (max-width: 767px){
     .post-collection {
         padding-top: 20px;
     }
 }
-
+#mediaFileView .fa-times {
+    color: white;
+    position: absolute;
+    right: 40px;
+    top: 25px;
+    cursor: pointer;
+}
+#screenshots #mediaFileView .fa-times {
+    display: none;
+}
+#mediaFileView .fa-times:before {
+    height: 14px;
+}
+.img-full-width {
+    max-width: 85vw;
+    max-height: 85vh;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) !important;
+}
+@media (min-width: 767px) {
+    #mediaFileView .fa-times {
+        right: 40px;
+        top: 32px;
+        display: inline-block;
+    }
+}
 
 /* Sidebar */
 /*

css/press.css

@@ -37,10 +37,7 @@
         margin-top: 78px;
     }
 }
-body.modal-open {
-    padding: 0!important;
-    overflow-y: scroll;
-}
+
 
 
 /* Sidebar */
@@ -106,6 +103,12 @@ body.modal-open {
 
 /* Content */
 
+.hidden-press {
+    display: none;
+}
+.visible-press {
+    display: block;
+}
 .site-content {
     border-top: 2px solid white;
 }

css/style.css

@@ -1,7 +1,11 @@
-body, html {
+html, body {
     height: 100%;
     font-family: Arial;
 }
+body.modal-open {
+    padding: 0!important;
+    overflow-y: scroll;
+}
 .container .container {
     width: auto;
 }

press/announcements.html

@@ -15,7 +15,22 @@ metatitle: "Announcements - NewPipe a free YouTube client"
             <article>
                 <h4>{{ post.title }}</h4>
                 <p class="press-date">{{ post.date | date: "%B %-d, %Y" }}{% if post.author %}, {{ post.author }}{% endif %}</p>
+                {% if post.image and post.imageHidePress == true %}
                 {{ post.content }}
+                {% else if post.image %}
+                <div class="row">
+                    <a href="{{ BASE_PATH }}{{ post.url }}">
+                        <div class="col-md-3 col-img">
+                            <img src="/img/{{ site.data.images[post.image].url }}" class="img-responsive postImg" />
+                        </div>
+                    </a>
+                    <div class="col-md-9">
+                        {{ post.content }}
+                    </div>
+                </div>
+                {% else %}
+                {{ post.content }}
+                {% endif %}
             </article>
             {% endfor %}