How to strip my inline styles for flexible images
Permalink 1 user found helpful
Howdy good peoples,
I have some CSS that is getting overwritten from the inline styles that are produced when you insert an image block/content block (with image).
My question is where can I find the php that outputs these inline styles exactly? I'm trying to delete the inline width and height values for images.
I have been pouring over these forums for hours now and still can't find anything. If there is a link already can you please direct this newbie? Cheers!
I have some CSS that is getting overwritten from the inline styles that are produced when you insert an image block/content block (with image).
My question is where can I find the php that outputs these inline styles exactly? I'm trying to delete the inline width and height values for images.
I have been pouring over these forums for hours now and still can't find anything. If there is a link already can you please direct this newbie? Cheers!
copy /concrete/blocks/<blockname> to /blocks and edit the view.php
Hi Mnkras,
Thank you for replying. I followed your advice and understand it so that I won't be editing the core files of course, however I'm still looking for what code in particular controls the output for the image size when a user doesn't declare anything for the max width/height property. If I upload an 800px size image and don't declare it in the max width or height, it shows up on my web page with the width="800" height="800" attributes as inline styles applied to the image. I need to either delete this output value or modify it.
Thank you for your help! Let me know if anyone needs any more information, thank you!
Monte
Thank you for replying. I followed your advice and understand it so that I won't be editing the core files of course, however I'm still looking for what code in particular controls the output for the image size when a user doesn't declare anything for the max width/height property. If I upload an 800px size image and don't declare it in the max width or height, it shows up on my web page with the width="800" height="800" attributes as inline styles applied to the image. I need to either delete this output value or modify it.
Thank you for your help! Let me know if anyone needs any more information, thank you!
Monte
Hello, are you trying to resize the images with css, instead of using a proper thumbnail?
If so, ySlow will probably have a fit. :-)
However, you could override those dimensions by appending !important to your styles that you want to override. It's supported by
Internet Explorer 8.0
Mozilla Firefox 2 and 3
Opera 9
Apple Safari, and
Google Chrome.
The answer to your question though, for the image block, is this.
Open the controller.php file for the image block:
That should do it for the image block.
For the content block, I don't know for sure, but probably if you messed around with line 143 in the controller.php
you might get it to where you want.
If so, ySlow will probably have a fit. :-)
However, you could override those dimensions by appending !important to your styles that you want to override. It's supported by
Internet Explorer 8.0
Mozilla Firefox 2 and 3
Opera 9
Apple Safari, and
Google Chrome.
The answer to your question though, for the image block, is this.
Open the controller.php file for the image block:
//replace this (line 72) $img = "<img border=\"0\" class=\"ccm-image-block\" alt=\"{$this->altText}\" src=\"{$relPath}\" {$sizeStr} "; //with this $img = "<img border=\"0\" class=\"ccm-image-block\" alt=\"{$this->altText}\" src=\"{$relPath}\"";
That should do it for the image block.
For the content block, I don't know for sure, but probably if you messed around with line 143 in the controller.php
$thumb = $imgHelper->getThumbnail($file, $maxWidth, $maxHeight);
you might get it to where you want.
Hi Boomgraphics!
Thank you for your reply, this is 90% of my fix. I was able to edit the controller.php file and it pulled the width and height attributes from the inline styles. Although this is a pseudo fix for my needs, I'd really just like to change the output of those inline styles. In other words if a user adds 100 for the width when putting in an image, then the inline styles it produces is width:100px; height:100px; I would really like to be able to have this expressed in percentages (I'm building this site as a Responsive Web Design prototype). Although what you have written does work for my testing purposes, there must be a way to edit the HTML that gets printed from the php script - right?
Thanks again everyone for their help. I'm sure I'm not the only one with this question, especially after Ethan Marcotte's book.
Thank you for your reply, this is 90% of my fix. I was able to edit the controller.php file and it pulled the width and height attributes from the inline styles. Although this is a pseudo fix for my needs, I'd really just like to change the output of those inline styles. In other words if a user adds 100 for the width when putting in an image, then the inline styles it produces is width:100px; height:100px; I would really like to be able to have this expressed in percentages (I'm building this site as a Responsive Web Design prototype). Although what you have written does work for my testing purposes, there must be a way to edit the HTML that gets printed from the php script - right?
Thanks again everyone for their help. I'm sure I'm not the only one with this question, especially after Ethan Marcotte's book.
It uses the image helper to make the actual HTML I believe, so you might need to edit a core file somewhere. I have seen blocks that calculate the width or height if one or the other is entered, but I haven't looked at the code. I think the highslide image gallery block does this, but I can't remember off the top of my head.
Sorry I can't help further. :-(
Sorry I can't help further. :-(
Alright, I couldn't go to sleep because I love regex so much. :-D
Here is a function to replace any height or width that has the value 100 or 100px with a percentage.
The idea is to put the variable that is in the img tag through my function, and it will replace only 100 or 100px values with 100%. If you are familiar with PHP at all you should be able to get this working, but I haven't tested it. I do know the regex works, but sometimes regex needs tweaking for php. I need to sleep. :-D
Here is a function to replace any height or width that has the value 100 or 100px with a percentage.
function replace100($value){ $replaced = preg_replace('/(?<=width=("|\')|height=("|\'))(\s*1\s*0\s*0\s*(p\s*x\s*)?)/', '100%', $value); echo $replaced; }
The idea is to put the variable that is in the img tag through my function, and it will replace only 100 or 100px values with 100%. If you are familiar with PHP at all you should be able to get this working, but I haven't tested it. I do know the regex works, but sometimes regex needs tweaking for php. I need to sleep. :-D
Oooh, you're a champion.
I'll give this a go and let you know. Hope you're asleep by now. Thanks for the help - really apppreciate it. I'll work with this later today (I'm in Holland) and get back to you. You rock.
M
I'll give this a go and let you know. Hope you're asleep by now. Thanks for the help - really apppreciate it. I'll work with this later today (I'm in Holland) and get back to you. You rock.
M
Well I gave it my best shot. I'm well new to the C5 thing but I like it so far. If this was Wordpress I'd know where to put that handy bit of code you wrote. (Thanks for that!) However I'll keep at it and see if I can stumble upon where to place it. Until then I'll stick with the 90% fix for now and hope to learn more about it. If I find any info I'll of course post it back here. Thanks for the help peoples, if anyone still has some thoughts I'm keeping this open.
Cheers for everything!
Cheers for everything!
No worries, I'll figure it out and post back here. I've been busy all day so I haven't had a chance to start up my Mac. I need to rewrite the function anyways, because I realized that it should also delete the height attribute when it changes the width to a percentage. Note that I haven't got a clue about the content block. Those width and height variables in the content block might have style attributes in them, but I don't know for sure. Maybe it would be best to parse the whole page for img tags. I'm not getting into that though, lol.
Hello again. I have done something I haven't done before. I made a block! :-D
I have modified the default image block to add a new field called 'minWidth'. If you don't use the new field, the block will behave the same as the old block. If you DO input a value into the minWidth field, it will replace the default height and width attributes with a single width style (style="min-width:xxx%"). This allows you to separately create the image thumbnail, or leave the width and height fields blank and it will link to the full sized image. It also works with the mouseover options.
I have attached the block to my post.
Do what you want with the code. :-)
EDIT: It doesn't seem to work with mouseovers. Oh well. Just don't use a mouseover. :-)
I have modified the default image block to add a new field called 'minWidth'. If you don't use the new field, the block will behave the same as the old block. If you DO input a value into the minWidth field, it will replace the default height and width attributes with a single width style (style="min-width:xxx%"). This allows you to separately create the image thumbnail, or leave the width and height fields blank and it will link to the full sized image. It also works with the mouseover options.
I have attached the block to my post.
Do what you want with the code. :-)
EDIT: It doesn't seem to work with mouseovers. Oh well. Just don't use a mouseover. :-)
Ah, it looks like A List Apart is using the regular width style, instead of min-width.
http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexib...
To change it in my new block, go into this function (in the controller):
and change all the min-width's to regular width styles.
This Responsive Web Design is something I haven't ever heard about before now. Sounds like an interesting concept. Good luck!
http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexib...
To change it in my new block, go into this function (in the controller):
function getContentAndGenerate($align = false, $style = false, $id = null) {
and change all the min-width's to regular width styles.
This Responsive Web Design is something I haven't ever heard about before now. Sounds like an interesting concept. Good luck!
Here is a new version. Has max-width instead of min-width. Note that some IE versions don't know what max-width is, but I don't usually give a rat's ass what IE does anymore. :-)
Post back to this forum if you figure out what you did wrong to get that error. I'd like to know so I don't go and do it myself, lol.
Post back to this forum if you figure out what you did wrong to get that error. I'd like to know so I don't go and do it myself, lol.
Oh that was a tricky bastard. I didn't realize that the folder need to be named a certain way, and the uppercase and lowercase words in the controller also were tricky. So I fixed the issue, here is an update. Make sure to delete the other database table from phpAdmin, and also clear your cache again. The reason I didn't catch that error sooner was because I had cache disabled for my dev environment.
That was the ticket! Nice work Boomgraphics - I was able to get it implemented and it seems to function as hoped for. I'll kick the tires later and post details tomorrow morning - must need sleep now.
So yeah, what a workaround from the original question :) This is such a cool addition. Rock Horns from Holland!
So yeah, what a workaround from the original question :) This is such a cool addition. Rock Horns from Holland!
I was thinking, would it be better if I just made the maxWidthPercentage field into a checkbox?
I can't think of a reason you would use a percentage other than 100% since you do have the ability to create the thumbnail on the fly to fit the column it's in. As it is now, there is the possibility of entering a percentage larger than 100%, which probably isn't a good thing. Let me know after you get some sleep. :-)
I can't think of a reason you would use a percentage other than 100% since you do have the ability to create the thumbnail on the fly to fit the column it's in. As it is now, there is the possibility of entering a percentage larger than 100%, which probably isn't a good thing. Let me know after you get some sleep. :-)
Well Good Morning everyone,
I wanted to wrap up this thread and post the solutions that have been discovered so far. After I finished reading the book that [Ethan Marcotte](http://www.abookapart.com/products/responsive-web-design) has written recently it quickly became a game changer for my web design tools. This post started as a hopeful quick question about where I would be able to strip out the inline styles created by C5 in order to integrate a Responsive Web Design approach into the Concrete5 framework. Being brand new to Concrete5 and it's possibilities I started this thread to find out the best approach for this. I am indebted to Boomgraphics for his help and especially with the custom block he had created to test with. As of last night I am calling my question answered.
I do agree with Brian about changing the Max-Width property to include a checkbox instead of putting in the 100% value as this could confuse others. That said, the custom block works very well. I'm sure we can implement and improve upon this if anyone is else is interested.
There were a few early responses that seemed like they would be able to work (using a !important style to override the inline styles) however for whatever reason I couldn't get that to work correctly. This I attribute to my lack of experience so far with C5.
Regarding certain versions of IE not being able to recognize the <code>img:100%;</code> property, there are some pretty robust workarounds for [flexible images](http://unstoppablerobotninja.com/entry/a-book-called-responsive-web-design/), however if anyone is interested there are two approaches that work flawlessly for me so far and I have tested it in IE from IE9-6. At this point it seems as if IE8 & 9 support the max-width:100%; property with the only exceptions of IE 7 & 6. To combat this I created a conditional statement that targeted IE7 & 6 and changed the <code>max-width:100%;</code> property to this: <code>img: width:100%;</code> and it worked as expected. There are of course some things to consider in this approach but that is beyond the scope of this quick post. For a truly stellar approach to this, I really recommend [Ethan's blog post](http://unstoppablerobotninja.com/entry/a-book-called-responsive-web-design/) on flexible images and incorporating it into IE.
Now, that all said, I am looking forward to using C5 more and more. I love Wordpress and have been designing custom WP themes for some of my friends in the past, and although very powerful I believe Concrete5 may address different needs where WP fell short.
A big thank you to all who posted their thoughts on this. I'll continue to monitor this thread and see if anyone has other ideas or questions.
Thanks you guys, this forum rocks.
Peas - m
I wanted to wrap up this thread and post the solutions that have been discovered so far. After I finished reading the book that [Ethan Marcotte](http://www.abookapart.com/products/responsive-web-design) has written recently it quickly became a game changer for my web design tools. This post started as a hopeful quick question about where I would be able to strip out the inline styles created by C5 in order to integrate a Responsive Web Design approach into the Concrete5 framework. Being brand new to Concrete5 and it's possibilities I started this thread to find out the best approach for this. I am indebted to Boomgraphics for his help and especially with the custom block he had created to test with. As of last night I am calling my question answered.
I do agree with Brian about changing the Max-Width property to include a checkbox instead of putting in the 100% value as this could confuse others. That said, the custom block works very well. I'm sure we can implement and improve upon this if anyone is else is interested.
There were a few early responses that seemed like they would be able to work (using a !important style to override the inline styles) however for whatever reason I couldn't get that to work correctly. This I attribute to my lack of experience so far with C5.
Regarding certain versions of IE not being able to recognize the <code>img:100%;</code> property, there are some pretty robust workarounds for [flexible images](http://unstoppablerobotninja.com/entry/a-book-called-responsive-web-design/), however if anyone is interested there are two approaches that work flawlessly for me so far and I have tested it in IE from IE9-6. At this point it seems as if IE8 & 9 support the max-width:100%; property with the only exceptions of IE 7 & 6. To combat this I created a conditional statement that targeted IE7 & 6 and changed the <code>max-width:100%;</code> property to this: <code>img: width:100%;</code> and it worked as expected. There are of course some things to consider in this approach but that is beyond the scope of this quick post. For a truly stellar approach to this, I really recommend [Ethan's blog post](http://unstoppablerobotninja.com/entry/a-book-called-responsive-web-design/) on flexible images and incorporating it into IE.
Now, that all said, I am looking forward to using C5 more and more. I love Wordpress and have been designing custom WP themes for some of my friends in the past, and although very powerful I believe Concrete5 may address different needs where WP fell short.
A big thank you to all who posted their thoughts on this. I'll continue to monitor this thread and see if anyone has other ideas or questions.
Thanks you guys, this forum rocks.
Peas - m
I have this working on one of my sites in versions of Concrete5 previous to 5.5, but when trying to install this block on a site with Concrete5.5, the block doesn't seem to show up in the add functionality area.
Any ideas what I'm doing wrong?
Any ideas what I'm doing wrong?
