Skip to content
Snippets Groups Projects
Commit e86a0067 authored by Lukas Ruge's avatar Lukas Ruge
Browse files

some improvements on how the media pages look

parent c4f24c2a
No related branches found
No related tags found
No related merge requests found
Pipeline #15731 passed
Showing
with 115 additions and 27 deletions
......@@ -4,6 +4,7 @@ title: 5 Minuten Termine
acronym: 5min
ecki: true
base_url: https://chaotikum.org/conferences/5min/
logo: /assets/5mintlogo.png
---
Ein Vortrag im Rahmen der Fünf-Minuten-Termine. Die Idee ist eigentlich einfach: Ab und zu nutzen wir das volle Haus und jede Person, die möchte, kann kurz vorstellen, was auch immer ihr vorschwebt.
......@@ -5,5 +5,6 @@ acronym: freitalk
name_before_title: true
ecki: true
base_url: https://chaotikum.org/conferences/freitalk/
logo: /assets/chaotikumlogo400.png5
---
......@@ -4,6 +4,7 @@ title: "Hacks on the Harbour 2023"
acronym: hoth23
ecki: false
base_url: https://hoth.info/
logo: /assets/hoth.png
---
......@@ -3,6 +3,7 @@ layout: conference
title: Night of open Knowledge 2017
acronym: nook2017
base_url: https://2017.nook-luebeck.de/
logo: /assets/nook.png
---
Die Night of Open Knowledge (Nook) in Lübeck ist eine offene Vortragsveranstaltung, die einem weiten Publikum Einblicke in die verschiedene Bereiche der Informatik, aber auch technikfremde Themen bietet. Die Nook wird vom Chaotikum e.V. aus Lübeck und der studentischen Gruppe MetaMeute der Uni Lübeck veranstaltet. https://nook-luebeck.de/
\ No newline at end of file
......@@ -3,6 +3,7 @@ layout: conference
title: Night of open Knowledge 2018
acronym: nook2018
base_url: https://2018.nook-luebeck.de/
logo: /assets/nook.png
---
Die Night of Open Knowledge (Nook) in Lübeck ist eine offene Vortragsveranstaltung, die einem weiten Publikum Einblicke in die verschiedene Bereiche der Informatik, aber auch technikfremde Themen bietet. Die Nook wird vom Chaotikum e.V. aus Lübeck und der studentischen Gruppe MetaMeute der Uni Lübeck veranstaltet. https://nook-luebeck.de/
\ No newline at end of file
......@@ -3,6 +3,7 @@ layout: conference
title: Night of open Knowledge 2019
acronym: nook2019
base_url: https://2019.nook-luebeck.de/
logo: /assets/nook.png
---
Die Night of Open Knowledge (Nook) in Lübeck ist eine offene Vortragsveranstaltung, die einem weiten Publikum Einblicke in die verschiedene Bereiche der Informatik, aber auch technikfremde Themen bietet. Die Nook wird vom Chaotikum e.V. aus Lübeck und der studentischen Gruppe MetaMeute der Uni Lübeck veranstaltet. https://nook-luebeck.de/
\ No newline at end of file
......@@ -3,6 +3,7 @@ layout: conference
title: Night of open Knowledge 2022
acronym: nook2022
base_url: https://2022.nook-luebeck.de/
logo: /assets/nook22.png
---
Die Night of Open Knowledge (Nook) in Lübeck ist eine offene Vortragsveranstaltung, die einem weiten Publikum Einblicke in die verschiedene Bereiche der Informatik, aber auch technikfremde Themen bietet. Die Nook wird vom Chaotikum e.V. aus Lübeck und der studentischen Gruppe MetaMeute der Uni Lübeck veranstaltet. https://nook-luebeck.de/
\ No newline at end of file
......@@ -3,6 +3,7 @@ layout: conference
title: Night of open Knowledge 2023
acronym: nook2023
base_url: https://2023.nook-luebeck.de/
logo: /assets/nook23.png
---
Die Night of Open Knowledge (Nook) in Lübeck ist eine offene Vortragsveranstaltung, die einem weiten Publikum Einblicke in die verschiedene Bereiche der Informatik, aber auch technikfremde Themen bietet. Die Nook wird vom Chaotikum e.V. aus Lübeck und der studentischen Gruppe MetaMeute der Uni Lübeck veranstaltet. https://nook-luebeck.de/
\ No newline at end of file
......@@ -169,6 +169,7 @@ sharing_links: # Appear at the bottom of single blog posts, uncomment and commen
#Defining reusable html templates for the webste that are places in the _includes folder
image: "image.html"
gallery: "gallery.html"
video: "video.html"
pressespiegel: "pressespiegel.html"
default-feature: "/assets/f11.jpg"
postlistbytopic: "postlistbytopic.html"
......
{% if page.layout == "video" -%}
{%- assign realslug = page.url | split:'/' | last -%}
{% capture feature_image %}https://video.chaotikum.net/thumbnails/{{realslug}}.jpg{% endcapture -%}
{% capture feature_image %}https://video.chaotikum.net/thumbnails/share/{{realslug}}_share.png{% endcapture -%}
<meta property="og:image" content="{{feature_image}}">
<meta property="twitter:image" content="{{feature_image}}">
......
......@@ -27,7 +27,7 @@
{% if page.layout == "video" -%}
{%- assign realslug = page.url | split:'/' | last -%}
{% capture feature_image %}https://video.chaotikum.net/thumbnails/{{realslug}}_play.png{% endcapture -%}
{% capture feature_image %}https://video.chaotikum.net/thumbnails/share/{{realslug}}_share.png{% endcapture -%}
{% capture image %}https://video.chaotikum.net/thumbnails/{{realslug}}_play.png{% endcapture -%}
{% endif -%}
......
<div class="video">
<iframe src="https://www.youtube-nocookie.com/embed/{{ include.id }}?rel=0" frameborder="0" allowfullscreen></iframe>
<div class="image_wrapper">
{% for vid in site.media -%}
{% if vid.uid == {{include.uid}} -%}
{%- assign realslug = vid.url | split:'/' | last -%}
<img class="vimage1" src="https://video.chaotikum.net/thumbnails/2023-11-04-nook-by-numbers.jpg">
<img class="vimage2" src="/assets/video_overlay.png">
<a href="{{ site.baseurl }}{{ vid.url }}"><img class="vimage3" src="/assets/video_overlay2.png"></a>
<div class="includemediatext includemediatext_1">
<h3><a href="{{ site.baseurl }}{{ vid.url }}">{{vid.title}}</a></h3>
</div>
{% endif -%}
{% endfor -%}
</div>
......@@ -277,7 +277,7 @@ Finding the first and last talk to establish the variables "earliest" and "lates
{% endif -%}
{% endfor -%}
{% endfor -%}
<title>{% if video.persons and name_before_title -%}{{video.persons | join: ", " }}: {% endif -%}{{ video.title }}
<title>{% if video.persons and name_before_title -%}{{video.persons | join: ", " }}: {% endif -%}{{video.title}}
{% for conf in video.conferences -%}
{% for c in site.conferences -%}
{% if conf == c.acronym -%}
......
......@@ -25,6 +25,13 @@ layout: default
{% endfor -%}
{% endcapture %}
{% capture persons %}
{% for person in page.persons %}
{{person}}
{% unless forloop.last %}, {% endunless %}
{% endfor %}
{% endcapture %}
<main class="main container">
<div class="content">
......@@ -34,51 +41,63 @@ layout: default
{%- assign realslug = page.url | split:'/' | last -%}
<div style="width: 100%;
display: flex;
background-color:#eeeeee;
justify-content: center;">
<img src="https://video.chaotikum.net/thumbnails/{{ realslug }}.jpg" alt="" style="margin: 0 auto;">
<img src="https://video.chaotikum.net/thumbnails/{{ realslug }}.jpg" alt="" width="100%" style="border-radius: 30px; margin: 0 auto;">
</div>
<h4 style="text-align: center; background-color:#eeeeee; color:000000">{{ title }}</h4>
<p style="text-align: center;"> {{content}} </p>
<h4>{{ title }}</h4>
{% for conf in page.conferences -%}
{% for c in site.conferences -%}
{% if conf == c.acronym and c.logo -%}
{% assign logo = c.logo -%}
{% endif -%}
{% endfor -%}
{% endfor -%}
<div style="display: flex; margin-top: 5px; align-items: center;">
<div><img src="{{logo}}" alt="" class="gravatar"> </div><div style="padding-left: 20px; height: 100%"> von <b>{{persons}}</b></div >
</div>
{% capture release_date %}{{page.release_date | date: '%s'}}{% endcapture -%}
{% if release_date < nowunix and page.optout != true %}
{% if page.file and page.file != ''-%}
<p style="text-align: center; background-color:#eeeeee; color:000000; border-radius: 1px; margin: 1%;"> Wähle einen Dienst aus:</p>
{% if page.yt and page.yt != ''-%}
<div style="background-color:#eeeeee; border-radius: 4px; margin: 1%; min-height: 2em; min-width: 100%; position: relative; padding: 5px; text-align: center;"><a href="{{ page.yt }}">Youtube</a></div>
<p style="color:000000; margin-top: 10px; min-width: 100%; justify-content: center;">Schaue das Video auf</p>
{% if page.yt and page.yt != ''-%}
<div style="display: flex; flex-wrap: wrap; min-width: 100%; align-content: space-between; justify-content: center;">
<div style="background-color:#eeeeee; border-radius: 10px; margin-bottom: 1%; margin-right: 5px; min-height: 2em; max-width: 50%; position: relative; padding: 5px; text-align: center;"><a href="{{ page.yt }}">YouTube</a></div>
{% endif %}
{% if page.mccc and page.mccc != ''-%}
<div style="background-color:#eeeeee; border-radius: 4px; margin: 1%; min-height: 2em; min-width: 100%; position: relative; padding: 5px; text-align: center;"><a href="{{ page.mccc }}">media.ccc.de</a></div>
<div style="background-color:#eeeeee; border-radius: 10px; margin-bottom: 1%; margin-right: 5px; min-height: 2em; max-width: 50%; position: relative; padding: 5px; text-align: center;"><a href="{{ page.mccc }}">media.ccc.de</a></div>
{% endif %}
{% if page.archive and page.archive != ''-%}
<div style="background-color:#eeeeee; border-radius: 4px; margin: 1%; min-height: 2em; min-width: 100%; position: relative; padding: 5px; text-align: center;"><a href="{{ page.archive }}">archive.org</a></div>
<div style="background-color:#eeeeee; border-radius: 10px; margin-bottom: 1%; margin-right: 5px; min-height: 2em; max-width: 50%; position: relative; padding: 5px; text-align: center;"><a href="{{ page.archive }}">archive.org</a></div>
{% endif %}
{% if page.file and page.file != ''-%}
<div style="background-color:#eeeeee; border-radius: 4px; margin: 1%; min-height: 2em; min-width: 100%; position: relative; padding: 5px; text-align: center;"><a href="{{ page.file }}">download</a></div>
<div style="background-color:#eeeeee; border-radius: 10px; margin-bottom: 1%; margin-right: 5px; min-height: 2em; max-width: 50%; position: relative; padding: 5px; text-align: center;"><a href="{{ page.file }}">Download</a></div>
{% endif %}
</div>
{% else -%}
{% comment -%}
This should not happen. This means a release date was set but no file provided. Idealy, delete the release date.
{% endcomment -%}
<p>Zu diesem Talk wurde kein Video veröffentlicht.<p>
<p>Zu diesem Talk wurde kein Video veröffentlicht.<p>
{% endif %}
{% else -%}
<p>Zu diesem Talk wurde noch kein Video veröffentlicht.<p>
{% endif -%}
{% if page.slides and page.slides != '' -%}
<a href="{{page.slides}}"> Download Slides</a>
{% endif -%}
{% if page.closedcaption and page.closedcaption != '' -%}
<a href="{{page.closedcaption}}"> Download Untertitel
<div style="width: 100%; background-color:#f2f2f2; border-radius: 10px;">
<p style="padding: 5px; margin-left: 10px; margin-top: 10px: text-align: justify">Veröffentlicht: <b>{{ page.release_date | date: "%-d.%m.%Y" }}</b><br>{{content | replace: "<p>", "" | replace: "</p>", "<br>" }}
{% if page.slides and page.slides != '' -%}
<br><b><a href="{{page.slides}}"> Download Slides</a></b><br>
{% endif -%}
{% if page.closedcaption and page.closedcaption != '' -%}
<br><b><a href="{{page.closedcaption}}"> Download Untertitel
{% if page.cccomputergen and page.cccomputergen != '' -%}
(Computergeneriert)
(automatisch erstellt)
{% endif -%}
</a>
{% endif -%}
</a></b></p>
{% endif -%}
</div>
</article>
</div>
</main>
{% include site-footer.html %}
......@@ -11,6 +11,7 @@ event: eb785692-6bb0-4aac-aa7a-d48c87507da4
yt: "https://www.youtube.com/watch?v=DzV5UAwYQIE"
mccc: "https://media.ccc.de/v/2023-05-12-baumbilanzen-befreien"
file: "https://video.chaotikum.net/freitalk/2023-05-12-baumbilanzen-befreien/2023-05-12%20-%20baumbilanzenbefreien.mov"
slides: "https://tvluke.de/assets/talks/slides/baumbilanzenbefreien.pdf"
conferences:
- nbsp
- freitalk
......
......@@ -56,7 +56,7 @@ Menschen aus der Community haben über das Jahr in Lübeck [Kunst gemacht](https
Im Herbst stand das große Event des Jahres an. Die [Nook 2023](https://2023.nook-luebeck.de/). Mit einem breit angelegten Programm welches [Technik und Gesellschaft, lokales und globales verbindet](https://chaotikum.org/blog/2023/10/06/nook-fahrplan/) ist die NooK auch dieses Jahr zu einem vielfältigen Vortragsabend geworden. Zudem konnte wieder das [Nachtlicht](https://nachtlicht.chaotikum.org/) gelötet und an verschiedenen Ständen mit Initiativen geklönt werden.
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/vvruxiDJ_-c?si=OMSxP6i8D_0jRXkH" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
{% include {{site.video}} uid="ddb72240-54d2-40da-b161-c334101a6fd5" -%}
Neben der NooK beteiligten wir uns auch mit einem Lego-Roboter Workshop und mit dem Nachtlicht an der Neueröffnung der Julius Leber Schule. Zum Ende des Jahres wurde die Fräse wieder in Betrieb gesetzt und dem Server "Case" ein neues Zuhause gezimmert.
......
......@@ -126,6 +126,55 @@ figcaption {
font: italic small-caps bold;
}
.image_wrapper {
position: relative;
width: 100%;
}
.includemediatext {
position: absolute;
/* background: rgba(57, 57, 57, 0.5); */
/* center overlay text */
display: flex;
align-items: center;
justify-content: center;
}
.vimage1 {
top: 0;
left: 0;
position: relative;
border-radius: 30px;
}
.vimage2 {
top: 0;
left: 0;
position: absolute;
border-radius: 30px;
opacity: 0.7;
}
.vimage3 {
top: 0;
left: 0;
position: absolute;
border-radius: 30px;
opacity: 0.2;
}
.vimage3:hover {
opacity: 0.5; /* Set the desired opacity on hover (0.7 for 70% transparency) */
}
.includemediatext_1 {
left: 0;
bottom: 0;
width: 100%;
padding: 1rem;
}
.navlink .fa {
color: #E94E1B;
}
......
assets/5mintlogo.png

142 KiB

assets/chaotikumlogo400.png

79.6 KiB

assets/hoth.png

76.6 KiB

0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment