Responsive Design and WYSIWYG Images

Do something cool with CMS? Show us ...
This board is for 'Answers', and the discussion of answers... Not for questions.
Locked
applejack
Power Poster
Power Poster
Posts: 1015
Joined: Fri Mar 30, 2007 2:28 am
Location: London

Responsive Design and WYSIWYG Images

Post by applejack »

For responsive design having fixed width and height in the img tag is an issue so to remove the width and height you can use the code below.

Code: Select all

{content block='image' assign='myimage'}
{$myimage|regex_replace:"/[\"]+[\S\D]+/":''}
uniqu3

Re: Responsive Design and WYSIWYG Images

Post by uniqu3 »

Isn't it much easier to simply use max-width?
Removing width and height, is slowing down browser to actually render the page.

Code: Select all

img {
    max-width: 100%;
}
So image would never exceed width of parent element and scale as needed.
applejack
Power Poster
Power Poster
Posts: 1015
Joined: Fri Mar 30, 2007 2:28 am
Location: London

Re: Responsive Design and WYSIWYG Images

Post by applejack »

max-width doesn't have full browser support.
uniqu3

Re: Responsive Design and WYSIWYG Images

Post by uniqu3 »

and media queries to which well are usually used for repsonsive layout.
Except you are talking about fluid layout.
applejack
Power Poster
Power Poster
Posts: 1015
Joined: Fri Mar 30, 2007 2:28 am
Location: London

Re: Responsive Design and WYSIWYG Images

Post by applejack »

True and as they say there are more ways than one to skin a cat which is especially true of front end coding these days...

I just came across this http://code.google.com/p/css3-mediaqueries-js/

width: auto\9; /* ie8 */

Nice work on the new admin theme by the way. Apart from I don't think the fixed width font for the textarea edit boxes work as it makes certain characters especially {} and () hard to distinguish. Or maybe it's been too long since my last eye test ;-)
carasmo
Power Poster
Power Poster
Posts: 506
Joined: Thu Feb 08, 2007 6:11 pm
Location: Florida

Re: Responsive Design and WYSIWYG Images

Post by carasmo »

I use that rather than modernizer.

I make all "responsive" sites fluid because there's every size under the sun and your site should look good between the sizes. I just remove the image width and height and use max-width for inline and 100% for wide stuff. I test all the way back to ie 8 and it works fine.
applejack
Power Poster
Power Poster
Posts: 1015
Joined: Fri Mar 30, 2007 2:28 am
Location: London

Re: Responsive Design and WYSIWYG Images

Post by applejack »

Unfortunately for what I do just going back to IE 8 is not far enough. IE 7 still has quite a large usage and on one of my main clients sites so does IE 6.
faglork

Re: Responsive Design and WYSIWYG Images

Post by faglork »

applejack wrote:Unfortunately for what I do just going back to IE 8 is not far enough. IE 7 still has quite a large usage and on one of my main clients sites so does IE 6.
http://code.google.com/p/ie7-js/

Have you tried that?

Cheers,
Alex
applejack
Power Poster
Power Poster
Posts: 1015
Joined: Fri Mar 30, 2007 2:28 am
Location: London

Re: Responsive Design and WYSIWYG Images

Post by applejack »

No I haven't thanks.

I have used this before though http://css3pie.com
carasmo
Power Poster
Power Poster
Posts: 506
Joined: Thu Feb 08, 2007 6:11 pm
Location: Florida

Re: Responsive Design and WYSIWYG Images

Post by carasmo »

You can make it work in IE 7 and 6 just copy out the desktop css portion of your media queries to another css file for IE and attach them conditionally. However, you might find a script that works in ie 8 and higher that is responsive (like a slider) and it won't work in IE 6 and 7

With head.js http://headjs.com/

Just load that script for all but the old browser, and then serve up other js to ie or nothing to them and hide the html, it's less mess than Downlevel Reveal Conditional Comments.

http://msdn.microsoft.com/en-us/library ... dlrevealed
Locked

Return to “Tips and Tricks”