[Plugin: Comment Images] Size limit

Hey Tom,

Enqueue this to the footer of comments.php (or ideally just hook it) and think about adding a theme option for file size.

<script>
    document.forms[0].addEventListener('submit', function( evt ) {
        var file = document.getElementById('comment_image').files[0];

        if(file && file.size < 153600) { // 150k (this size is in bytes)
            //Submit form
        } else {
            //Prevent default and display error
            alert('File size is too large, please reduce and try again');
            evt.preventDefault();
        }
    }, false);
</script>

That does the trick.

Also, in plugin.php, consider modifying the display code:

<a href="' . $comment_image['url'] . '" rel="PrettyPhoto"><img src="' . $comment_image['url'] . '" alt="" /></a>

The rel won’t do a thing if PrettyPhoto isn’t installed but if it is, it’ll trigger the plugin. You can ignore that or make it an option but the link to full size is nice.

Finally, the following CSS:

p.comment-image img {max-width: 45%;}
span.warning {color:indianred;}

In addition to a warning:
$html .= __( '<br><span class="warning">File must be smaller than 150k or submit will fail</span>', 'comment-images' );

Makes a it a much more functional tool.

Cheers.

Thanks for sharing the code, Ian. For those that need this, this’ll be a viable option.

Ultimately, my plan to make it a bit more flexible through the use of a setting, an option page, and so on; however, there are some parts of the core of the plugin that I want to improve first.

This is definitely a viable short term solution so I appreciate you taking the time to share it here!

I went over the script with my PHP guy and we decided that, without restructuring your logic a bit, it would be difficult to make the kinds of changes I wanted in a practical way. Ideally, the plugin would invoke the WP media uploader and display a resized thumbnail in the comment body.

The JS solution made a nice stopgap though and I hope someone finds it useful ??

For now, combined with NicEdit, it creates a much slicker interface than what is presented by default.

https://imperativeideas.com/dev/final.png

Hi, I have the same problem with the very good comment images plugin. I want to set a limit on the size of the images uploaded.
I tried with

<script>
    document.forms[0].addEventListener('submit', function( evt ) {
        var file = document.getElementById('comment_image').files[0];

        if(file && file.size < 153600) { // 150k (this size is in bytes)
            //Submit form
        } else {
            //Prevent default and display error
            alert('File size is too large, please reduce and try again');
            evt.preventDefault();
        }
    }, false);
</script>

at the end of comments.php but I can not make it work.
I use the latest version of worpress and Webfolio Theme.

Any idea that this solution is working for me? Thank you and sorry for my google english.

I stand corrected. The code works perfectly.
In twenty twelve theme and I suppose in other wordpress.

The problem is the theme I use, Webfolio.

Do not get it to work there.

Anyone know what can be wrong?
Thanks and apologies for the misunderstanding.

hello,
I correct myself.

The problem with the theme Webfolio was silly, “document.forms [1]” instead of “document.forms [0]”.

the problem of error image is added, I fixed it by adding a couple of lines. To see what you think:

<script>
    document.forms[1].addEventListener('submit', function( evt ) {
        var file = document.getElementById('comment_image').files[0];

        if(file && file.size < 153600) { // 150k (this size is in bytes)
            //Submit form
        } else if (!file){
			//Submit form
		} else {
            //Prevent default and display error
            alert('Tu imagen tiene un tama\u00f1o superior a 150Kb, reduce su tama\u00f1o o env\u00edanosla por email.');
			document.getElementById('comment_image').value = '';
            evt.preventDefault();
        }
    }, false);
</script>

works for me, let me know if you see any corrections.

Greetings!