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

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

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