sharks

get started

concepts

features

syntax

 

monkeys

intro

mods

REST API

 

platypuses

github

blueprints

tickets

 

everyone

support

ideas

contact

license

 

 
 

support on-demand image sizing

help edit space_dashboard

Ticket

+tags
+commit
 

+issues

help edit space_dashboard

the default image sizes don't suffice in some cases.  although there are currently workarounds that involve browser resizing (described in example section), multiple wagneers have requested support for automatic server-side resizing.

 

+solution

help edit space_dashboard

inclusion syntax already accepts a "size" argument.  In addition to the current named sizes (icon, small, medium, etc), we should also support explicit sizes using some variant of Image Magick resize args.

 

So to resize an image to 100px by 100px, you might do

{{myimage|size:100x100}}

 

+example

help edit space_dashboard

currently, if you want to use browser resizing, you have to add something like this to your CSS:

.TYPE-image .content img { max-width: 100% }

and then do this in your inclusion syntax:

{{myimage | size:large; width:300px}}

The preferred solution is described in the solution section.

 

help edit space_dashboard

What if your design requires sizing by something other than pixels?

--John Abbe.....2013-09-12 21:15:28 +0000

then you should use CSS / browser resizing. We can't store a different copy on the server for every tiny size variant that might be needed in relative sizing.

--Ethan McCutchen.....2013-09-12 21:59:45 +0000

I'm confused. I was assuming this ticket was about dynamically sizing to the dimensions given. You're thinking to store versions that are 100x100 and a few other fixed dimensions?

--John Abbe.....2013-09-13 06:40:34 +0000

if you need one that's 123x123, then we'd generate that one, store it, and provide it. there's no way you would want to resize images dynamically on the server with any frequency - just once per size.

 

My point was that if you want to specify the image in % or some other relative form, then that's the browser's job. maybe I'm not understanding the question?

--Ethan McCutchen.....2013-09-13 06:52:51 +0000

No, that was the question, and I think having the CSS/browser size it makes sense. (CSS question: That would typically be by putting a width on the surrounding block-type tag, or ?)

--John Abbe.....2013-09-13 18:48:26 +0000

Generally, the image resizing only happens when the css applies to the image tag itself. My preferred solution is to create a rule on img that sets max-width to 100%, which then makes it so that you can constrain the container (eg in inclusion syntax) and that will be inherited.

 

I'm actually going to be working on related docs soon. Will try to remember to link.

--Ethan McCutchen.....2013-09-13 22:08:00 +0000

the example above actually documents this.

--Ethan McCutchen.....2013-09-13 22:22:37 +0000