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`
52 lines
1.6 KiB
HTML
52 lines
1.6 KiB
HTML
---
|
|
layout: page
|
|
---
|
|
|
|
<!-- about.html -->
|
|
<div class="post">
|
|
|
|
<article>
|
|
{% if page.profiles -%}
|
|
{% for profile in page.profiles %}
|
|
<hr>
|
|
<div class="profile float-{%- if profile.align == 'left' -%}left{%- else -%}right{%- endif -%}">
|
|
{%- if profile.image %}
|
|
{%- assign profile_image_path = profile.image | prepend: 'assets/img/' -%}
|
|
|
|
{% if profile.image_circular %}
|
|
{%- assign profile_image_class = "img-fluid z-depth-1 rounded-circle" -%}
|
|
{% else %}
|
|
{%- assign profile_image_class = "img-fluid z-depth-1 rounded" -%}
|
|
{% endif %}
|
|
|
|
{% capture sizes %}(min-width: {{site.max_width}}) {{ site.max_width | minus: 30 | times: 0.3}}px, (min-width: 576px) 30vw, 95vw"{% endcapture %}
|
|
|
|
{% include figure.html
|
|
path = profile_image_path
|
|
class = profile_image_class
|
|
sizes = sizes
|
|
alt = profile.image
|
|
%}
|
|
{% endif -%}
|
|
{%- if profile.more_info %}
|
|
<div class="more-info">
|
|
{{ profile.more_info }}
|
|
</div>
|
|
{%- endif %}
|
|
</div>
|
|
|
|
<div class="clearfix">
|
|
{% if profile.content -%}
|
|
{% capture profile_content %}{%- include_relative {{ profile.content }} %}{% endcapture %}
|
|
{{ profile_content | markdownify }}
|
|
{%- else -%}
|
|
{{ content }}
|
|
{%- endif %}
|
|
</div>
|
|
|
|
{% endfor %}
|
|
{%- endif %}
|
|
</article>
|
|
|
|
</div>
|