A plea to the admin on picture settings

[Takiyaki]

Hello, this forum is awesome and I thank you for keeping it going.

I do have one request though. Can you please find a way to get the picture attachments to open to a viewable size? I dont know what the settings are, whether you can limit the view width or have the software downscale the uploads (which would prob save a lot of space)

[Dan S.]

I do have one request though. Can you please find a way to get the picture attachments to open to a viewable size?

I just always open the pictures in a separate tab, that works for me.

[shaxberd]

FWIW, the zoom/thumb function is located in http://chinertown.com/Themes/default/scripts/topic.js and called expandThumb.

It basically switches the big/small image between link/image attributes with each click, so switching a 100% width CSS property as well should do the trick. Not too beautiful a solution, but should work

function expandThumb(thumbID)
{
   var img = document.getElementById('thumb_' + thumbID);
   var link = document.getElementById('link_' + thumbID);
   var tmp = img.src;
   img.src = link.href;
   link.href = tmp;
   img.style.width = '';
   img.style.height = '';
   if (img.style.width == '' || img.style.width == null ) { img.style.width = '100%';img.style.height = ''; } else { img.style.width = '';img.style.height = ''; }
   return false;
}

[Hainesy]

+1 for this please! I love having the option to view photos in full resolution but would be amazing if the default zoom could be fixed as suggested so when clicked they are scaled to fill the width of the page.

[Dell]

You can use a userscript to deal with this. This seems to do the job for me:

Code: [Select]

(function() {
    'use strict';

    function adjustImage(img, footerWidth) {
        const screenHeight = window.innerHeight;

        if (img.naturalWidth > footerWidth) {
            const scaledHeight = (img.naturalHeight * footerWidth) / img.naturalWidth;

            if (scaledHeight > screenHeight) {
                img.style.maxHeight = screenHeight + 'px';
                img.style.height = '100%';
                img.style.width = 'auto';
                img.style.objectFit = 'contain';
            } else {
                img.style.maxWidth = footerWidth + 'px';
                img.style.width = '100%';
                img.style.height = 'auto';
                img.style.objectFit = 'contain';
            }
        }
    }

    function setupFooterImages() {
        document.querySelectorAll('.attachments.smalltext').forEach(footer => {
            const footerWidth = footer.clientWidth;
            footer.querySelectorAll('img').forEach(img => {
                img.addEventListener('load', () => adjustImage(img, footerWidth));
                if (img.complete && img.naturalWidth) {
                    adjustImage(img, footerWidth);
                }
            });
        });
    }

    window.addEventListener('load', setupFooterImages);

    const observer = new MutationObserver(setupFooterImages);
    observer.observe(document.body, { childList: true, subtree: true });

    window.addEventListener('resize', setupFooterImages);
})();


[warthog]

I just always open the pictures in a separate tab, that works for me.

Indeed it does. 
Thankyou.

[Bender87]

You can use a userscript to deal with this. This seems to do the job for me:

Code: [Select]

(function() {
    'use strict';

    function adjustImage(img, footerWidth) {
        const screenHeight = window.innerHeight;

        if (img.naturalWidth > footerWidth) {
            const scaledHeight = (img.naturalHeight * footerWidth) / img.naturalWidth;

            if (scaledHeight > screenHeight) {
                img.style.maxHeight = screenHeight + 'px';
                img.style.height = '100%';
                img.style.width = 'auto';
                img.style.objectFit = 'contain';
            } else {
                img.style.maxWidth = footerWidth + 'px';
                img.style.width = '100%';
                img.style.height = 'auto';
                img.style.objectFit = 'contain';
            }
        }
    }

    function setupFooterImages() {
        document.querySelectorAll('.attachments.smalltext').forEach(footer => {
            const footerWidth = footer.clientWidth;
            footer.querySelectorAll('img').forEach(img => {
                img.addEventListener('load', () => adjustImage(img, footerWidth));
                if (img.complete && img.naturalWidth) {
                    adjustImage(img, footerWidth);
                }
            });
        });
    }

    window.addEventListener('load', setupFooterImages);

    const observer = new MutationObserver(setupFooterImages);
    observer.observe(document.body, { childList: true, subtree: true });

    window.addEventListener('resize', setupFooterImages);
})();


Do you have a short instruction for this? I mean can i run this in the browser?

[crazyravr]

I will 345th this request. There is no reason we have to coding for this ourselves in this day and age lol

[Sitar_Ned]

Sorry all.. I do agree completely. Definitely needs improvement.

The inevitable move to SMF version 2.1 will have this and multiple other features added. Auto image resizing, mobile compatibility, the ability to tag other users, and a few other features that will be nice to have and have been requested.

This year, we moved the forum to SMF version 2.0.19 and the plan is to move to 2.1 next year. So, while I can't say this issue will be fixed right away, it will be fixed. The update is turning out to be a bit more complicated than the last one due to the mobile compatibility feature being added.

Merry Christmas, everyone.