fb294e3348
Fixes #1967 Update the way responsive images are used to only use one srcset, and add corresponding `sizes` attribute to the relevant layouts and templates. I did not go through and add `sizes` to all the example posts/projects. When `sizes` is not specified by the user, the `figure.html` template defaults to 95% the width of the viewport which should work fine for most cases; users can optimize further if they wish by feeding `sizes` into the template. Additionally: - Enabled support for .gif to .webp compression - fix error in jekyll-imagemagick config where all images were resized to be 800px or less. (for example img-1400.webp was actually only 800px wide, etc.) - added note about making sure imagemagick is installed before enabling it in responsive images section of `_config.yml`
41 lines
1.4 KiB
HTML
41 lines
1.4 KiB
HTML
<div class="card-item col">
|
|
{%- if project.redirect -%}
|
|
<a href="{{ project.redirect }}">
|
|
{%- else -%}
|
|
<a href="{{ project.url | relative_url }}">
|
|
{%- endif -%}
|
|
<div class="card hoverable">
|
|
<div class="row g-0">
|
|
{%- if project.img -%}
|
|
<div class="card-img col-md-6">
|
|
{% include figure.html path=project.img sizes="(min-width: 768px) 156px, 50vw" alt="project thumbnail" %}
|
|
</div>
|
|
<div class="col-md-6">
|
|
{%- else -%}
|
|
<div class="col-md-12">
|
|
{%- endif -%}
|
|
<div class="card-body">
|
|
<h3 class="card-title text-lowercase">{{ project.title }}</h3>
|
|
<p class="card-text">{{ project.description }}</p>
|
|
<div class="row ml-1 mr-1 p-0">
|
|
{%- if project.github -%}
|
|
<div class="github-icon">
|
|
<div class="icon" data-toggle="tooltip" title="Code Repository">
|
|
<a href="{{ project.github }}"><i class="fa-brands fa-github gh-icon"></i></a>
|
|
</div>
|
|
{%- if project.github_stars -%}
|
|
<span class="stars" data-toggle="tooltip" title="GitHub Stars">
|
|
<i class="fa-solid fa-star"></i>
|
|
<span id="{{ project.github_stars }}-stars"></span>
|
|
</span>
|
|
{%- endif -%}
|
|
</div>
|
|
{%- endif -%}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|