# HG changeset patch # User Sylvain Thénault # Date 1279709181 -7200 # Node ID d17d3b34bc12d26b717f6c051c9ed7ca275d4b7d # Parent 5fbc1c4c13ffd91de9c037d5d7c96aea5bcca5bd [image] more handy image resizing using javascript diff -r 5fbc1c4c13ff -r d17d3b34bc12 web/data/cubicweb.css --- a/web/data/cubicweb.css Wed Jul 21 12:42:18 2010 +0200 +++ b/web/data/cubicweb.css Wed Jul 21 12:46:21 2010 +0200 @@ -117,11 +117,6 @@ border: none; } -img.contentimage { - width: 100%; - height: 100%; -} - fieldset { border: none; } diff -r 5fbc1c4c13ff -r d17d3b34bc12 web/data/cubicweb.image.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/web/data/cubicweb.image.js Wed Jul 21 12:46:21 2010 +0200 @@ -0,0 +1,28 @@ + +jQuery.fn.autoResize = function() { + // remove enforced with / height (by CSS and/or HTML attributes) + this.css("width", "auto").css("height", "auto"); + this.removeAttr("width").removeAttr("height"); // Remove + // compute image size / max allowed size to fit screen + var imgHSize = this.width(); + var maxHSize = $(window).width() - ($(document).width() - imgHSize); + var imgVSize = this.height(); + var maxVSize = $(window).height() - ($(document).height() - imgVSize); + if (maxHSize > 0 && maxVSize > 0) { + // if image don't fit screen, set width or height so that + // browser keep img ratio, ensuring the other dimension will + // also fit the screen + if (imgHSize > maxHSize && ((maxHSize / maxVSize) * imgVSize) < maxVSize) { + this.css("width", maxHSize); + } else if (imgVSize > maxVSize && ((maxVSize / maxHSize) * imgHSize) < maxHSize) { + this.css("height", maxVSize); + } // else image already fit in screen, don't scale it up + } else { + // XXX can't fit image, don't do anything + } +}; + + +$(document).ready(function() { + $("img.contentimage").load(function() {$(this).autoResize()}); + }); diff -r 5fbc1c4c13ff -r d17d3b34bc12 web/views/idownloadable.py --- a/web/views/idownloadable.py Wed Jul 21 12:42:18 2010 +0200 +++ b/web/views/idownloadable.py Wed Jul 21 12:46:21 2010 +0200 @@ -118,6 +118,7 @@ adapter = entity.cw_adapt_to('IDownloadable') contenttype = adapter.download_content_type() if contenttype.startswith('image/'): + self._cw.add_js('cubicweb.image.js') self.wview('image', entity.cw_rset, row=entity.cw_row, col=entity.cw_col, link=True, klass='contentimage') else: @@ -160,11 +161,11 @@ title = _('image') - def call(self): + def call(self, **kwargs): rset = self.cw_rset for i in xrange(len(rset)): self.w(u'
') - self.wview(self.__regid__, rset, row=i, col=0) + self.wview(self.__regid__, rset, row=i, col=0, **kwargs) self.w(u'
') def cell_call(self, row, col, link=False, **kwargs):