modifying the picture element

Packages/User/laravel_controller.sublime-snippet

@@ -60,7 +60,7 @@ public function update(Request \$request, ${1:Model} \$${4:model})
         return redirect()->route('dashboard.${3:models}.index')->with('status', "Successfully updated {\$${4:model}->${5:field}}.");
     }
 
-    \$request->session()->flash('flash', ['bannerStyle' => 'danger', 'banner' => "Unable to update ${4:model}."]);
+    \$request->session()->flash('flash', ['bannerStyle' => 'danger', 'banner' => "Unable to update {\$${4:model}->${5:field}}."]);
     return redirect()->back()->with('error', "Unable to update {\$${4:model}->${5:field}}.");
 }
 

Packages/User/pdoc.sublime-snippet

@@ -3,6 +3,7 @@
 /**
  * ${1:Description}
  *
+ * @package Namespace\App\Class
  * @since ${5:1.0.0}
  *
  * @param ${2:datatype} ${3:\$variable}

Packages/User/pict.sublime-snippet

@@ -1,47 +1,42 @@
 <snippet>
     <content><![CDATA[
 <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
-    "
-    sizes="
-      550px,
-      (max-width: 768px) calc(100vw - 3em),
-      (max-width: 1376px) calc(50vw - 8em)
-    ">
 
-  <img
+    <source
-    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}-640w.webp?w=100&fm=webp 100w, ${1:imageName}-1280w.webp?w=200&fm=webp 200w, ${1:imageName}.webp"
-      ${1:imageName}.jpg?w=200&fm=jpg&fl=progressive 200w,
+        type="image/webp">
-      ${1:imageName}.jpg
+
-    "
+    <source
-    sizes="
+        sizes="550px, (max-width: 768px) calc(100vw - 3em), (max-width: 1376px) calc(50vw - 8em)"
-      550px,
+        srcset="${1:imageName}-640w.jpg 640w, ${1:imageName}-1280w.jpg 1280w, ${1:imageName}-1920w.jpg 1920w"
-      (max-width: 768px) calc(100vw - 3em),
+        type="image/jpeg">
-      (max-width: 1376px) calc(50vw - 8em)
+
-    "
+    <img
-    src="${1:imageName}.jpg"
+        sizes="550px, (max-width: 768px) calc(100vw - 3em), (max-width: 1376px) calc(50vw - 8em)"
-    alt="${1:imageName}"
+        srcset="${1:imageName}.jpg?w=100&fm=jpg&fl=progressive 100w, ${1:imageName}.jpg?w=200&fm=jpg&fl=progressive 200w, ${1:imageName}.jpg"
-    loading="lazy"
+        src="${1:imageName}.jpg"
-    decoding="async"
+        alt="${1:imageName}"
-    width="{{ $width }}"
+        <!--
-    height="{{ $height }}">
+        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 -->

Packages/User/vue-component.sublime-snippet

@@ -21,24 +21,25 @@ const props = defineProps({})
 
 // lifecycle hooks
 onBeforeMount(() => {
-    //
+  //
 })
 
 onMounted(() => {
-    //
+  //
 })
 
 onBeforeUpdate(() => {
-    //
+  //
 })
 
 onBeforeUnmount(() => {
-    //
+  //
 })
 
 onUnmounted(() => {
-    //
+  //
 })
+
 // methods
 
 </script>