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`
37 lines
1.3 KiB
HTML
37 lines
1.3 KiB
HTML
<!-- _includes/projects.html -->
|
|
<div class="grid-sizer"></div>
|
|
<div class="grid-item">
|
|
{% if project.redirect -%}
|
|
<a href="{{ project.redirect }}">
|
|
{%- else -%}
|
|
<a href="{{ project.url | relative_url }}">
|
|
{%- endif %}
|
|
<div class="card hoverable">
|
|
{%- if project.img %}
|
|
{%- include figure.html
|
|
path=project.img
|
|
sizes = "250px"
|
|
alt="project thumbnail" -%}
|
|
{%- endif %}
|
|
<div class="card-body">
|
|
<h2 class="card-title text-lowercase">{{ project.title }}</h2>
|
|
<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>
|
|
</a>
|
|
</div> |