Skip to content

Add thumbnail and banner to blog posts #209

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 78 additions & 12 deletions _includes/blog-post-card.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@

<div class="well">
<div class="well">
<div class="post-content">
<h3>{{ post.title }}</h3>
<p>
{% if post.author %}
Expand All @@ -9,14 +9,7 @@ <h3>{{ post.title }}</h3>
<a href="{{ author.name | replace: " ", "" | prepend: "/team/" }}">
<img
src="{% if author.photo %}{{ site.baseurl }}/images/team/{{ author.photo }}{% else %}{{ site.baseurl }}/images/team/defaultDP.png{% endif %}"
alt="{{ author.name }}" style="
width: 30px;
height: 30px;
border-radius: 50%;
margin: 0;
margin-top: 4px;
margin-bottom: 4px;
" />
alt="{{ author.name }}" class="author-image" />
{{ author.name }}
</a>
{% if forloop.last == false %}, {% endif %}
Expand All @@ -31,11 +24,10 @@ <h3>{{ post.title }}</h3>
</p>
<p>{{ post.excerpt | truncatewords: 50 }}</p>


{% if post.tags and post.tags.size > 0 %}
<p>
{% for tag in post.tags %}
<a href="{{ site.baseurl }}/tags#{{ tag | downcase | slugify }}" class="badge" style="background-color: #999999; padding: 0.5rem">{{ tag }}</a>
<a href="{{ site.baseurl }}/tags#{{ tag | downcase | slugify }}" class="badge">{{ tag }}</a>
{% endfor %}
</p>
{% endif %}
Expand All @@ -44,3 +36,77 @@ <h3>{{ post.title }}</h3>
<button class="btn btn-primary" onclick="window.location.href='{{ post.url }}'">Read More</button>
</p>
</div>
{% if post.banner_image %}
<div class="thumbnail-container">
<img
src="{{ post.banner_image }}"
alt="Post Thumbnail"
class="thumbnail-image"
/>
</div>
{% endif %}
</div>

<style>
.well {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}

.post-content {
flex: 1;
min-width: 250px;
margin-bottom: 1rem;
}

.author-image {
width: 30px;
height: 30px;
border-radius: 50%;
margin: 0;
margin-top: 4px;
margin-bottom: 4px;
}

.badge {
background-color: #999999;
padding: 0.5rem;
}

.thumbnail-container {
margin-left: 1rem;
flex-shrink: 0;
min-width: 100px;
}

.thumbnail-image {
width: 200px;
height: 200px;
object-fit: cover;
border-radius: 5px;
}

@media (max-width: 700px) {
.well {
flex-direction: column-reverse;
align-items: flex-start;
}

.well > div {
margin-left: 0;
margin-bottom: 1rem;
}

.well img {
margin-bottom: 1rem;
}

.thumbnail-image {
width: 100%;
height: auto;
}
}

</style>
48 changes: 29 additions & 19 deletions _layouts/post.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,16 @@
<header class="post-header">
<h1 class="post-title" itemprop="name headline">{{ page.title }}</h1>
<p class="post-meta">
<time
datetime="{{ page.date | date_to_xmlschema }}"
itemprop="datePublished"
>
<time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
{{ page.date | date: "%b %-d, %Y" }}
</time>
{% if page.author %} • {% for author_name in page.author %}
<span itemprop="author" itemscope itemtype="http://schema.org/Person">
{% assign author = site.data.contributors | where: "name", author_name |
first %} {% assign author_link = author.name | replace: " ", "" |
prepend: "/team/" %}
{% assign author = site.data.contributors | where: "name", author_name | first %}
{% assign author_link = author.name | replace: " ", "" | prepend: "/team/" %}
<a href="{{ author_link }}" itemprop="url">
<img
src="{% if author.photo %}{{ site.baseurl }}/images/team/{{ author.photo }}{% else %}{{ site.baseurl }}/images/team/defaultDP.png{% endif %}"
alt="{{ author_name }}"
class="author-image"
style="margin: 0"
/>
<img src="{% if author.photo %}{{ site.baseurl }}/images/team/{{ author.photo }}{% else %}{{ site.baseurl }}/images/team/defaultDP.png{% endif %}"
alt="{{ author_name }}" class="author-image" />
<span itemprop="name">{{ author_name }}</span>
</a>
{% if forloop.last == false %} , {% endif %}
Expand All @@ -32,6 +24,13 @@ <h1 class="post-title" itemprop="name headline">{{ page.title }}</h1>
</p>
</header>

{% if page.banner_image %}
<div class="post-banner">
<img src="{{ page.banner_image }}"
alt="Banner Image" class="banner-image" />
</div>
{% endif %}

<div class="post-content" itemprop="articleBody">{{ content }}</div>

{% if page.tags and page.tags.size > 0 %}
Expand All @@ -40,14 +39,25 @@ <h1 class="post-title" itemprop="name headline">{{ page.title }}</h1>
<p>
<h4>Tags:</h4>
{% for tag in page.tags %}
<a
href="{{ site.baseurl }}/tag#{{ tag | downcase | slugify }}"
class="badge badge-secondary"
style="background-color: #999999; padding: 0.5rem"
>{{ tag }}</a
>
<a href="{{ site.baseurl }}/tag#{{ tag | downcase | slugify }}" class="badge badge-secondary tag-badge">{{ tag }}</a>
{% endfor %}
</p>
</footer>
{% endif %}
</article>

<style>
.post-header .author-image {
margin: 0;
}

.post-banner .banner-image {
width: 100%;
height: auto;
}

.tag-badge {
background-color: #999999;
padding: 0.5rem;
}
</style>
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ excerpt: "Clang is an LLVM native C/C++/Objective-C compiler, which aims to
sitemap: false
author: Matheus Izvekov
permalink: blogs/gsoc22_izvekov_experience_blog/
banner_image: /images/blog/gsoc-banner.png
date: 2022-11-30
tags: gsoc clang llvm
---
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ author:
- Jun Zhang
- Purva Chaudhari
permalink: blogs/gsoc22_zhang_chaudhari_experience_blog/
banner_image: /images/blog/gsoc-banner.png
date: 2022-12-02
tags: gsoc clang llvm
---
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ transferred through finalize calls."
sitemap: false
author: Anubhab Ghosh
permalink: blogs/gsoc22_ghosh_experience_blog/
banner_image: /images/blog/gsoc-banner.png
date: 2022-12-07
tags: gsoc llvm jitlink memory-manager
---
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ Floating-Point Error Estimation), and Python-C++ Interoperability (Clang-Repl
sitemap: false
author: QuillPusher
permalink: blogs/gsod23_quillpusher_experience_blog/
banner_image: /images/blog/gsod-banner.png
date: 2023-05-10
tags: gsod documentation llvm root clang-repl cppyy
---
Expand Down
1 change: 1 addition & 0 deletions _posts/2023-09-18-code-completion-in-clang-repl.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ statement. Consequently, this causes typos or syntactic errors."
sitemap: false
author: Yuquan (Fred) Fu
permalink: blogs/gsoc23_ffu_experience_blog/
banner_image: /images/blog/gsoc-banner.png
date: 2023-09-18
tags: gsoc clang llvm
---
Expand Down
1 change: 1 addition & 0 deletions _posts/2024-05-11-llvm-org-website-redesign-project.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ This initiative will streamline navigation, improve accessibility, and update
content, transforming LLVM.org into a more user-friendly resource."
sitemap: false
author: Chaitanya Shahare
banner_image: /images/blog/gsoc-banner.png
permalink: blogs/gsoc24_chaitanya_shahare_introduction_blog/
date: 2024-05-11
tags: gsoc llvm website
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ excerpt: "A GSoC 2024 project aimed at implementing the differentiation of the K
sitemap: false
author: Atell Yehor Krasnopolski
permalink: blogs/gsoc24_atell_krasnopolsky_introduction_blog/
banner_image: /images/blog/gsoc-banner.png
date: 2024-05-26
tags: gsoc clang llvm clad
---
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ excerpt: "Enable CUDA Compilation on Cppyy-Numba generated IR project, part of G
sitemap: false
author: Riya Bisht
permalink: blogs/gsoc24_riya_bisht_introduction_blog/
banner_image: /images/blog/gsoc-banner.png
date: 2024-05-30
tags: gsoc cuda numba llvm cppyy
---
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ excerpt: "Integrate a Large Language Model with the xeus-cpp Jupyter kernel, par
sitemap: false
author: Tharun Anandh
permalink: blogs/gsoc24_tharun_anandh_introduction_blog/
banner_image: /images/blog/gsoc-banner.png
date: 2024-05-30
tags: gsoc xeus xeus-cpp cpp llm
---
Expand Down
1 change: 1 addition & 0 deletions _posts/2024-05-31-superbuilds-for-root.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ excerpt: "A GSoC 2024 project with goal to split ROOT into separate components a
sitemap: false
author: Pavlo Svirin
permalink: blogs/gsoc24_pavlo_svirin_introduction_blog/
banner_image: /images/blog/gsoc-banner.png
date: 2024-05-31
tags: gsoc root cmake
---
Expand Down
Binary file added images/blog/gsoc-banner.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/blog/gsod-banner.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading