• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic This topic is locked, you cannot edit posts or make further replies.  [ 10 posts ] 
Author Message
 Post subject: Responsive Design and WYSIWYG Images
PostPosted: Wed Aug 01, 2012 2:37 pm 
Offline
Power Poster
Power Poster

Joined: Fri Mar 30, 2007 2:28 am
Posts: 1015
Location: London
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.

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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive Design and WYSIWYG Images
PostPosted: Wed Aug 01, 2012 8:46 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Aug 12, 2008 9:30 pm
Posts: 2071
Location: Feldkirchen in Kärnten, Austria
Isn't it much easier to simply use max-width?
Removing width and height, is slowing down browser to actually render the page.

\$1:
img {
    max-width: 100%;
}


So image would never exceed width of parent element and scale as needed.

_________________
CMSMS Blog - I do this!
Forge profile
Github profile
Twitter
=============================================
Support CMSMS


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive Design and WYSIWYG Images
PostPosted: Wed Aug 01, 2012 9:21 pm 
Offline
Power Poster
Power Poster

Joined: Fri Mar 30, 2007 2:28 am
Posts: 1015
Location: London
max-width doesn't have full browser support.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive Design and WYSIWYG Images
PostPosted: Wed Aug 01, 2012 9:24 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Aug 12, 2008 9:30 pm
Posts: 2071
Location: Feldkirchen in Kärnten, Austria
and media queries to which well are usually used for repsonsive layout.
Except you are talking about fluid layout.

_________________
CMSMS Blog - I do this!
Forge profile
Github profile
Twitter
=============================================
Support CMSMS


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive Design and WYSIWYG Images
PostPosted: Thu Aug 02, 2012 12:27 am 
Offline
Power Poster
Power Poster

Joined: Fri Mar 30, 2007 2:28 am
Posts: 1015
Location: London
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 ;-)


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive Design and WYSIWYG Images
PostPosted: Fri Aug 03, 2012 1:02 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Feb 08, 2007 6:11 pm
Posts: 506
Location: Florida
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive Design and WYSIWYG Images
PostPosted: Fri Aug 03, 2012 1:36 am 
Offline
Power Poster
Power Poster

Joined: Fri Mar 30, 2007 2:28 am
Posts: 1015
Location: London
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive Design and WYSIWYG Images
PostPosted: Fri Aug 03, 2012 1:33 pm 
Offline
Power Poster
Power Poster

Joined: Fri Mar 03, 2006 1:32 pm
Posts: 610
applejack \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.


http://code.google.com/p/ie7-js/

Have you tried that?

Cheers,
Alex


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive Design and WYSIWYG Images
PostPosted: Fri Aug 03, 2012 1:40 pm 
Offline
Power Poster
Power Poster

Joined: Fri Mar 30, 2007 2:28 am
Posts: 1015
Location: London
No I haven't thanks.

I have used this before though http://css3pie.com


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Responsive Design and WYSIWYG Images
PostPosted: Fri Aug 03, 2012 4:28 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Feb 08, 2007 6:11 pm
Posts: 506
Location: Florida
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/ms537512(VS.85).aspx#dlrevealed


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic This topic is locked, you cannot edit posts or make further replies.  [ 10 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Hosting Nation - Managed CMSMS Hosting