profile
viewpoint
If you are wondering where the data of this site comes from, please visit https://api.github.com/users/saneef/events. GitMemory does not store any data, but only uses NGINX to cache data for a period of time. The idea behind GitMemory is simply to give users a better reading experience.
Saneef Ansari saneef Bangalore https://saneef.com Freelance web designer and developer

saneef/color-color 13

Website to generate color palettes in HSLuv color space

saneef/eleventy-plugin-img2picture 9

Eleventy plugin to replace <img> using <picture> with resized and optimized images.

saneef/agnoster-light-zsh-theme 3

A ZSH theme designed to disclose information contextually, with a powerline aesthetic

saneef/affiliates-chrome-extension 1

Affilitates is a extension for Google Chrome Browser. You can configure affiliate IDs or tags from your friends to use with online shopping sites.

saneef/awesome-launchbar 1

List of useful Launchbar Actions

saneef/bookmarklets 1

Time saving bookmarklets for you browser

saneef/dsgnrs.in 1

Directory of Product Designers in India

saneef/eleventy-plugin-git-commit-date 1

Eleventy plugin to get recent Git commit time of a file, or a Eleventy collection.

saneef/11ty-website 0

Documentation site for the Eleventy static site generator.

release saneef/eleventy-plugin-img2picture

v1.0.2

released time in 8 days

issue commentsaneef/eleventy-plugin-img2picture

`TemplateWriterWriteError` when trying to use the plugin

No. This plugin only optimises images in HTML files referenced with <img> tags.

ornelasnarciso

comment created time in 10 days

issue closedsaneef/eleventy-plugin-img2picture

Having trouble making the plugin work

Hello there. I'm having trouble making the plugin work.

I'm getting this error on the terminal:

TemplateWriterWriteError was thrown

ENOENT: no such file or directory, stat '/images/uploads/meBio.png'

The path exists and it's correct, so I don't get the error. I'm a self taught programmer and sometimes is very hard to understand why things don't work. (the project does not have a "src" folder)

Thank you for your time.

The code:

const img2picture = require("eleventy-plugin-img2picture");

module.exports:

cfg.addPlugin(img2picture, {

  eleventyInputDir: "//",
  imagesOutputDir: "_site",
  urlPath: "_site/images/",
  extensions: ["jpg", "png", "jpeg"],
  formats: ["webp", "jpeg"],
  sizes: "100vw",
  minWidth: 150, // Minimum width to resize an image to
  maxWidth: 700, // Maximum width to resize an image to
  widthStep: 150, // Width difference between each resized image
  fetchRemote: false, // When true, remote images are fetched, cached and optimized.
  dryRun: false, // When true, the optimized images are not generated. Only HTMLs are processed.

  // Function used by eleventy-img to generate image filenames
  filenameFormat: function (id, src, width, format) {
    const extension = path.extname(src);
    const name = path.basename(src, extension);

    return `${name}-${id}-${width}w.${format}`;
  },

  cacheOptions: {},
  sharpOptions: {},
  sharpWebpOptions: {},
  sharpPngOptions: {},
  sharpJpegOptions: {},
  sharpAvifOptions: {},

});

closed time in 10 days

ornelasnarciso

issue commentsaneef/eleventy-plugin-img2picture

Having trouble making the plugin work

Great! Glad to know it worked. You should be able to use all options other than dryRun and filenameFormat without any issues.

  • dryRun only for testing, it don't generate any image files.
  • filenameFormat, you need to write a function to generated filenames
ornelasnarciso

comment created time in 10 days

push eventsaneef/eleventy-plugin-img2picture

Saneef Ansari

commit sha 446e8f05c68020848fb2a67e333eef52d6908755

docs(readme): add note on `sizes` attribute

view details

push time in 10 days

issue commentsaneef/eleventy-plugin-img2picture

Having trouble making the plugin work

With quick start example, try with these settings:

{ 
  eleventyInputDir: ".",
  imagesOutputDir: "_site/images/",
  urlPath: "/images/"
}

imagesOutputDir tells where to copy the optimised images, and urlPath will be used to generate src in <img> tag. So, urlPath should match the path used in imagesOutDir when serving. Example, with urlPath: "/images/", within <picture> you will have <img src="/images/<filename>.jgp" />

ornelasnarciso

comment created time in 10 days

issue commentsaneef/eleventy-plugin-img2picture

Having trouble making the plugin work

The problem you are facing looks similar to #7.

@ornelasnarciso Please go through the thread, #7. Both path and eleventyInputDir errors were addressed in that tread. Based on these common problem I have update the Readme.

ornelasnarciso

comment created time in 10 days

issue commentsaneef/eleventy-plugin-img2picture

Having trouble making the plugin work

Can you try with eleventyInputDir: ".", and remove all options other than eleventyInputDir, imageOutputDir, and urlPath?

ornelasnarciso

comment created time in 10 days

push eventsaneef/eleventy-plugin-img2picture

saneef

commit sha 77e42789deedf04922585af91bf561ee9fc6d564

docs(readme): separates usage into beginner and advanced

view details

push time in 11 days

created tagsaneef/eleventy-plugin-img2picture

tagv1.0.2

Eleventy plugin to replace <img> using <picture> with resized and optimized images.

created time in 11 days

push eventsaneef/eleventy-plugin-img2picture

saneef

