Disable image viewer for futured image and more

[iamgiannisx]

Hi,

I would like to disable image viewer for

1. featured image
2. for all images inside post (not for all posts)
3. Post list
   I can achieve this with some modifications at theme templates my question is if there is another way without modify templates ?

[razonyang]

Hi, the theme provide a viewer options file, just create the assets/viewer/js/options.ts file to your site root.

The following code snippet ignores the featured images that have class post-featured-img, change it as you need.

const options = {
    filter(img: HTMLImageElement) {
      let valid = !img.classList.contains('post-featured-img');
      if (!valid) {
        img.setAttribute('data-viewer-invisible', 'true');
      }
      return valid
    },
};
export default options;

Available options can be found at https://github.com/fengyuanchen/viewerjs/blob/main/README.md#options.

NOTE: the filter will override the theme's default filter function.

[iamgiannisx]

Thanks for your reply.

Tried and worked for featured images but this code snippet enable image viewer for avatar and buy me a coffee images.

[razonyang]

Yep, it just a code snippet, you'll need to change it. In this case, you can define a ignoreClasses to achieve it:

const ignoreClasses = [
    'post-featured-img',
    'post-reward-img',
    'profile-avatar'
]
const options = {
    filter(img: HTMLImageElement) {
        var valid = true;
        for (let className of ignoreClasses) {
            if (img.classList.contains(className)) {
                valid = false;
                break;
            }
        }
        if (!valid) {
            img.setAttribute('data-viewer-invisible', 'true');
        }
        return valid;
    },
};
export default options;

[iamgiannisx]

Thanks a lot works like a charm.