Is there an easy way to stop inline images placed through the WYSIWYG editor from showing on a teaser display? Obviously if I use the summary field the problem is solved, but the client may not be conscious enough to always do that. I am currently outputting a featured image through an image field on the teaser display, so when the inline image also shows up it not only blocks the teaser text, it looks pretty weird.

teaser image problem, there should be text next to the top image


Perhaps you could try https://drupal.org/project/advanced_text or https://drupal.org/project/smart_trim?

I think they both have the ability to strip html from teasers.

  • Smart trim is close, but an embeded video, for example, leaves a trail of gibberish characters where the link was. – Colin Sep 9 '13 at 14:17
  • Smart Trim worked great with inline images inserted with Media WYSIWYG. There was only the label of the file left. Removed that one as well by removing the title section in file_entity.tpl.php. – daniels Oct 8 '15 at 18:29

Check you own page code, but something like the following in your css will work:

body.front div.field-item img {
  display: none;

This will allow the teaser to include the inserted image, and suppress the image display on the front page.

  • Thx. Unfortunately, because the image comes before the text in the wysiwyg, it blocks the first paragraph from coming through on the teaser display. So if I just hide it, I have no teaser, basically. – Colin Sep 3 '13 at 22:28
  • The above css only blocks the img – no text blocked. So why would your first paragraph get blocked? – tillinberlin May 19 '15 at 9:26
  • The summary is set to be trimmed at a certain length. Inline image tags are just another sequence of characters. If they appear before the text, than the text might not display because it comes after the cut-off point. – daniels Oct 8 '15 at 17:22

body.front img[data-entity-type="file"] { display:none; }

Or maybe more specific for the teasers only:

.view-mode-teaser img[data-entity-type="file"] { display:none; }

This should solve the problem with the text in the WYSIWYG.

The field-items are still being displayed, including the text inside the p-tag. Only the inline images are not displayed.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.