News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

[2.0.*] How to automatically copy attach image links

Started by dodos26, September 24, 2023, 02:54:35 PM

Previous topic - Next topic

dodos26

How to automatically copy attach image links
Open themes/your/display.template.php and find "// Assuming there are attachments..."
You have to style the button yourself depending on your theme. Just add a button class or write your own.
The most important thing is to call the function "create_images_table(this)" inside "<div ... class="attachments ...">"
Code ("Add middle line in echo") Select
                            <div id="msg_', $message['id'], '_footer" class="attachments smalltext">'.
                                ($context['topic_first_message'] == $message['id'] && $message['member']['id'] == $context['user']['id'] ? '<button onclick="create_images_table(this)">Copy Images</button>' : '') .'
                                <div style="overflow: ', $context['browser']['is_firefox'] ? 'visible' : 'auto', ';">';
Open themes/default/scripts/topic.js
Code ("Add this on end") Select
function create_images_table(temp_button) {
    const parentDiv = temp_button.parentElement;
    const links = parentDiv.querySelectorAll('a');
    const imageList = [];

    // Go through every link you find
    links.forEach((link) => {
        // Check if the link contains "onclick" and "image" in the href attribute
        if (link.hasAttribute('onclick') && link.getAttribute('href').includes('image')) {
            // Find the value inside the expandThumb function (e.g. 185)
            const match = /expandThumb\((\d+)\)/.exec(link.getAttribute('onclick'));
            if (match) {
                const imageId = match[1];
                // Replace attach=xxx with attach=imageId in the href attribute
                const imageUrl = link.getAttribute('href').replace(/attach=\d+/, `attach=${imageId}`);
                // Add link to list
                imageList.push(imageUrl);
            }
        }
    });

    const tempElement = document.createElement('textarea');

    if (imageList.length === 1) {
        // If there is only one image, generate [img][/img] tags
        const imgBBCode = `[img]${imageList[0]}[/img]`;
        tempElement.value = imgBBCode;
    } else {
        // If there is more than one image, generate a table
        // Split the list into rows of up to 5 items each
        const rows = [];
        for (let i = 0; i < imageList.length; i += 5) {
            rows.push(imageList.slice(i, i + 5));
        }

      // Create BBCode for the table
        const tableBBCode = rows.map((row, index) => {
            const rowBBCode = row.map((imageUrl, index_img) => {
                return `${index_img === 0 ? '' : '\n'}[td][img]${imageUrl}[/img][/td]`;
            }).join('');
            return `${index === 0 ? '' : '\n'}[tr]\n${rowBBCode}\n[/tr]`;
        }).join('');

        tempElement.value = `[table]\n${tableBBCode}\n[/table]`;
    }

    document.body.appendChild(tempElement);
    tempElement.select();
    document.execCommand('copy');
    document.body.removeChild(tempElement);

    // Notify the user about the specified clipboard
    temp_button.innerText = "Skopiowano!";
    temp_button.style.setProperty('opacity', '0');
    temp_button.style.setProperty('transition', 'opacity 1.2s ease');
    setTimeout(function () {
        temp_button.style.display = 'none';
    }, 950);
}

The button will create links and copy them to the clipboard. If there is only one link, it will embed it in the [img] tag, but if there is more than one link, it will create a table and embed it in the [img] tag.
Once clicked, the button will disappear.

However, it is better to display this to the authorised person who owns the message and wants to insert images from the attachments into the message.
And this is the reason why I added: (checks if he is the first message and if he is the owner of the message)
($context['topic_first_message'] == $message['id'] && $message['member']['id'] == $context['user']['id'] ? ...
Example copy return:
[table]
[tr]
[td][img]https://xxx.org/index.php?action=dlattach;topic=44.0;attach=145;image[/img][/td]
[td][img]https://xxx.org/index.php?action=dlattach;topic=44.0;attach=147;image[/img][/td]
[td][img]https://xxx.org/index.php?action=dlattach;topic=44.0;attach=149;image[/img][/td]
[td][img]https://xxx.org/index.php?action=dlattach;topic=44.0;attach=151;image[/img][/td]
[td][img]https://xxx.org/index.php?action=dlattach;topic=44.0;attach=153;image[/img][/td]
[/tr]
[tr]
[td][img]https://xxx.org/index.php?action=dlattach;topic=44.0;attach=155;image[/img][/td]
[td][img]https://xxx.org/index.php?action=dlattach;topic=44.0;attach=157;image[/img][/td]
[td][img]https://xxx.org/index.php?action=dlattach;topic=44.0;attach=159;image[/img][/td]
[td][img]https://xxx.org/index.php?action=dlattach;topic=44.0;attach=161;image[/img][/td]
[td][img]https://xxx.org/index.php?action=dlattach;topic=44.0;attach=163;image[/img][/td]
[/tr]
[tr]
[td][img]https://xxx.org/index.php?action=dlattach;topic=44.0;attach=165;image[/img][/td]
[td][img]https://xxx.org/index.php?action=dlattach;topic=44.0;attach=167;image[/img][/td]
[td][img]https://xxx.org/index.php?action=dlattach;topic=44.0;attach=169;image[/img][/td]
[td][img]https://xxx.org/index.php?action=dlattach;topic=44.0;attach=171;image[/img][/td]
[td][img]https://xxx.org/index.php?action=dlattach;topic=44.0;attach=173;image[/img][/td]
[/tr]
[/table]

It also makes him choose larger images instead of thumbnails.

Advertisement: