Hide image of specific size, by CSS?

Question

Thanks in advance for your help!

I have an RSS, I want to post the content of this RSS on my page, but the RSS is from WordPress and it contains an image of a button to comment.

Problem 1: if I hide every <img> from the RSS, I also hide images posted on the article from the blog.

Problem 2: the comment button <img> URL is sequential, so even if I could hide "wordpress.com/comments/ ... 12", the next button <img> url is "wordpress.com/comments/ ... 13" and so on :(

HTML of the image:

<img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/mulleralc.wordpress.com/35/">

There is one way to identify the comment button image: it’s 72px by 16px. So, I need to hide every picture on my page that is 72 (width) x 16 (height). Is there a way to do this in CSS or JavaScript?

Since we have coding like this:

img[src~="http://...url..."] {display: none;}

maybe there's something like:

img[height="16"] {display: none;}

Can you post the relevant HTML? The latter example *should* work if you have width/height attributes in your images .. — Adrift, Jul 23 '13 at 20:38
If it's your page, is there a reason why you can't just apply a CSS class to each of the images you wish to hide? — Jon Newmuis, Jul 23 '13 at 20:38
Is it possible that you aren't declaring the height directly in the `` tag? — Jnatalzia, Jul 23 '13 at 20:39
If you can apply attributes, you can apply class names and THEN CSS can help. — Diodeus - James MacFarlane, Jul 23 '13 at 20:39
So this [*should* work](http://jsfiddle.net/davidThomas/4fqvp/) (and does, for me, in Chromium 27/Ubuntu 12.10). — David Thomas, Jul 23 '13 at 20:42
@kathryn: does the partial attrib selector i show not fit your needs? — dandavis, Jul 23 '13 at 20:48
@dandavis unfortunately didn't work :( but thank you so much for trying to help me — kathryn, Jul 23 '13 at 20:50
Also, PLEASE give us your code. We need it to solve your problem. It is critical that we be able to reproduce your site. — ameed, Jul 23 '13 at 20:51
@kathryn: are you sure the images are displayed as IMG tags? (i tested my code before chipping in). if it's not working, maybe you are using backgroundImage or input[type=image], or a stronger CSS rule is showing the images. — dandavis, Jul 23 '13 at 20:52
And how do you insert the markup from the feed into your site. The right approach would be to remove the images before they are even inserted. — adeneo, Jul 23 '13 at 20:53
another idea: add a selector to hit the container around the images you want to hide (eg .feedback a img), or add one in to the feed's content container. this should allow you to hide/show all, and then selectively to the opposite for a specific sub-section. — dandavis, Jul 23 '13 at 20:57
@MathSquared11235 I added the html I'm using in the page, so you guys can see my problem — kathryn, Jul 23 '13 at 21:02
No. I mean the ENTIRE PAGE content. That snippet tells us absolutely nothing other than that you are using a JavaScript in your page. — ameed, Jul 23 '13 at 21:04
@MathSquared11235 No, the javascript shows the feed, it's feedburner generated. Paste that into your html editor and you'll see the whole thing, promise. — kathryn, Jul 23 '13 at 21:08
@kathryn: here’s a public example of your code: http://jsfiddle.net/aq6vC/ (You can use JSFiddle for this sort of thing too, it’s free.) — Paul D. Waite, Jul 23 '13 at 21:57

Paul D. Waite · Accepted Answer · 2013-07-23T23:02:50.557

4

the comment button URL is sequential, so even if I could hide "wordpress.com/commentbutton/12", the next button url is "wordpress.com/commentbutton/13" and so on :(

CSS can actually help out here. The attribute selector can select attributes which contain a value. So, this:

img[src*="feeds.wordpress.com/1.0/comments"] {display: none;}

should do it.

edited Jul 23 '13 at 23:02

answered Jul 23 '13 at 21:51

Paul D. Waite

96,640
56
199
270

GENIUS!! BRILLIANT!! THANK YOU SO SO MUCH PAUL!! – kathryn Jul 23 '13 at 21:58
1

You’re very welcome. @dandavis actually said the same thing in the comments, but because he couldn’t see the HTML for the button, his example didn’t work. In future, as I said, Firebug or Safari/Chrome’s Web Inspector can show you HTML generated by JavaScript. You would have got an answer just like mine an hour ago if you’d supplied the HTML of the comment button in the first place. – Paul D. Waite Jul 23 '13 at 22:01

federico-t · Answer 2 · 2013-07-23T21:01:46.970

3

I'd recommend using multiple attribute selectors, in this case add the following code to your CSS stylesheet:

img[width="72"][height="16"] {
    display: none;
}

The only problem with this approach is that it wouldn't work in older browsers (e.g. IE 6) because they don't recognize them.

If you are using the JavaScript library jQuery, you could use the following script:

$('img').each(function () {
    'use strict';
    var img = $(this);

    if (img.width() === 72 && img.height() === 16) {
        img.hide();
    }
});

edited Jul 23 '13 at 21:01

answered Jul 23 '13 at 20:53

federico-t

12,014
19
67
111

Why are you specifying `'use strict'`? – Wex Jul 23 '13 at 20:56
@Wex Not really necessary in this case, but it's good practice. Read http://stackoverflow.com/a/1335881/2612112. – federico-t Jul 23 '13 at 21:00
The CSS solution also wouldn’t work if the width or height of an image was set in CSS rather than HTML. – Paul D. Waite Jul 23 '13 at 21:44
@PaulD.Waite That's right. The [img element](http://www.w3.org/TR/html-markup/img.html) should specify both the [width](http://www.w3.org/TR/html-markup/img.html#img.attrs.width) and the [height](http://www.w3.org/TR/html-markup/img.html#img.attrs.height) attributes for the CSS solution to work. – federico-t Jul 23 '13 at 21:51
And the content being insterted dynamically with feedburner means the second function won't work either unless you figure out a way to know when the new content has been insertered etc. – adeneo Jul 23 '13 at 21:57
@adeno: as long as it’s run on document ready, I think it’ll work. [The Feedburner script](http://feeds.feedburner.com/MulleralcsWeblog?format=sigpro) uses `document.write` to output the content, so document ready won’t run until the script’s done. – Paul D. Waite Jul 23 '13 at 22:04

hungerstar · Answer 3 · 2013-07-23T21:24:41.443

0

Use multiple attribute selectors.

Your image tags will have to use the width and height attributes for this to work.

HTML

<img src="your-image.jpg" width="72" height="16" />

CSS

img[width="72"][height="16"] {
     display: none;
}

OR

As suggested above, use a CSS class.

HTML

<img class="hide-from-rss" src="your-image.jpg" width="72" height="16" />

CSS

.hide-from-rss {
     display: none;
}

edited Jul 23 '13 at 21:24

answered Jul 23 '13 at 20:50

hungerstar

21,206
6
50
59

the problem is that on my code, the height and width are not explicit. see the edit on my original post, there's my full html – kathryn Jul 23 '13 at 21:35
CAN YOU MODIFY THIS RSS FEED? If so, add a CSS class or add the attributes to the images. – hungerstar Jul 23 '13 at 21:37
all I have is what you see in my original post. what class could I use? – kathryn Jul 23 '13 at 21:46
I'm sorry but "all I have is what you see" does not answer my question. Can you modify the HTML? – hungerstar Jul 23 '13 at 21:50
@hungerstar: I’m guessing the RSS feed is generated by the JavaScript included in the OP’s question. Kathryn, could you use Firebug (in Firefox), or Chrome or Safari’s Web Inspector to copy out the generated HTML for these WordPress comment buttons? Right-click on one of the buttons, and select “Inspect Element” or “Inspect Element in Firebug”, then see if you can copy the HTML for a button from the inspector. – Paul D. Waite Jul 23 '13 at 21:55

score -1 · Answer 4 · answered Jul 23 '13 at 20:38

-1

CSS cannot do this. It has no idea how large images are on your page. You need JavaScript to solve this.

answered Jul 23 '13 at 20:38

Diodeus - James MacFarlane

112,730
33
157
176

2

CSS *should* be able to do this *if* the (deprecated) `height`/`width` attributes are being used. But I have no idea if they are, given the lack of HTML in the question. – David Thomas Jul 23 '13 at 20:39
@DavidThomas: I thought it was just defining % values in the width/height attributes that's deprecated? – Adrift Jul 23 '13 at 20:40
@Adrift - http://stackoverflow.com/questions/6784868/html5-can-i-use-width-and-height-in-img – Wex Jul 23 '13 at 20:49
@MarcB Maybe silly, but that's new to me. Good point, thanks. Source of W3C then: http://www.w3.org/TR/CSS2/selector.html#matching-attrs ;-) – Pieter Jul 23 '13 at 20:49

Hide image of specific size, by CSS?

4 Answers4

Linked