Replace img to background-image div with php

Question

Is there a way to replace img tag with div tag like below?

Original html:

<div class="article">
  <img src="/images/img-1.jpg" alt="alt for image">
</div>

Replaced html:

<div class="article">
 <div style="background: transparent url(/images/img-1.jpg) no-repeat;
 background-position: center center; background-size: cover; width: 566px; 
 height: 576px;">alt for image</div>
</div>

(Optional) Also is it possible to use the width and height from the parent div i.e. article class in my example instead of defining fixed width: 566px; height: 576px;?

If it's possible, I want to use the str_replace function.

str_replace('?????', '?????', $article);

Edit:

There may be multiple elements with class article and there may be other elements inside article class div and from which I need to change img to div.

Edit2:

I was meaning as if I may have any content inside article div and just want to replace the img with div.

I may have:

<div class="article">
  <h1>heading</h1>
  <p>paragraph</p>
  <img src="/images/img-1.jpg" alt="alt for image">
</div>

Or I may have:

<div class="article">
  <h3>heading</h3>
  <p><img src="/images/img-1.jpg" alt="alt for image"> some paragraph </p>
</div>

So, I may have anything inside .article div and from which I wanted to replace img to div like

From:

<img src="/images/img-1.jpg" alt="alt for image" here-may-be-another-attribute-too>

To:

<div style="background: transparent url(/images/img-1.jpg) no-repeat;">alt for image</div>

Answer 1

You can use PHP’s native DOM library to found and replace html. I wrote some example, you adapt for your case. Hope help.

Updated code:

$html_str = '<div class="article newclass" id="some_id">
  <h1>heading</h1>
  <p>paragraph</p>
  <img src="images/image.png" alt="alt for image">
  <br>
  <h3>
  <p>paragraph</p>
    <img src="images/image2.png" alt="alt for image3">
  </h3>
  </div>';

$dom = new DOMDocument();
$dom->loadHTML($html_str);
$xpath = new DOMXpath($dom);

foreach ($xpath->query('//div[contains(@class, "article")]//img') as $img) {

  $new_img = replace($img, $width = '566', $height = '576');

  $replacement = $dom->createDocumentFragment();
  $replacement->appendXML($new_img);

  $img->parentNode->replaceChild($replacement, $img);

}

$new_html = $dom->saveXml();
echo $new_html;

function replace($img, $width, $height) {

  $href = $img->getAttribute('src');
  $alt = $img->getAttribute('alt');

  $new_img = '<div style="background: transparent url('.$href.') no-repeat;
    background-position: center center; background-size: cover; width: '.$width.'px;
    height: '.$height.'px;">'.$alt.'</div>';

  return $new_img;
}

replace function stay the same only change part where manage with DOM

Answer 2

use the php-class simplehtmldom (http://simplehtmldom.sourceforge.net/) you can find and modify the HTML-Dom with CSS-like selectors.

<?php
require_once('simple_html_dom.php');

// Create DOM from string
$html = str_get_html('<div class="article">
  <img src="/images/img-1.jpg" alt="alt for image">
</div>');

$html->find('div.article', 0)->innertext = '<div style="background: transparent url(/images/img-1.jpg) no-repeat;
 background-position: center center; background-size: cover; width: 566px; 
 height: 576px;">alt for image</div>';

/** 
 * Output: <div id="article"><div style="background: transparent url(/images/img-1.jpg) no-repeat;
 * background-position: center center; background-size: cover; width: 566px; 
 * height: 576px;">alt for image</div></div>
 */
echo $html; 
?>