Snippet feedback request

General
1

Hey Modxers,

Looking for some feedback to improve a snippet.

The idea of this snippet is to create a <picture></picture> element with webp & png/jpg sources, img sizes and media widths. It’s based on Bootstrap, so you enter the col-* the image has to fill in the &cols=`` parameter.

Usage

[[!create_pic? 
  &src=`/path/to/img.jpg`
  &alt=`Img desc`
  &cols=`
    {
      "xs":12,
      "sm":12,
      "md":6,
      "lg":5,
      "xl":3 
}
`
]]

This creates the following

<picture>
    <source
        srcset="assets/components/phpthumbof/cache/daniil-vnoutchkov-U1IHfPUYyPE-unsplash.5c071db70a571daaf4d080dbc8238ef9.webp 420w"
        media="(max-width: 419px)" type="image/webp">
    <source
        srcset="assets/components/phpthumbof/cache/daniil-vnoutchkov-U1IHfPUYyPE-unsplash.9278d32dc5c0aa4abadd3cf1185d8049.jpg 420w"
        media="(max-width: 419px)" type="image/jpg">
    <source
        srcset="assets/components/phpthumbof/cache/daniil-vnoutchkov-U1IHfPUYyPE-unsplash.9ffac3eba0a4aa5acfb4daf262a29ff2.webp 576w"
        media="(min-width: 420px) and (max-width:575px)" type="image/webp">
    <source
        srcset="assets/components/phpthumbof/cache/daniil-vnoutchkov-U1IHfPUYyPE-unsplash.cc997ffc2f452661653ec9cbcc707e18.jpg 576w"
        media="(min-width: 420px) and (max-width:575px)" type="image/jpg">
    <source
        srcset="assets/components/phpthumbof/cache/daniil-vnoutchkov-U1IHfPUYyPE-unsplash.0ff34661be885c7bd87cf3d63329655b.webp 384w"
        media="(min-width: 576px) and (max-width:767px)" type="image/webp">
    <source
        srcset="assets/components/phpthumbof/cache/daniil-vnoutchkov-U1IHfPUYyPE-unsplash.c4d9282a584b32ad3338936189e6c135.jpg 384w"
        media="(min-width: 576px) and (max-width:767px)" type="image/jpg">
    <source
        srcset="assets/components/phpthumbof/cache/daniil-vnoutchkov-U1IHfPUYyPE-unsplash.81aa6566774de6c3eac51c8efff6bdd7.webp 413.33333333333w"
        media="(min-width: 767px) and (max-width:991px)" type="image/webp">
    <source
        srcset="assets/components/phpthumbof/cache/daniil-vnoutchkov-U1IHfPUYyPE-unsplash.1c4afe3cb84e76e1f909cc5d821bea60.jpg 413.33333333333w"
        media="(min-width: 767px) and (max-width:991px)" type="image/jpg">
    <source
        srcset="assets/components/phpthumbof/cache/daniil-vnoutchkov-U1IHfPUYyPE-unsplash.6d6afb5b4ebf9a45800b7e503d1ea244.webp 360w"
        media="(min-width: 991px)" type="image/webp">
    <source
        srcset="assets/components/phpthumbof/cache/daniil-vnoutchkov-U1IHfPUYyPE-unsplash.9a99015bc93e7cb3de77c906c0844879.jpg 360w"
        media="(min-width: 991px)" type="image/jpg">
    <img
        src="assets/components/phpthumbof/cache/daniil-vnoutchkov-U1IHfPUYyPE-unsplash.6a8c1628e85b9b5c48a9d242fd2f13e3.jpg"
        alt="Img desc" class="img-fluid">
    </picture>

Feedback

Looking for feedback on

  • How to improve the speed of script execution
  • Code improvements (Like adding a quality param for pThumb quality
  • Security issues
  • Performance issues
  • Ideas :smiley:
  • … Is it even worth doing this?

Many thanks

2 Likes