commit sha 772d5ce370160d4cf19f4f0d92b054db4ad279ed

fix: sets default value for `eleventyInputDir` to `.` This matches default value for `dir.input` for Eleventy

view details

saneef

commit sha 762cc726d2271081c25ad00e1771d59d880c9a8b

1.0.2

view details

push time in 11 days

issue commentsaneef/eleventy-plugin-img2picture

Having trouble making the plugin work

Also, you might want to start with mandatory options: eleventyInputDir, imageOutputDir, and urlPath. Once, you make it working you can customise using optional parameters.

ornelasnarciso

comment created time in 11 days

issue commentsaneef/eleventy-plugin-img2picture

Having trouble making the plugin work

The problem you are facing looks similar to #7.

ornelasnarciso

comment created time in 11 days

issue closedsaneef/eleventy-plugin-img2picture

Error building

I have added this plugin to my project but I get an error when building it.

I've set it up according to the instructions and added it using:

eleventyConfig.addPlugin(img2picture, {
    eleventyInputDir: "", // Eleventy input folder.
    imagesOutputDir: "_site/assets/images/", // Output folder for optimized images.
    // URL prefix for images src URLS.
    // It should match with path suffix in `imagesOutputDir`.
    // Eg: imagesOutputDir with `_site/images` likely need urlPath as `/images/`
    urlPath: "/assets/images/",
    extensions: ["jpg", "png", "jpeg"],
    formats: ["avif", "webp", "jpeg"],
    sizes: "100vw",
    minWidth: 150,
    maxWidth: 1440,
    widthStep: 150,
    fetchRemote: false,
    dryRun: false,

    filenameFormat: function (id, src, width, format) {
      const extension = path.extname(src);
      const name = path.basename(src, extension);

      return `${name}-${id}-${width}w.${format}`;
    }
  });

The error I get is as follows: https://pastebin.mozilla.org/WjARFvy6

All my images are placed in two places, just for testing. So they are in assets/images/ and the output folder _site/assets/images

I have tried setting the input and output directories to all kinds of values but I get the same error all the time.

What am I doing wrong?

closed time in 11 days

Amplificator

issue commentsaneef/eleventy-plugin-img2picture

Error building

You don't need to provide filenameFormat and other optional parameters. Only eleventyInputDir, imagesOutputDir, and urlPath are the required options.

If you want to use the example filenameFormat function, you need to include these lines on top of the .eleventy.js to work:

const path = require("path");
Amplificator

comment created time in 11 days

issue commentsaneef/eleventy-plugin-img2picture

Error building

@Amplificator Can you share you .eleventy.js, or is the project publicly accessible?

Amplificator

comment created time in 11 days

startedTheFuseLab/VL.Fuse

started time in 12 days

release saneef/eleventy-plugin-img2picture

v1.0.1

released time in 12 days

issue commentsaneef/eleventy-plugin-img2picture

`sizes` attribute from `<img>` is not replicated on `<source>`

Fix is available on v1.0.1

saneef

comment created time in 12 days

push eventsaneef/eleventy-plugin-img2picture

saneef

commit sha 1762703a62a9d9cc396cb4e07bc4cbf53e1b0ea8

1.0.1

view details

push time in 12 days

created tagsaneef/eleventy-plugin-img2picture

tagv1.0.1

Eleventy plugin to replace <img> using <picture> with resized and optimized images.

created time in 12 days

push eventsaneef/eleventy-plugin-img2picture

saneef

commit sha 80ae6d90ac73b8c77cc0d488644aadb029813424

chore(packages): bump npm packages

view details

saneef

commit sha 4c96714e0682677a308b6af120c637f65bfe2c26

fix: `size` attribute from `<img>` are not hoisted on `<source>` Fixes #7

view details

push time in 12 days

issue commentsaneef/eleventy-plugin-img2picture

Error building

The eleventyInputDir should be same as dir.input returned in the Eleventy configuration. In case you are not setting any value for dir.input, the default value is ".".

"" is not a valid path. So, can you try with setting the eleventyInputDir same value as dir.input?

Amplificator

comment created time in 12 days

issue closedsublimelsp/LSP-css

Cannot override 'Unknown property' warnings

I'm not able to override "Unknown property" warning using settings.

This is what I set inLSP-css.sublime-settings:

{
  "css.lint.validProperties": ["accent-color"],
  "scss.lint.validProperties": ["accent-color"]
}

Screenshot 2021-09-08 at 23 03 51

closed time in 17 days

saneef

issue commentsublimelsp/LSP-css

Cannot override 'Unknown property' warnings

Ah! 🙈

Thanks @jfcherng and @rwols!

saneef

comment created time in 17 days

issue commentsublimelsp/LSP-css

Cannot override 'Unknown property' warnings

I installed LSP-json, and it's not showing any errors or warning. :(

Screenshot 2021-09-09 at 09 26 31

saneef

comment created time in 17 days

startedandymatuschak/orbit

started time in 17 days

issue openedsublimelsp/LSP-css

Cannot override 'Unknown property' warnings

I'm not able to override "Unknown property" warning using settings.

This is what I set inLSP-css.sublime-settings:

{
  "css.lint.validProperties": ["accent-color"],
  "scss.lint.validProperties": ["accent-color"]
}

Screenshot 2021-09-08 at 23 03 51

created time in 17 days