Wanted/idea: responsive images plugin

[blazejs]

Hello

I'm GS user for ca. 2 years now. But there's one thing I miss. You know guys about new trend for responsive design. I have tried to make a few sites recently that use responsive design but there're always some troubles with images inside pages. And I don't mean website design but all that images that need to be inserted inside content, where you don't know how big these can be. It's hard to handle with CSS, so some kind of plugin would be great help for all of us that have to handle responsive websites nowadays.
How could it work? I think that the best solution would be generating some sizes of any uploaded image depending on rules set by user (depending on media-queries). Let's say I have a media-query for screen size 1280 and above that is default set. This would be 100% size. Then I have a media query for 1024 px screen size and for that I need just 75% of default image size. And so on, smaller for 768, 480, 320... I just wander how to check out which version is required so there should be some kind of resolution check out.
I'm not a programmer - this is just an idea for what many of us - designers would find very helpful, for your consideration.

Is that possible to implement?

[eatons]

There's a jQuery plug-in That should help you out until all the browsers of the world do it for you. http://jquerypicture.com

[blazejs]

I think I have seen it somewhere. Problem is that GS has built in CKEditor that inserts images as <img> while this one uses <figure>. So this would be too tricky for an end user to insert image that way. For most of them learning how to use CMS is a challenge itself

[eatons]

There is a plug-in for CKEditor called 'Div Container Manager' That allows you to create a division set up and styled the way you want. there is a copy of it inside the CK editor plug-ins folder called DIV; inside the admin/template/js/ folder.

The code to use with JQuery picture:

Code:

<figure class="responsive" data-media="assets/images/small.png" data-media440="assets/images/medium.png" data-media600="assets/images/large.png" title="A Half Brained Idea">
    <noscript>
        <img src="/images/image.png" alt="Image description">
    </noscript>
</figure>

as you see it uses the img src setup.

[shawn_a]

I don't get it, if it's jquery the. Why can it not just replace the img with figure or whatever the hell it does.

[eatons]

Shawn_a, I spent some time looking into finding a better solution to the responsive images situation and I think I have found it.

http://adaptive-images.com

It doesn't require any change to our current img set up.
It uses the htaccess file to control the use of the 'adaptive_images.PHP' file.

I would appreciate it if you would look it over. I am sure there are going to be a couple gotchas.

I just downloaded it and I'm going to try it on a local host version of GS. over this weekend.

[eatons]

blazejs & shawn_a,
My lunch date canceled today, so I put those two hours to good use.
it turned out to go faster than I thought, there was no need to involve GS in the process at all, other than what I have described below.

Download the adaptive-images.php file from:
http://adaptive-images.com

Place that file in the main directory that holds your GS;
Create a writable folder called 'ai-cache';
In your htaccess file paste the following code below your existing code.

Code:

# START Adaptive-Images
# Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:
RewriteCond %{REQUEST_URI} !/admin/
RewriteCond %{REQUEST_URI} !/theme/
RewriteCond %{REQUEST_URI} !/plugins/
RewriteCond %{REQUEST_URI} !ai-cache

# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories
# to adaptive-images.php so we can select appropriately sized versions
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
# END Adaptive-Images

In the header file of all your theme templates paste the following script at the very top. Make sure that its path is equal to your site.

Code:

<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/eatonsnetwork/';</script>

Add the correct path to the cache folder in the config portion of the 'adaptive-images.php' file, ... in my case: "eatonsnetwork/ai-cache".

You should read over the instruction file for complete information, but basically the default settings in the config may be all you need.

I tried it on my desktop 27 inch monitor, and both the iOS iPad and iPhone simulators and it works quite well.
Hope it goes well for you!

[shawn_a]

Very smart. Thanks for that.

I was thinking we could do the same thing by generating standard sized thumbnails for all images instead of just one thumb. Then some how funnel alll images through a similar script.

Maybe like 5 different sizes, you can pass anything you want to thumbs.php to resize it. But you have to be authenticated for security reasons.

[blazejs]

I have tried Adaptive Images some time ago but this wasn't something I was looking for. I think it works quite good for big images. But imagine - I have a content container that is e.g. 600 px width for desktop version. And I can't figure out what picture someone can insert there. That might be 600 px width but might be 450 px what would be too much for 320 px width screen (and even for 480 if we count margins). I was trying to downscale images with css but that also isn't working as I'd wish to (there must be added a class to image and someone could forget that). Problem is in inline images inside text that are usually also floated.
There's quite nice but not perfect solution in WordPress using build in thumbnails and is_mobile function.
I think I'll give a chance to that CKEditor plugin when I have some free time and I'll let you know.
Thank you anyway

[eatons]

I have a content container that is e.g. 600 px width for desktop version.

'Adaptive Images' is/are designed for 'responsive websites', which by their nature are fluid and use percentages and almost never use pixel-based restrictions.
There are of course exceptions, but these would still be within the context of a fluid webpage.

When pixels references are used, it's for the window size of the display.

Code:

Example: HTML5 Page Head
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />
<link rel="stylesheet" media="only screen and (min-width:1025px) and (max-width:2500px)"  href="css/screen_layout_largest.css" />
<link rel="stylesheet" media="only screen and (min-width:769px) and (max-width:1024px)"  href="css/screen_layout_large.css" />
<link rel="stylesheet" media="only screen and (min-width:481px) and (max-width:768px)"  href="css/screen_layout_medium.css">
<link rel="stylesheet" media="only screen and (min-width:50px) and (max-width:480px)"   href="css/screen_layout_small.css">

[shawn_a]

Actually responsive in modern terms means media queries and mutiple viewports.
No one really strictly uses fluid anymore, i mean they switch to fluid at certain sizes, but that is not necessarily a tenet of it.

see http://responsejs.com/

[eatons]

To-mate-os - to-ma-toes
By fluid, in this case, I'm referring to the ability of any page to change state depending on its viewport. One of the considerations of being able to do this, is to place the least amount of restriction on any one stylesheet and/or the media components within the website. I find that using percent based units tends to make life a little easier.

[blazejs]

Unfortunately it's not always possible to design a site real fluid. I've been in business for 14 years. I have seen lots of trends in design, and I have to say that current trend is very boring. Here in Poland clients overvalue design (almost nobody cares about code), so you have to match their taste to get work Have you noticed that websites from Eastern Europe are very different visually to rest of the World? I'm glad at least Flash is disappearing..

[WebDevandPhoto]

There's already a responsive theme made with bootstrap right now for GetSimple.
I'm making one with Foundation 3 framework right now.
For resizing images, videos, and text dynamically besides using media queries in css you can use some of the many jQuery scripts out there to accomplish this.

@blazejs
I'm right there with yea rejoicing over the demise of flash in web design.