brian/sublime-settings
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

modifying the picture element

Browse Source
This commit is contained in:
Brian 2022-08-24 11:22:00 -06:00
parent cf0f19edd7
commit e2721c6f7d
Signed by: brian
GPG Key ID: DE1A5390A3B84CD8
1 changed files with 34 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
Packages/User/pict.sublime-snippet
View File

@ -1,47 +1,42 @@
<snippet>
<content><![CDATA[
<picture>
<source type="image/avif"
srcset="
${1:imageName}-640w.avif 640w,
${1:imageName}-1280w.avif 1280w,
${1:imageName}-1920w.avif 1920w
"
sizes="
550px,
(max-width: 768px) calc(100vw - 3em),
(max-width: 1376px) calc(50vw - 8em)
">
<!-- https://github.com/nucliweb/image-element -->
<source
sizes="550px, (max-width: 768px) calc(100vw - 3em), (max-width: 1376px) calc(50vw - 8em)"
srcset="${1:imageName}-640w.jpg 640w, ${1:imageName}-1280w.jpg 1280w, ${1:imageName}-1920w.jpg 1920w"
type="image/jxl">
<source type="image/webp"
srcset="
${1:imageName}.webp?w=100&fm=webp 100w,
${1:imageName}.webp?w=200&fm=webp 200w,
{1:imageName}.webp
"
sizes="
550px,
(max-width: 768px) calc(100vw - 3em),
(max-width: 1376px) calc(50vw - 8em)
">
<source
sizes="550px, (max-width: 768px) calc(100vw - 3em), (max-width: 1376px) calc(50vw - 8em)"
srcset="${1:imageName}-640w.avif 640w, ${1:imageName}-1280w.avif 1280w, ${1:imageName}-1920w.avif 1920w"
type="image/avif">
<img
srcset="
${1:imageName}.jpg?w=100&fm=jpg&fl=progressive 100w,
${1:imageName}.jpg?w=200&fm=jpg&fl=progressive 200w,
${1:imageName}.jpg
"
sizes="
550px,
(max-width: 768px) calc(100vw - 3em),
(max-width: 1376px) calc(50vw - 8em)
"
src="${1:imageName}.jpg"
alt="${1:imageName}"
loading="lazy"
decoding="async"
width="{{ $width }}"
height="{{ $height }}">
<source
sizes="550px, (max-width: 768px) calc(100vw - 3em), (max-width: 1376px) calc(50vw - 8em)"
srcset="${1:imageName}-640w.webp?w=100&fm=webp 100w, ${1:imageName}-1280w.webp?w=200&fm=webp 200w, ${1:imageName}.webp"
type="image/webp">
<source
sizes="550px, (max-width: 768px) calc(100vw - 3em), (max-width: 1376px) calc(50vw - 8em)"
srcset="${1:imageName}-640w.jpg 640w, ${1:imageName}-1280w.jpg 1280w, ${1:imageName}-1920w.jpg 1920w"
type="image/jpeg">
<img
sizes="550px, (max-width: 768px) calc(100vw - 3em), (max-width: 1376px) calc(50vw - 8em)"
srcset="${1:imageName}.jpg?w=100&fm=jpg&fl=progressive 100w, ${1:imageName}.jpg?w=200&fm=jpg&fl=progressive 200w, ${1:imageName}.jpg"
src="${1:imageName}.jpg"
alt="${1:imageName}"
<!--
loading="lazy"
decoding="async"
-->
<!--
fetchpriority="high"
decoding="sync"
-->
width="{{ \$width }}"
height="{{ \$height }}">
</picture>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->