[Pro] Remove image inline size?

Freeway
1

Does anyone know how to remove the width and height attributes from the image tag?

I’ve recently discovered that percentage sizes for images are no longer allowed in html5. Browsers still support them, but their use in html5 is discouraged.

The W3C validator throws a fit over them…

<img src="Resources/logo.jpg" width="100%" height="100%" alt="logo image" style="vertical-align:baseline"/>

Some of the discussion indicates that percentage image sizes are okay if handled by CSS. This is complicated by the way Freeway Pro inserts the width/height attribute into the image tag – css can’t over-ride that position.

I can sort-of get CSS to apply the width/height values by using the extended item of the image by introducing empty values to those attributes…

<img src="Resources/logo.jpg" width="" height="" alt="logo image" style="vertical-align:baseline"/>

This, however still causes fits for the W3C validator – for having empty attributes. I can’t blame it for those sentiments, as I agree.

Removing the width/height attributes from the image tag restores html5 validity. Any ideas how I could do this?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Hi Ernie,

Try selecting your image and using the Extend dialog to override the width and height by adding both attributes with no value. Just for completeness’ sake (in case anyone else is looking to do this) you should select the IMG tab in the Extended dialog.

The !important CSS flag should override the HTML attributes. Though, that won’t solve your validation errors :frowning:

Joe

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Thanks, Joe. I already worked that one out, and yes it throws the
validation off.

–
Ernie Simpson

On Thu, Aug 23, 2012 at 2:22 PM, Joe Billings email@hidden wrote:

Hi Ernie,

Try selecting your image and using the Extend dialog to override the width
and height by adding both attributes with no value. Just for completeness’
sake (in case anyone else is looking to do this) you should select the IMG
tab in the Extended dialog.

The !important CSS flag should override the HTML attributes. Though, that
won’t solve your validation errors :frowning:

Joe

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

I also tried adding width and height percentages as inline styles,
which appear after the inline width/height attributes.

<img src="Resources/logo.jpg" width="290" height="290" alt="logo"

style=“width: 100%; height: 100%;” style=“vertical-align:baseline”/>

This works, but at the cost of an extra inline “style” declaration -
which is bad code and upsets the validator as well.

–
Ernie Simpson

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Ernie, if you apply my RemoveDimensions Action to the image (note – this will only work on an inline image, not a drawn layer image) then you can remove the width and height attributes altogether. And what validator is throwing an issue with inline style declarations? They’re still very much alive and valid in HTML5 last I heard.

Walter

On Aug 23, 2012, at 4:59 PM, Ernie Simpson wrote:

I also tried adding width and height percentages as inline styles,
which appear after the inline width/height attributes.

logo

This works, but at the cost of an extra inline “style” declaration -
which is bad code and upsets the validator as well.

–
Ernie Simpson

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Thanks Walter - I had tried your action earlier (v0.3) and got no effect at
all, even though my images are inserted inline into html items.

The page I am working on is here: thebigerns.com

I have been using the W3C Validator with the “experimental” HTML5
Conformance Checker at http://validator.w3.org

UPDATE: I had made a CSS style to handle the image width/height while
attempting to undo the inline width/height attribute. It appears the
browser is applying the css stylesheet rule ahead of the inline img
attribute – which I cannot explain. Unless browsers now give css preference
over inline element attributes. I’ve checked the page in IE8, IE9, Win
Firefox 11, Mac Firefox 11, Mac Safari 5.1 & 6, and Win Chrome 18 and they
all behave as I intended. The page now also passes validation.

–
Ernie Simpson

On Fri, Aug 24, 2012 at 8:49 AM, Walter Lee Davis email@hiddenwrote:

Ernie, if you apply my RemoveDimensions Action to the image (note – this
will only work on an inline image, not a drawn layer image) then you can
remove the width and height attributes altogether. And what validator is
throwing an issue with inline style declarations? They’re still very much
alive and valid in HTML5 last I heard.

Walter

On Aug 23, 2012, at 4:59 PM, Ernie Simpson wrote:

I also tried adding width and height percentages as inline styles,
which appear after the inline width/height attributes.

logo

This works, but at the cost of an extra inline “style” declaration -
which is bad code and upsets the validator as well.

–
Ernie Simpson

freewaytalk mailing list
email@hidden
Update your subscriptions at:
List Options | FreewayTalk

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Could you send me a copy of your Action, I need to compare it with what I have here, because mine is also marked as 0.3 and it works fine in this case.

Walter

On Aug 24, 2012, at 10:52 AM, Ernie Simpson wrote:

Thanks Walter - I had tried your action earlier (v0.3) and got no effect at
all, even though my images are inserted inline into html items.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

Hi Ernie
I have a really basic action that I use… its really really basic but it does work.
it removes the height, width and border items from a normal image.

Just apply it to a normal image and it will make this sort of thing:

<img src="Resources/myimagea.jpeg" border="0" width="324" height="317" alt="myimage" style="float:left"/>

into this:

 <img src="Resources/myimagea.jpeg" alt="myimage" style="float:left"/>

you can get it from here:

https://dl.dropbox.com/u/4274685/FileChute/IMG-Tag-HWB-Removal.fwaction.zip

If you wanted to go the whole hog
you could always use the Advance - inline style mover action to move the

style="float:left"

into the head as well.
If you did want to do that, then apply that action to the same image, add the tag you are looking for in the HTML Tag type field, which is the img tag, choose a class name you want to use e.g. falign and then check the check-box, Add STYLE back to HEAD so the style is written back into the head. The end result is this:

myimage

and in then head the style is written as this

.falign { float:left }

The advantage to this method is it allows you to use the same class on many images and avoids duplicate inline styles. This possible because you can apply the same action and add the same class name to every image on the page ( but not check the checkbox to write that style back to the head). That way every other image would use the same class and the style attribute is written only once into the head by the first image

All the best Max

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

Thanks Max, I will try your action and report back.

Walter and I have been corresponding off list, and his Remove Dimensions
action was being disabled by the Remove Paragraph Tags action that I had
applied to the image container divs.

I had made a CSS style to handle the image width/height while attempting to
undo the inline width/height attribute. It appears the browser is applying
the css stylesheet rule ahead of the inline img attribute – which I cannot
explain. I’ve checked the page in IE8, IE9, Win Firefox 11, Mac Firefox 11,
Mac Safari 5.1 & 6, and Win Chrome 18 and they all behave as I intended.
The page now also passes validation.

I am the happiest I’ve ever been about the code I am producing from FWP.

–
Ernie Simpson

On Sun, Aug 26, 2012 at 5:19 PM, max email@hidden wrote:

Hi Ernie
I have a really basic action that I use… its really really basic but
it does work.
it removes the height, width and border items from a normal image.

Just apply it to a normal image and it will make this sort of thing:

<img src="Resources/myimagea.jpeg" border="0" width="324" height="317"

alt=“myimage” style=“float:left”/>
into this:

 <img src="Resources/myimagea.jpeg" alt="myimage" style="float:left"/>

you can get it from here:

https://dl.dropbox.com/u/4274685/FileChute/IMG-Tag-HWB-Removal.fwaction.zip

If you wanted to go the whole hog
you could always use the Advance - inline style mover action to move
the

style="float:left"

into the head as well.
If you did want to do that, then apply that action to the same image, add
the tag you are looking for in the HTML Tag type field, which is the
img tag, choose a class name you want to use e.g. falign and then
check the check-box, Add STYLE back to HEAD so the style is written
back into the head. The end result is this:

myimage

and in then head the style is written as this

.falign { float:left }

The advantage to this method is it allows you to use the same class on
many images and avoids duplicate inline styles. This possible because you
can apply the same action and add the same class name to every image on the
page ( but not check the checkbox to write that style back to the head).
That way every other image would use the same class and the style attribute
is written only once into the head by the first image

All the best Max

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

Max, I can report that your action also does not work in conjunction with
the Remove Paragraph Tag action. Also, Advanced Inline Style Remover fails
to remove the inline img style when the Remove Paragraph Tag is applied to
it’s parent.

Apparently, however these actions work they require the img tag to be
wrapped in paragraph tags. I used the RPT action because I didn’t like
having p tags that enclosed no text items – I know, I’m fussy. Since the
css stylesheet seems to be over-riding the img width/height attributes -
and the html validates, I’m content for now.

http://portfolio.thebigerns.com/logos.html

–
Ernie Simpson

On Sun, Aug 26, 2012 at 5:57 PM, Ernie Simpson email@hidden wrote:

Thanks Max, I will try your action and report back.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

11

Ernie, you may be jumping the shark with the P removal. Whether you put a P around an image or not, browsers style the image as though it was surrounded by a default font size P tag. Removing the P does not remove the style that the P would have added, and makes it harder to get rid of the default line-height styling, since you no longer have a tag to target.

Walter

On Aug 26, 2012, at 7:07 PM, Ernie Simpson wrote:

I used the RPT action because I didn’t like
having p tags that enclosed no text items – I know, I’m fussy.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

12

Hi Ernie
It’s interesting the P tag removal effects the other actions… I am not so surprised though, as they are all gunning for the same area which is the inline styles, so it doesn’t come as a great surprise… its a bit like three of four people trying to get out of door at the same time!!! most get stuck :o)

I havent checked it out against other actions as I have only ever used it with my actions. So it came as no surprise that it failed to function as intended with other actions. As long as you and Walter have worked something out then that’s ideal.

All the best max

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

13

FW is really beginning to show its age.

Marcel

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

14

Walter, I’m not so sure that I buy into that argument, as I find the img
tag quite easily styled without needing p tags for style hooks. Googling
seems to find the internets fairly split on the issue of wrapping images in
p tags with no text, so I have no real incentive to embrace the practice.
Or disfavor it either, I suppose.

With the advent of the html5 figure element, and the subsequent figcaption
element, it seems to me even less relevant for p tags to hold images in
place without additional content. Though, I will admit that I am somewhat
swayed by the fact that the img tag is an inline-block element, so there
seems some relevance to having it identified within normal content – like a
paragraph.

Anyway, these are just my personal preferences – not really my causes. :slight_smile:

–
Ernie Simpson

On Sun, Aug 26, 2012 at 7:51 PM, Walter Lee Davis email@hiddenwrote:

Ernie, you may be jumping the shark with the P removal. Whether you put a
P around an image or not, browsers style the image as though it was
surrounded by a default font size P tag. Removing the P does not remove the
style that the P would have added, and makes it harder to get rid of the
default line-height styling, since you no longer have a tag to target.

Walter

On Aug 26, 2012, at 7:07 PM, Ernie Simpson wrote:

I used the RPT action because I didn’t like
having p tags that enclosed no text items – I know, I’m fussy.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

15

I tend not to wrap images in a p tag if hand-coding mainly because I’ve
not had a need to (yet), but when using a plugin RTE (such as in a CMS)
they all seem to default wrapping it in a p tag so I suppose I’ve become
accustomed to seeing it and accept it even if it’s not my preference,
though I don’t feel strongly either way.

Todd
http://xiiro.com

Ernie Simpson mailto:email@hidden
August 27, 2012 8:58 PM
Walter, I’m not so sure that I buy into that argument, as I find the img
tag quite easily styled without needing p tags for style hooks. Googling
seems to find the internets fairly split on the issue of wrapping
images in
p tags with no text, so I have no real incentive to embrace the practice.
Or disfavor it either, I suppose.

With the advent of the html5 figure element, and the subsequent figcaption
element, it seems to me even less relevant for p tags to hold images in
place without additional content. Though, I will admit that I am somewhat
swayed by the fact that the img tag is an inline-block element, so there
seems some relevance to having it identified within normal content –
like a
paragraph.

Anyway, these are just my personal preferences – not really my causes. :slight_smile:

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

16

Walter, since this is the newest thread I could find that makes mention of your RemoveDimensions action, I decided to post my remarks here. Actually, I posted remarks in the comment section under the Action on ActionsForge, but since my comments there never garner any attention, I felt it best to repeat what I said there again here.

http://actionsforge.com/actions/view/112

Your Action worked fine for me in the case of using a basic HTML box. It worked even when I applied an HTML border via the Inspector. But it stops shrinking the box height when you apply any Graphic Effects (including Graphic Border) to the HTML box via the Inspector. I confirmed this with 0.4.2. Would it be possible to work around this problem? My aim is to get my curved corner HTML boxes to shrink in height with the text inside.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

17

Walter, I just tried the RemoveDimensions applied to an HTML box with a background image inserted into it via the Inspect. Height shrinks perfectly in accordance with the amount of text inside. Therefore, since Graphic Borders (and rounded corners) are, well, graphics too, why wouldn’t there be a way around the existing problem?

I think the HTML borders are great, except for the fact we can’t make the corners rounded (via the Inspector). But if the sides were HTML borders and then just the corners were rounded graphics, then such should be a solution, right?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

18

I saw a comment to that effect, and replied almost immediately! Don’t apply the Action, just click on the up/down arrow icon left of the height field and you will have your vertically-stretchy roundrect in all browsers. This trick applies to square-corner HTML boxes, too. You only need the Action for inline tables in my experience.

Walter

On Sep 24, 2012, at 8:51 PM, JDW wrote:

Walter, since this is the newest thread I could find that makes mention of your RemoveDimensions action, I decided to post my remarks here. Actually, I posted remarks in the comment section under the Action on ActionsForge, but since my comments there never garner any attention, I felt it best to repeat what I said there again here.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

19

Wow. I forgot about that. I guess I don’t need your Action at all then! :wink:

Actually, in the past I did get my rounded-corner/height-can-shrink/layered HTML boxes to work, but it took a lot more effort and brain-power to figure it out. You can see it on this page in my site:

http://www.kiramek.com/english/sales.html

I first had to setup the page in the Relative Page Layout scheme. I then created a non-layered HTML box, ticked “Height-Can-Shrink,” and then I made it a layered box (which magically retrains the “Height-Can-Shrink” feature for a layered HTML box). After that I dumped a child Table inside to keep each of the items vertically and horizontally spaced correctly. The end result is just as you see it on the browser. The height of the box shrinks up to fit the vertical content of the box – all with rounded corners. I’ve just been seeking a less troublesome solution, and I thought your Action might be it.

Ah well, I do still need your CSS3 Action:

http://actionsforge.com/actions/view/120-css3-corners

At least, I need a version that has “fall back to PNGs.” :slight_smile:
I take it you still haven’t found a PIE solution?

http://freewaytalk.net/thread/view/47883#latest

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

20

I still haven’t had any time to look into that. PIE seems like a really heavy solution – it’s designed to shim IE into standards compliance all across the CSS3 waterfront – and I’m concerned that it would slow the site down appreciably for IE users. If you find something more focused, I’d be very grateful for your research time.

Walter

On Sep 25, 2012, at 12:16 AM, JDW wrote:

Ah well, I do still need your CSS3 Action:

http://actionsforge.com/actions/view/120-css3-corners

At least, I need a version that has “fall back to PNGs.” :slight_smile:
I take it you still haven’t found a PIE solution?

http://freewaytalk.net/thread/view/47883#latest

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options