WordPress: Removing full size images from excerpt

25. April 2011 | Ca. 4 Minuten Lesedauer

Dieser Eintrag ist mal wieder auf Englisch, da die Zielgruppe etwas internationaler aufgestellt ist… ;-D I am currently developing a WordPress theme and I am using the_post_thumbnail-functionality. As it is of course possible to have full-sitze images in your excerpt (before the „more“-tag), and this will be a common case in the use of the […]

Dieser Eintrag ist mal wieder auf Englisch, da die Zielgruppe etwas internationaler aufgestellt ist… ;-D

I am currently developing a WordPress theme and I am using the_post_thumbnail-functionality.

As it is of course possible to have full-sitze images in your excerpt (before the „more“-tag), and this will be a common case in the use of the theme, these images are displayed in the excerpt too and can destroy your whole design.

With some little help from „illuminatus7“ from #wordpress on freenode.net I found an easy way to remove the images without much magic…

He said that he adds a simple display:none to the images in the container enclosing the excerpt. That´s a good idea and I used it, too.

My solution is based on CSS3-Selectors, which should work fine in modern browsers. You can read about them here.

.eintrag_startseite_gross img[class*="size-full"] {
display:none
}

If you don´t feel comfortable with CSS3-Selectors you can also stick to CSS2-Selectors. It should work fine with WP, too. And maybe it´s even better for older browsers, although I don´t know when CSS2/3-Selectors were supported. As I am thinking about it now, maybe I should stick to that, too.

.eintrag_startseite_gross img[class~="size-full"] {
display:none
}

.eintrag_startseite_gross must of course be changed to whatever is enclosing your excerpt. size-full is added to the class name of images which are embedded in full-size, so this can be different if you embed them in medium, large or only thumbnail size. You have to point this out for yourself.

Of course you can remove the selector, so any image in your excerpt will not be displayed. This will also affect your post-thumbnail if you have it enclosed in the same element like your excerpt (which is probably not unusual).

I hope this can help you a little. Leave a comment if it was helpful or you have further questions.

And thanks again to illuminatus7 for that idea. :-)