{"id":100,"date":"2011-03-11T11:15:37","date_gmt":"2011-03-11T11:15:37","guid":{"rendered":"http:\/\/blog.soton.ac.uk\/tag4fun\/?p=100"},"modified":"2011-05-26T14:33:36","modified_gmt":"2011-05-26T14:33:36","slug":"scaling-images","status":"publish","type":"post","link":"https:\/\/blog.soton.ac.uk\/tag4fun\/2011\/03\/11\/scaling-images\/","title":{"rendered":"Scaling images"},"content":{"rendered":"

The same image can be posted a number of times at different sizes, for example:
\n\"\"<\/a>\"\"<\/a><\/p>\n

To deal with this we will simply store the tag position in the database relative to the full sized image, and scale the tags on each image to match the resized image. Our initial prototype (and the one running on this blog) did not have this however it has been implemented on the latest prototypes as such:<\/p>\n

\/**<\/p>\n

* Get the original size of an image<\/p>\n

* @param {string} img The location of the image<\/p>\n

* @return {{width: number, height: number}} The dimensions of the image<\/p>\n

*\/<\/p>\n

me.jscott.taggr.getImageSize = function (img) {<\/p>\n

var i = new Image();<\/p>\n

i.src = img;<\/p>\n

return {“width”: i.width, “height”: i.height}<\/p>\n

}<\/p>\n

var original_size = me.jscott.taggr.getImageSize(imgs[i].src);<\/p>\n

var size = goog.style.getSize(imgs[i]);<\/p>\n

imgs[i].setAttribute(‘_tgr_width_scale’, size.width \/ original_size.width);<\/div>\n
imgs[i].setAttribute(‘_tgr_height_scale’, size.height \/ original_size.height);<\/div>\n
\/\/ …<\/div>\n
\/\/ position tag<\/div>\n
\n
goog.style.setSize(container, new goog.math.Size(parseInt(a.getAttribute(“_tgr_width”),10), parseInt(a.getAttribute(“_tgr_height”),10)));<\/div>\n
goog.style.setPosition(container, new goog.math.Coordinate(parseInt(a.getAttribute(“_tgr_absolute_x”),10), parseInt(a.getAttribute(“_tgr_absolute_y”),10));<\/div>\n<\/div>\n<\/blockquote>\n
(although the actual code is a lot nicer formatted with comments and everything…. honestly!)<\/div>\n","protected":false},"excerpt":{"rendered":"

The same image can be posted a number of times at different sizes, for example: To deal with this we will simply store the tag position in the database relative to the full sized image, and scale the tags on … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":159,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6475],"tags":[6481,191,11809],"class_list":["post-100","post","type-post","status-publish","format-standard","hentry","category-technical-problems","tag-javascript","tag-prototype","tag-scaling"],"_links":{"self":[{"href":"https:\/\/blog.soton.ac.uk\/tag4fun\/wp-json\/wp\/v2\/posts\/100","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.soton.ac.uk\/tag4fun\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.soton.ac.uk\/tag4fun\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.soton.ac.uk\/tag4fun\/wp-json\/wp\/v2\/users\/159"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.soton.ac.uk\/tag4fun\/wp-json\/wp\/v2\/comments?post=100"}],"version-history":[{"count":5,"href":"https:\/\/blog.soton.ac.uk\/tag4fun\/wp-json\/wp\/v2\/posts\/100\/revisions"}],"predecessor-version":[{"id":507,"href":"https:\/\/blog.soton.ac.uk\/tag4fun\/wp-json\/wp\/v2\/posts\/100\/revisions\/507"}],"wp:attachment":[{"href":"https:\/\/blog.soton.ac.uk\/tag4fun\/wp-json\/wp\/v2\/media?parent=100"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.soton.ac.uk\/tag4fun\/wp-json\/wp\/v2\/categories?post=100"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.soton.ac.uk\/tag4fun\/wp-json\/wp\/v2\/tags?post=100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}