3

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.

2

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 = '<p>Some text</p><img src="http://example.com/my-image.jpg"><p>More text</p><img src="http://example.com/my-other-image.jpg">.';

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

// Extract all <img> 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 <img> tags in your content with a Redactor Asset placeholder.

  • Great! Looks good. I guess the downside here is that you just lose the order in which the images appear. – Daniel Feb 10 '17 at 9:26

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.