Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options

Image Dimensions in Source Code

edited August 2006 in Vanilla 1.0 Help
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.)

Comments

  • Options
    Great idea!

    I think we only need to know the height for the scrolling problem ;-)
  • Options
    NickENickE New
    edited August 2006
    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.
  • Options
    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.
  • Options
    NickENickE New
    edited August 2006
    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
  • Options
    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.
  • Options
    NickENickE New
    edited August 2006
    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.
  • Options
    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.
  • Options
    Maybe you could call it after a preload images function. Then again, that's probably making it more complicated than it has to be.
  • Options
    @Bergamot: yes, it is.
  • Options
    Awesome.
This discussion has been closed.