I've recently made a switch to Ayano's Comment Widget and, as much as I adore it, I missed having the option to attach images. Luckily, the code is incredibly customizable so with a bit of tweaking, it is possible!

This mod allows users to submit a link of an image that will be attached to their comments. If this is something you'd like to have, follow the steps below.

[1] Add to Google Form

Assuming you've already set everything prior to this, Go to your google form and create a new short text question with the title 'Image'. Remember that it is case sensitive!

Open the three dotted icon to the right side and click 'Get pre-filled link'. Fill up every field with the question's title, including the new one you just made. Once you have finished and click 'Get link', you should get a newly generated link where you will be able to find something that looks like this:

&entry.123456789=Image

In your js file, look for the section of variables of the form ids. You can add the script after const s_replyId = 'ID HERE'; and encode the numbers from your form link.

const s_imageId = '1234567890'

[2] Add Element Wrappers

To create the input the user will add their image links to, look for the v_formHtml variable. Inside it, there should be a div with id="c_textWrapper" and add the following script below that element:

<div id="c_imageWrapper" class="c-inputWrapper">
    <label class="c-label c-imageLabel" for="entry.${s_imageId}">Image Link (Optional)</label>
    <input class="c-input c-imageInput" name="entry.${s_imageId}" id="entry.${s_imageId}" type="url" pattern="https://.*" placeholder="" onchange="previewImg()">
</div>

We need to create a preview so that the users are able to see what image they have linked and whether or not it will load in. Still inside the v_formHtml variable, look for the input with id="c_submitButton" and then add the following script after it.

<div id="c_previewWrapper">
    <img id="c_previewOutput" src="#">
    <label class="c-label c-previewLabel">Image Preview</label>
    <p>If the image does not load, please make sure the website you are linking to allows <a href="https://simple.wikipedia.org/wiki/Hotlinking" target="_blank">hotlinking</a>!</p>
</div>

[3] Add the Functions

Now that we've set up all the variables, it's time to make them actually functional.

Look for if (s_commentsOpen) inside of function getComments() - there should be a comment above it that reads 'Clear input fields too'. You should add the following script below inside of that if statement:

document.getElementById(`entry.${s_imageId}`).value = '';

In order to check and append the comment's image, look for function createComment(data). Inside should be comment.appendChild(text);. Below that you should put the following script:

// Image link
if (data.Image) {
    let img = document.createElement('img')
    img.src = data.Image
    img.className = 'c-img'
    comment.appendChild(img)
}

It won't matter too much where you choose to put this last script. It is a function that is triggered every time the user changes the image field. I personally put it at the bottom before getComments();.

function previewImg() {
    previewWrapper = document.getElementById("c_previewWrapper")
    previewLink = document.getElementById(`entry.${s_imageId}`).value
    if (previewLink.length === 0) { 
        previewWrapper.style.display = "none"
        previewLink = "#"
    } else {
        previewWrapper.style.display = "block"
    }
    document.getElementById("c_previewOutput").src = previewLink
}

[4] Add CSS Styling

This part isn't necessary but it makes the preview look a bit nicer.

#c_previewWrapper:has(img[src='#']) { display:none }
#c_previewWrapper {
    padding: 0.5rem;
    border: 1px solid gray;
    max-width:350px;
    margin-bottom: 0.5rem;
}

#c_previewOutput { max-width: 100%; display: block; }
#c_previewWrapper p {
    font-size: 0.8rem;
    opacity: 0.5;
}

.c-img {display: block;}

And You're Done!

I highly recommend using this mod alongside Frills' Guide to Adding Moderation so you can check and ensure that the comments being submitted don't contain disturbing images.

If you get around to using to using this, let me know down below. I'd love to check out all of your websites!