Question

I am trying to get the first image <img> closest to the first <p> tag of a webpage using Nokogiri. I will be using the results to display the article synopsis a la the Facebook share link.

The code I am using to get the first <p> tag of an article is as follows:

doc = Nokogiri::HTML(open(@url))
@title = doc.css('title').text
@content = doc.css('p').first

Answer 1

Find the first <img> that is inside a <p>

If you don’t already have/need the <p> element, either:

first_img_in_p = doc.at_css('p img')
first_img_in_p = doc.at_xpath('//p//img')

Note that instead of at_css or at_xpath you can just use at and let Nokogiri figure out from the string if it is a CSS or XPath expression.

Find the first <img> that is inside the first <p>

If you already have the parent node, you can use either of these:

first_p     = doc.at('p')  # Better than finding all <p> and then reducing
first_image = first_p.at_css('img')
first_image = first_p.at_xpath('.//img')

However, with these answers (unlike the first two) if the first p does not have an image you won’t find any image at all.

Find the first <img> in the document

If you really just want the first <img> anywhere (which might not be in a <p>, or the first <p>) then simply do:

first_image = doc.at('img')

If you want the first image that has at least one <p> occurring in the document somewhere before it, but not necessarily as a wrapper for the <img>…then say so and I can edit the answer further.

Find the first <img> that has a <p> before it (or as an ancestor)

Edit: Based on your comment below, I think you want:

img = doc.at_xpath('//img[preceding::p or ancestor::p]')

This says “Find the first <img> in the document that either has a <p> occurring somewhere before it (but not an ancestor), or that has as an ancestor <p>.”

Here are some test cases so you can decide if this is what you want:

require 'nokogiri'
[
  %Q{<r><p><img id="a"/></p></r>},
  %Q{<r><img id="z"/><p></p></r>},
  %Q{<r><img id="z"/><p><img id="a"/></p></r>},
  %Q{<r><img id="z"/><p></p><p><img id="a"/></p></r>},
  %Q{<r><p></p><p><img id="a"/></p></r>},
  %Q{<r><img id="z"/><p></p><p><img id="a"/></p></r>},
  %Q{<r><p></p><img id="a"/></r>},
  %Q{<r><img id="z"/><p></p><img id="a"/></r>},
  %Q{<r><p></p><b><c><img id="a"/></c></b></r>},
  %Q{<r><q><p></p></q><b><c><img id="a"/></c></b></r>},
  %Q{<r><p><img id="a"/></p><img id="z"/></r>},
  %Q{<r><p><img id="a"/></p><p><img id="z"/></p></r>},
].each do |xml|
  doc = Nokogiri.XML(xml)
  img = doc.at_xpath('//img[preceding::p or ancestor::p]')
  puts "%-50s %s" % [ xml, img||NONE ]
end

#=> <r><p><img id="a"/></p></r>                        <img id="a"/>
#=> <r><img id="z"/><p></p></r>                        NONE
#=> <r><img id="z"/><p><img id="a"/></p></r>           <img id="a"/>
#=> <r><img id="z"/><p></p><p><img id="a"/></p></r>    <img id="a"/>
#=> <r><p></p><p><img id="a"/></p></r>                 <img id="a"/>
#=> <r><img id="z"/><p></p><p><img id="a"/></p></r>    <img id="a"/>
#=> <r><p></p><img id="a"/></r>                        <img id="a"/>
#=> <r><img id="z"/><p></p><img id="a"/></r>           <img id="a"/>
#=> <r><p></p><b><c><img id="a"/></c></b></r>          <img id="a"/>
#=> <r><q><p></p></q><b><c><img id="a"/></c></b></r>   <img id="a"/>
#=> <r><p><img id="a"/></p><img id="z"/></r>           <img id="a"/>
#=> <r><p><img id="a"/></p><p><img id="z"/></p></r>    <img id="a"/>