Merge pull request #3 from qiyan98/master

Update FVMD blogs

_includes/figure.liquid

@@ -0,0 +1,78 @@
+{% assign img_path = include.path | remove: '.jpg' | remove: '.jpeg' | remove: '.png' | remove: '.tiff' | remove: '.gif' %}
+
+<figure
+  {% if include.slot %}
+    slot="{{ include.slot }}"
+  {% endif %}
+>
+  <picture>
+    <!-- Auto scaling with imagemagick -->
+    <!--
+      See https://www.debugbear.com/blog/responsive-images#w-descriptors-and-the-sizes-attribute and
+      https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images for info on defining 'sizes' for responsive images
+    -->
+    {% if site.imagemagick.enabled %}
+      <source
+        class="responsive-img-srcset"
+        srcset="{% for i in site.imagemagick.widths %}{{ img_path | relative_url }}-{{ i }}.webp {{i}}w,{% endfor %}"
+        {% if include.sizes %}
+          sizes="{{include.sizes}}"
+        {% else %}
+          sizes="95vw"
+        {% endif %}
+        type="image/webp"
+      >
+    {% endif %}
+    <img
+      src="{% if include.cache_bust %}{{ include.path | relative_url | bust_file_cache }}{% else %}{{ include.path | relative_url }}{% endif %}"
+      {% if include.class %}
+        class="{{ include.class }}"
+      {% endif %}
+      {% if include.width %}
+        width="{{ include.width }}"
+      {% else %}
+        width="100%"
+      {% endif %}
+      {% if include.height %}
+        height="{{ include.height }}"
+      {% else %}
+        height="auto"
+      {% endif %}
+      {% if include['min-width'] or include['min-height'] or include['max-width'] or include['max-height'] %}
+        style="
+          {% if include['min-width'] %}
+            min-width: {{ include.min-width }};
+          {% endif %}
+          {% if include['min-height'] %}
+            min-height: {{ include.min-height }};
+          {% endif %}
+          {% if include['max-width'] %}
+            max-width: {{ include.max-width }};
+          {% endif %}
+          {% if include['max-height'] %}
+            max-height: {{ include.max-height }};
+          {% endif %}
+        "
+      {% endif %}
+      {% if include.alt %}
+        alt="{{ include.alt }}"
+      {% endif %}
+      {% if include.title %}
+        title="{{ include.title }}"
+      {% endif %}
+      {% if include.zoomable %}
+        data-zoomable
+      {% endif %}
+      {% if include.loading %}
+        loading="{{ include.loading }}"
+      {% elsif site.lazy_loading_images %}
+        loading="lazy"
+      {% endif %}
+      onerror="this.onerror=null; $('.responsive-img-srcset').remove();"
+    >
+  </picture>
+
+  {% if include.caption %}
+    <figcaption class="caption">{{ include.caption }}</figcaption>
+  {% endif %}
+</figure>

_includes/video.liquid

@@ -0,0 +1,97 @@
+{% assign extension = include.path | split: '.' | last %}
+
+<figure>
+  {% if extension == 'mp4' or extension == 'webm' or extension == 'ogg' %}
+    <video
+      src="{% if include.cache_bust %}{{ include.path | relative_url | bust_file_cache }}{% else %}{{ include.path | relative_url }}{% endif %}"
+      {% if include.class %}
+        class="{{ include.class }}"
+      {% endif %}
+      {% if include.width %}
+        width="{{ include.width }}"
+      {% else %}
+        width="auto"
+      {% endif %}
+      {% if include.height %}
+        height="{{ include.height }}"
+      {% else %}
+        height="auto"
+      {% endif %}
+      {% if include['min-width'] %}
+        min-width="{{ include.min-width }}"
+      {% endif %}
+      {% if include['min-height'] %}
+        min-height="{{ include.min-height }}"
+      {% endif %}
+      {% if include['max-width'] %}
+        max-width="{{ include.max-width }}"
+      {% endif %}
+      {% if include['max-height'] %}
+        height="{{ include.max-height }}"
+      {% endif %}
+      {% if include.title %}
+        title="{{ include.title }}"
+      {% endif %}
+      {% if include.alt %}
+        alt="{{ include.alt }}"
+      {% endif %}
+      {% if include.autoplay %}
+        autoplay
+      {% endif %}
+      {% if include.controls %}
+        controls
+      {% endif %}
+      {% if include.loop %}
+        loop
+      {% endif %}
+      {% if include.muted %}
+        muted
+      {% endif %}
+      {% if include.poster %}
+        poster="{{ include.poster }}"
+      {% endif %}
+    />
+
+  {% else %}
+    <iframe
+      src="{{ include.path }}"
+      {% if include.class %}
+        class="{{ include.class }}"
+      {% endif %}
+      frameborder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      allowfullscreen
+      {% if include.width %}
+        width="{{ include.width }}"
+      {% else %}
+        width="auto"
+      {% endif %}
+      {% if include.height %}
+        height="{{ include.height }}"
+      {% else %}
+        height="auto"
+      {% endif %}
+      {% if include['min-width'] %}
+        min-width="{{ include.min-width }}"
+      {% endif %}
+      {% if include['min-height'] %}
+        min-height="{{ include.min-height }}"
+      {% endif %}
+      {% if include['max-width'] %}
+        max-width="{{ include.max-width }}"
+      {% endif %}
+      {% if include['max-height'] %}
+        height="{{ include.max-height }}"
+      {% endif %}
+      {% if include.alt %}
+        alt="{{ include.alt }}"
+      {% endif %}
+      {% if include.title %}
+        title="{{ include.title }}"
+      {% endif %}
+    />
+  {% endif %}
+  {% if include.caption %}
+    <figcaption class="caption">{{ include.caption }}</figcaption>
+  {% endif %}
+</figure>