<p>There's nothing through Feed Me that handles this elegantly at the moment, and you'd need to either parse your html data before or after the import.</p>

<p>We've done this a few times on an import, where we've created a trivial PHP script which extracts images out of HTML content. Something like:</p>

<pre><code>$html = '&lt;p&gt;Some text&lt;/p&gt;&lt;img src="http://example.com/my-image.jpg"&gt;&lt;p&gt;More text&lt;/p&gt;&lt;img src="http://example.com/my-other-image.jpg"&gt;.';

// Start scraping!
$doc = new DOMDocument();
$doc-&gt;loadHTML($html);
$xpath = new DOMXPath($doc);

// Extract all &lt;img&gt; tags from our HTML content
foreach ($xpath-&gt;query('//img') as $key =&gt; $node) {

    // Save the image for later - just get the filename though
    $contentImages[] = $node-&gt;getAttribute('src');

    // Remove the 'img' tag from the content node
    $node-&gt;parentNode-&gt;removeChild($node);
}

// Store our parse HTML content (without img tags)
$content = $doc-&gt;saveHTML();

$json[] = array(
    'contentImages' =&gt; $contentImages,
    'content' =&gt; $content,
);

echo json_encode($json);
</code></pre>

<p>Normally this is because most scenarios go from a single WYSIWYG content block (looking at your Wordpress), to a Matrix content-builder field. In our cases, we like to create a Rich Text 'Content' block, and an 'Image' content block. As such, they're two different bits of data, and extracted out as above.</p>

<p>If you're wanting to keep your images in your Redactor fields, but have them hooked up to Craft's Assets - thats much more complicated. You'd need to upload the asset to Craft, get the ID from the uploaded asset, and replace the <code>&lt;img&gt;</code> tags in your content with a Redactor Asset placeholder.</p>

CC BY-SA 3.0
2017-02-10T09:26:55.063Z
Great! Looks good. I guess the downside here is that you just lose the order in which the images appear.
Daniel
CC BY-SA 3.0
2017-02-09T21:52:13.657Z
2017-02-09T21:52:13.657Z
crawf
<p>More of a general question rather than a specific issue I have right now. I want to migrate a site from a bespoke CMS, which relies heavily on CKEditor for embedding inline images into HTML content.</p>

<p>Obviously I'd like to import the html content, but somehow translate the embedded images into proper Craft asset uploads, embedded into a Redactor field (obviously I know that keeping images separate from text is fine, but that is a bigger issue than I'm prepared to deal with!).</p>

<p>Would love to know if anyone has done this before, and how they approached it. Extra points for doing it with FeedMe, which works very well for me.</p>

<redactor><import><plugin-feedme>
How would you import content with embedded images, ideally using FeedMe?
# How would you import content with embedded images, ideally using FeedMe?

(Asked by: username_0 on 2017-02-09)

More of a general question rather than a specific issue I have right now. I want to migrate a site from a bespoke CMS, which relies heavily on CKEditor for embedding inline images into HTML content.

Obviously I'd like to import the html content, but somehow translate the embedded images into proper Craft asset uploads, embedded into a Redactor field (obviously I know that keeping images separate from text is fine, but that is a bigger issue than I'm prepared to deal with!).

Would love to know if anyone has done this before, and how they approached it. Extra points for doing it with FeedMe, which works very well for me.

**Tags:** redactor, import, plugin-feedme


---

## 1 answers

### Answer by username_1 on 2017-02-09. Score: 3 | Accepted answer

There's nothing through Feed Me that handles this elegantly at the moment, and you'd need to either parse your html data before or after the import.
We've done this a few times on an import, where we've created a trivial PHP script which extracts images out of HTML content. Something like:
$html = 'Some textMore text.';

// Start scraping!
$doc = new DOMDocument();
$doc->loadHTML($html);
$xpath = new DOMXPath($doc);

// Extract all  tags from our HTML content
foreach ($xpath->query('//img') as $key => $node) {

    // Save the image for later - just get the filename though
    $contentImages[] = $node->getAttribute('src');

    // Remove the 'img' tag from the content node
    $node->parentNode->removeChild($node);
}

// Store our parse HTML content (without img tags)
$content = $doc->saveHTML();

$json[] = array(
    'contentImages' => $contentImages,
    'content' => $content,
);

echo json_encode($json);

Normally this is because most scenarios go from a single WYSIWYG content block (looking at your Wordpress), to a Matrix content-builder field. In our cases, we like to create a Rich Text 'Content' block, and an 'Image' content block. As such, they're two different bits of data, and extracted out as above.
If you're wanting to keep your images in your Redactor fields, but have them hooked up to Craft's Assets - thats much more complicated. You'd need to upload the asset to Craft, get the ID from the uploaded asset, and replace the  tags in your content with a Redactor Asset placeholder.

> **Comments:**
> **username_0**: Great! Looks good. I guess the downside here is that you just lose the order in which the images appear.  

---

