Skip to content

Commit d60561e

Browse files
DominikMuhleDominikMuhle
committed
updated publications overview. Added video2webm.bash script
1 parent fe318bb commit d60561e

File tree

11 files changed

+306
-106
lines changed

11 files changed

+306
-106
lines changed

‎README.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,3 +160,19 @@ Includes are supposed to provide reusable templates to make content sections mor
160160
Jekyll allows to pass arguments to the includes that can be used in the `hmtl` code as you can see in the example. In this case, since a `.js` script is needed for this component, we have to add the script at the end of our `content.html` as well. Also be mindful, that the `slider-component.css` file is alread included in the `publications.html` file. (There should probably be a cleaner solution for this.)
161161

162162
If you want to add your own reusable components you can just add them to the `includes` directory. (Cleaning up would be important at some point.)
163+
164+
165+
## Dataformats
166+
167+
### Videos
168+
169+
The standard format for videos should be `.webm` as it is supported by most browsers. However, you can also use `.mp4` files. To convert either `.mp4` or `.mov` files to `.webm` you can use the following command
170+
171+
```bash
172+
# ffmpeg -i {input}.mp4 -c:v libvpx-vp9 -crf 30 -b:v 0 -b:a 128k -c:a libopus {output}.webm
173+
ffmpeg -i {input}.mp4 -b:v 0 -crf 30 -pass 1 -an -f webm -y /dev/null
174+
ffmpeg -i {input}.mp4 -b:v 0 -crf 30 -pass 2 {output}.webm
175+
ffmpeg -i {input}.gif -c:v libvpx-vp9 -crf 30 -b:v 0 -b:a 128k -c:a libopus {output}.webm
176+
```
177+
A [two pass solution](https://video.stackexchange.com/questions/19590/convert-mp4-to-webm-without-quality-loss-with-ffmpeg) produced larger but better results.
178+
Change the `-crf` value to change the quality [lower => better](https://stackoverflow.com/questions/47510489/ffmpeg-convert-mp4-to-webm-poor-results).

‎_includes/comparison_slider.html

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,21 @@
1+
<head>
2+
<link rel="stylesheet" href="/assets/css/slider-component.css">
3+
</head>
4+
5+
<script defer src="/js/slider-component.js"></script>
6+
17
<img-comparison-slider hover="hover">
28
<figure slot="first" class="before">
39
<img width="100%" src="{{ include.first_img }}" />
10+
411
{% if include.first_caption %}
512
<figcaption>{{ include.first_caption }}</figcaption>
613
{% endif %}
7-
</figure>
8-
<figure slot="second" class="after">
14+
</figure>
15+
16+
<figure slot="second" class="after">
917
<img width="100%" src="{{ include.second_img }}" />
18+
1019
{% if include.second_caption %}
1120
<figcaption>{{ include.second_caption }}</figcaption>
1221
{% endif %}

‎_includes/preview.html

Lines changed: 41 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,28 @@
11
<style>
2-
.media-preview {
2+
3+
.media-preview.has-second > img {
4+
display: initial;
5+
/* opacity: 100%; */
6+
}
7+
8+
.media-preview.has-second > .overlay {
9+
display: none;
10+
/* opacity: 0%;
11+
position: relative;
12+
top: 0;
13+
left: 0; */
14+
}
15+
16+
.media-preview.has-second:hover > img {
17+
display: none;
18+
/* opacity: 0%; */
19+
}
20+
21+
.media-preview.has-second:hover > .overlay {
22+
display: initial;
23+
/* opacity: 100%; */
24+
}
25+
/*.media-preview {
326
position: relative;
427
display: inline-block;
528
width: 100%;
@@ -15,14 +38,28 @@
1538
.media-preview.has-second:hover > img,
1639
.media-preview.has-second:hover > iframe {
1740
visibility: hidden;
18-
}
41+
} */
1942
</style>
2043

2144
<div class="media-preview{% if include.media2 %} has-second{% endif %}">
22-
<img src="{{ include.media1 }}" width="300" alt="Media1">
45+
{% if include.media1 contains ".webm" %}
46+
<video autoplay loop muted>
47+
<source src="{{ include.media1 }}" type="video/webm">
48+
Your browser does not support the video tag.
49+
</video>
50+
{% else %}
51+
<img src="{{ include.media1 }}" alt="Media1">
52+
{% endif %}
2353
{% if include.media2 %}
2454
<div class="overlay">
25-
<img src="{{ include.media2 }}" width="300" alt="Media2">
55+
{% if include.media2 contains ".webm" %}
56+
<video autoplay loop muted>
57+
<source src="{{ include.media2 }}" type="video/webm">
58+
Your browser does not support the video tag.
59+
</video>
60+
{% else %}
61+
<img src="{{ include.media2 }}" alt="Media2">
62+
{% endif %}
2663
</div>
2764
{% endif %}
2865
</div>

‎_layouts/publications.html

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,22 +17,14 @@
1717
<!-- <link rel="stylesheet" href="/assets/css/fontawesome.all.min.css"> -->
1818
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
1919
<link rel="stylesheet" href="/assets/css/slider-component.css">
20-
<link rel="stylesheet" href="/assets/css/index.css">
20+
<!-- <link rel="stylesheet" href="/assets/css/index.css"> -->
2121
<link rel="stylesheet" href="/assets/css/stylesheet.css">
2222

2323
{% if page.icon %}
2424
<link rel="icon" type="image/x-icon" href="{{ page.icon }}">
2525
{% else %}
2626
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
2727
{% endif %}
28-
<!-- <link href="{{ '/assets/css/fontawesome.all.min.css' | relative_url }}" rel="stylesheet">
29-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css">
30-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
31-
<link href="{{ '/assets/css/index.css' | relative_url }}" rel="stylesheet"> -->
32-
33-
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
34-
<script defer src="{{ '/js/fontawesome.all.min.js' | relative_url }}"></script>
35-
<script src="{{ '/js/index.js' | relative_url }}"></script> -->
3628
</head>
3729

3830
<body>

‎_pages/publication_overview.html

Lines changed: 74 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -6,98 +6,89 @@
66
---
77

88
<head>
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap" rel="stylesheet">
12+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
913
<link rel="stylesheet" href="/assets/css/main.css">
14+
<link rel="stylesheet" href="/assets/css/publication_overview.css">
1015
<link rel="stylesheet" href="/assets/css/style.css">
11-
<link rel="stylesheet" href="/assets/css/bulma.min.css">
12-
<link rel="stylesheet" href="/assets/css/bulma-carousel.min.css">
13-
<link rel="stylesheet" href="/assets/css/bulma-slider.min.css">
14-
<link rel="stylesheet" href="/assets/css/fontawesome.all.min.css">
15-
<link rel="stylesheet" href="/assets://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
16-
<link rel="stylesheet" href="/assets/css/slider-component.css">
1716
<link rel="stylesheet" href="/assets/css/index.css">
1817
</head>
1918

20-
<section class="section">
21-
<div class="container is-max-desktop">
22-
{% assign sorted = site.publications | reverse %}
23-
{% for publication in sorted %}
24-
<div class="publication-block columns">
25-
<div class="column is-5">
26-
{% if publication.external_link != nil %}
27-
{% assign base_link = publication.external_link %}
28-
{% else %}
29-
{% assign base_link = publication.permalink %}
30-
{% endif %}
31-
{% if publication.image_mouseover == nil %}
32-
{% assign image_mouseover = publication.image %}
33-
{% else %}
34-
{% assign image_mouseover = publication.image_mouseover %}
35-
{% endif %}
36-
{% assign image = base_link | append: publication.image %}
37-
{% assign image_mouseover = base_link | append: image_mouseover %}
38-
{% include preview.html media1=image media2=image_mouseover %}
39-
<!-- {% if publication.image_mouseover contains "mp4" %}
40-
<div class="publication-image {% if publication.image_mouseover %}publication-mousecell{% endif %}">
41-
<video autoplay preload playsinline class="" height="100%" loop muted width="100%">
42-
<source src="{{ base_link }}{{ publication.image_mouseover }}" type="video/mp4">
43-
Your browser does not support the video tag.
44-
</video>
45-
<img alt="{{publication.title}}" src="{{base_link}}{{ publication.image }}" />
46-
</div>
47-
{% else %}
48-
<img width="100%" src="{{base_link}}{{ publication.image }}" onmouseover="this.src='{{base_link}}{{ publication.image_mouseover }}';" onmouseout="this.src='{{base_link}}{{ publication.image }}';" style="display: inline-block;"/>
49-
{% endif %} -->
50-
</div>
51-
<div class="column">
52-
<div class="content">
53-
{% if publication.external_link != nil %}
54-
<h3 class="publication-title"><a href="{{ publication.external_link }}">{{ publication.title }}</a></h3>
55-
{% else %}
56-
<h3 class="publication-title"><a href="{{ publication.permalink }}">{{ publication.title }}</a></h3>
57-
{% endif %}
58-
<div class="publication-authors">
59-
{% for author_id in publication.authors %}
60-
{% if site.data.authors_external[author_id.name] != nil %}
61-
{% assign author = site.data.authors_external[author_id.name] %}
62-
{% endif %}
63-
{% if site.data.authors_internal[author_id.name] != nil %}
64-
{% assign author = site.data.authors_internal[author_id.name] %}
19+
<body>
20+
<section class="section">
21+
<div class="container is-max-desktop">
22+
{% assign sorted = site.publications | reverse %}
23+
{% for publication in sorted %}
24+
<div class="publication-block">
25+
<div class="publication-media">
26+
{% if publication.external_link != nil %}
27+
{% assign base_link = publication.external_link %}
28+
{% else %}
29+
{% assign base_link = publication.permalink %}
6530
{% endif %}
66-
<span class="author-block {% if author.is_me %}author-me{% endif %}">
67-
{% if author.is_me %}
68-
{{ author.first_name }} {{author.middle_name}} {{ author.last_name }}{% if author_id.equal_contribution != nil %}<sup>*</sup>{% endif %}{% if forloop.last == false %},{%
69-
endif %}
31+
{% if publication.image_mouseover == nil %}
32+
{% assign image_mouseover = publication.image %}
7033
{% else %}
71-
<a href="{{author.website}}">{{ author.first_name }} {{ author.middle_name }} {{ author.last_name}}</a>{% if author_id.equal_contribution != nil %}<sup>*</sup>{% endif %}{% if forloop.last == false %},{% endif %}
34+
{% assign image_mouseover = publication.image_mouseover %}
7235
{% endif %}
73-
</span>
74-
{% endfor %}
75-
</div>
76-
<div class="publication-venue">
77-
<span>{{ publication.venue }}</span>
78-
{% for award in publication.awards %}
79-
<span class="publication-venue-emph">{{ award }}<span>
36+
{% assign image = base_link | append: publication.image %}
37+
{% assign image_mouseover = base_link | append: image_mouseover %}
38+
{% include preview.html media1=image media2=image_mouseover %}
39+
</div>
40+
<div class="publication-data column">
41+
<h3 class="publication-title">
42+
{% if publication.external_link != nil %}
43+
<a href="{{ publication.external_link }}">{{ publication.title }}</a>
44+
{% else %}
45+
<a href="{{ publication.permalink }}">{{ publication.title }}</a>
46+
{% endif %}
47+
</h3>
48+
<div class="publication-venue">
49+
<span>{{ publication.venue }}</span>
50+
{% for award in publication.awards %}
51+
<span class="publication-venue-emph">{{ award }}<span>
8052
{% endfor %}
81-
</div>
82-
<p class="publication-description">{{ publication.description }}</p>
83-
<p>
84-
{% for link in publication.links %}
85-
<a href="{{ link.link }}">{{link.name}}</a>
86-
{% if forloop.last == false or publication.citation != nil %}|{% endif %}
87-
{% endfor %}
88-
{% if publication.citation != nil %}
89-
<a onclick="CopyToClipboard('{{publication.citation}}')">
90-
Citation
91-
<i class="fa fa-copy"></i>
92-
</a>
93-
{% endif %}
94-
</p>
53+
</div>
54+
<div class="publication-authors">
55+
{% for author_id in publication.authors %}
56+
{% if site.data.authors_external[author_id.name] != nil %}
57+
{% assign author = site.data.authors_external[author_id.name] %}
58+
{% endif %}
59+
{% if site.data.authors_internal[author_id.name] != nil %}
60+
{% assign author = site.data.authors_internal[author_id.name] %}
61+
{% endif %}
62+
<span class="author-block {% if author.is_me %}author-me{% endif %}">
63+
{% if author.is_me %}
64+
{{ author.first_name }} {{author.middle_name}} {{ author.last_name }}{% if author_id.equal_contribution != nil %}<sup>*</sup>{% endif %}{% if forloop.last == false %},{%
65+
endif %}
66+
{% else %}
67+
<a href="{{author.website}}">{{ author.first_name }} {{ author.middle_name }} {{ author.last_name}}</a>{% if author_id.equal_contribution != nil %}<sup>*</sup>{% endif %}{% if forloop.last == false %},{% endif %}
68+
{% endif %}
69+
</span>
70+
{% endfor %}
71+
</div>
72+
<p class="publication-description">{{ publication.description }}</p>
73+
<p>
74+
{% for link in publication.links %}
75+
<a class="publication-links" href="{{ link.link }}">{{link.name}}</a>
76+
{% if forloop.last == false or publication.citation != nil %}|{% endif %}
77+
{% endfor %}
78+
{% if publication.citation != nil %}
79+
<a class="publication-links" onclick="CopyToClipboard('{{publication.citation}}')">
80+
Citation
81+
<i class="fa fa-copy
82+
"></i>
83+
</a>
84+
{% endif %}
85+
</p>
9586
</div>
9687
</div>
88+
<!-- {% if forloop.last == false %}
89+
<hr>
90+
{% endif %} -->
91+
{% endfor %}
9792
</div>
98-
{% if forloop.last == false %}
99-
<hr>
100-
{% endif %}
101-
{% endfor %}
102-
</div>
103-
</section>
93+
</section>
94+
</body>

‎_publications/dnls_covs/assets/header_vid.webm

8.5 MB
Binary file not shown.

‎_publications/dnls_covs/index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
22
layout: publications
3-
permalink: /publications/dnls_covs/
3+
permalink: /_publications/dnls_covs/
44
date: 2023_05_29 # determines sorting just take the date of the first publication as YYYY_MM_DD
55
image: assets/teaser.png
6-
image_mouseover: assets/header_vid.mp4
6+
image_mouseover: assets/header_vid.webm
77
icon: assets/favicon.ico
88

99
title: "Learning Correspondence Uncertainty via Differentiable Nonlinear Least Squares"

‎_publications/lightspeed/index.md

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
---
22
layout: publications
33
permalink: /publications/lightspeed/
4-
external_link: https://reginehartwig.github.io/publications/lightspeed/
4+
external_link: https://reginehartwig.github.io/publications/geco/
55
date: 2024_12_01 # determines sorting just take the date of the first publication as YYYY_MM_DD
6-
image: assets/teaser.png
7-
image_mouseover: assets/architecture.png
6+
image: assets/pline3.png
87

98
title: "Lightspeed Computation of Geometry-aware Semantic Embeddings"
109
venue: TBD, 2025

‎_publications/skeletondiffusion/index.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
---
22
layout: publications
33
permalink: /publications/skeletondiffusion/
4-
external_link: https://ceveloper.github.io/publications/skeletondiffusion
4+
external_link: https://ceveloper.github.io/publications/skeletondiffusion/
55
date: 2025_03_01 # determines sorting just take the date of the first publication as YYYY_MM_DD
6-
image: /assets/teaser.gif
7-
image_mouseover: /assets/teaser_image.png
6+
image: assets/teaser.gif
7+
image_mouseover: assets/teaser_image.png
88
# icon: /assets/favicon.ico
99

1010
title: "Nonisotropic Gaussian Diffusion for Realistic 3D Human Motion Prediction"

0 commit comments

Comments
 (0)