Image Dimensions in Source Code

Mohammed2

Hi, I've noticed that when users post large images in a thread, the page will jump to an incorrect location. I believe this is due to the page being loaded to the (at the time) correct position before any images are loaded. Once the images are inserted into the page, the point to which the browser has scrolled is no longer appropriate.

My proposed solution is to create an extension that will:
(1) retrieve an image's height and width using the imagesx and imagesy functions, and
(2) include these in the height and width attributes for the img tag displaying the image.

This will create a blank area in which the image will be placed, and eliminate this page-shifting problem.
(Really, I think this should be coded into Vanilla itself for compliance purposes.)

WallPhone

Great idea!

I think we only need to know the height for the scrolling problem ;-)

NickE

Or an easier (and faster) solution would be to include a small bit of js which executes when the document loads and scrolls down to the specified position with the scrollIntoView function.

Bergamot

I like SirNot's idea better; slowing down the server with external connections, sometimes to files that don't even exist, is not a very good idea.

NickE

This worked for me (can also be done in an extension, but I couldn't be bothered to create a whole new file for some simple js):

Open up themes/comments.php, and replace$CommentList = '';With$CommentList = '<script>function locateComment(){var l=window.location.toString(),o=document.getElementById(\'Comments\'); if(l.indexOf(\'#Item_\')!=-1&&o){l=l.split(\'#Item_\');l=parseInt(l[1]);l=l>o.childNodes.length?o.childNodes.length:l;l--; l=l<0?0:l;o=o.childNodes[l];o.scrollIntoView(true);}}document.onload=locateComment;</script>';

EDIT: And actually, only the src and alt attributes are required to make an img tag standards compliant: http://www.w3.org/TR/REC-html40/struct/objects.html#edef-IMG

tomisimo

How about saving the image dimensions to the DB when the user posts the image. This could be done with the GD functions in Php when the image is posted, or done in JS the first time it's displayed.

NickE

How would that help? That would only bog down the application even more through db queries and extra code (considering you'd have to first find the image tags, then load the images, find their dimensions and finally store them; later, on each page load, you'd have to go back through and edit each image tag to include the img dimensions [assuming the image is still the same], all simply to achieve the same effect as a little snippet of js). It'd be faster and more efficiently to simply ignore the image dimensions, and just let the browser deal with them internally with a little bit of js to re-position the page after the images have loaded.

Bergamot

Is the onload event guaranteed to be called after all images have been loaded? If not, you could still end up having the same problem.

Mohammed2

Maybe you could call it after a preload images function. Then again, that's probably making it more complicated than it has to be.

NickE

@Bergamot: yes, it is.

Bergamot

Awesome.