I want to fetch the first image of an entry, as I have a list of entries (generated by the Playa-plugin) und want to show an image to each entry.

I am running EE2. Is there any idea or hint?


UPDATE: The images are just inserted in the entry (I use Assets, but this should be of no relevance). So the body-field of an entry could have a structure like this:

<p>bla bla bla</p>
<img src="www....">
<p>bla bla bla</p>
<img src="www....">
<p>bla bla bla</p>
<p>bla bla bla</p>
<img src="www....">

So I want to use the first image in a list of my postings (every entry of the list showing one image of the post).

  • How are your images managed? Grid? File Field? Apr 7, 2016 at 15:27
  • Deutsch? Wenn ja einfach in deutsch antworten :) First what's the problem exactly? Do you have several image fields (native ee) in EACH entry of a list of entries? Or do you try to "link" MANY images to ONE entry through playa? Can you post some code how you try it?
    – amadeus
    Apr 7, 2016 at 19:40
  • With Assets, see my update above
    – BNetz
    Apr 7, 2016 at 21:42
  • Perhaps it will be more clear when viewing my update on the original posting.
    – BNetz
    Apr 7, 2016 at 21:43
  • Ah... your "body"-field is kind of a wysiwyg-editor fieldtype where you insert images, right? And where exactly is playa playing a role?
    – amadeus
    Apr 7, 2016 at 21:51

1 Answer 1


I've assumed when you refer to "The images are just inserted in the entry" and "So the body-field of an entry", that you are referring to a single text/wysiwyg field in the entry.

You won't be able to without an add-on. You have img tags embedded within a single wysiwyg field and output using a single variable (albeit in your case via Playa). there's no way for EE to know you have html embedded in it, let alone strip out the first occurrence of the img.

The easiest method might be to hide other images using CSS (hide all img tags in content text, show the first img). You could also remove them by manipulating the DOM in JS. Or you could write a plugin that manipulated the html output from the wysiwyg field in the template. I had a quick look on Devot:ee for something that might do it for you...

CE_String might help, this is a guess and not tested...

{exp:ce_str:ing preg_rep='/< *img[^>]*src *= *["\']?([^"\']*)/i'}

This link shows the regex command you need in PHP used in the above.

Alternatively, the Find & Replace Plus add-on might help:

{exp:replace_plus find="/< *img[^>]*src *= *["\']?([^"\']*)/i" replace="" regex="yes"}

As mentioned, these aren't tried and tested, but should get you on the right track - the latter add-on looks a better fit, and you might need to change the regex to get it working.

  • Peter, thanks a lot for your effort! I think this is exactly the solution I have been looking for. I did not yet try the code you recommended, I've got to dig in deeper. One problem is, if I have 10 related entries I cannot call a find-replace-routine over 10 entries, this would be to performance-intensive. But this is another problem.
    – BNetz
    Apr 9, 2016 at 12:15
  • Might want to consider Content Elements: devot-ee.com/add-ons/content-elements Apr 9, 2016 at 12:19
  • Looks interesting! But this would require to rework all entries, wouldn't it?
    – BNetz
    Apr 9, 2016 at 16:46
  • Yep. Thought I'd throw the suggestion in there as unknown what stage you were on the build. Apr 9, 2016 at 18:19

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.