J'ai ceci:

<img src="large/image.png" />

Je veux ceci:

<picture>
  <source media="(min-width:800px)" srcset="medium/image.png">
  <source media="(min-width:300px)" srcset="small/image.png">
  <img src="large/image.png" />
</picture>

Je veux le faire avec PHP DOMDocument et j'ai essayé ce code: (il peut y avoir plus d'une image dans le html)

$domContent = $domDocument->loadHTML($html);
$images = $domDocument->getElementsByTagName('img');
foreach ($images as $image) {
  $picture = $domDocument->createElement('picture');
  // $pic_clone = $picture->cloneNode();

  $source = $domDocument->createElement('source');
  $source->setAttribute("media", "(min-width:800px)");
  $source->setAttribute("srcset", "path_large");
  $source->setAttribute("media", "(min-width:300px)");
  $source->setAttribute("srcset", "path_small");

  $src_clone = $source->cloneNode();
  $src_clone->appendChild($picture);

  $image->parentNode->replaceChild($src_clone, $image);
  $src_clone->appendChild($image);
}

Cela produit:

<source media="(min-width:300px)" srcset="path_small">
<picture></picture>
<img src="large/image.png"></source>
  1. Comment placer correctement la balise d'image?
  2. Comment obtenir les deux balises source?
  3. Comment éviter la balise source de fermeture?

Je ne peux tout simplement pas comprendre cela ...

PS: Ne vous souciez pas des chemins d'image, ceux que je corrigerai plus tard.

1
Hendrix 7 oct. 2020 à 16:10

2 réponses

Meilleure réponse

J'ai découvert ce code grâce aux conseils de @swadhwa et @MaxiGui. J'apprécie vraiment vos commentaires, merci.

private function PictureWrapper($content=false) {

    $domDocument = new DOMDocument();
    $domContent = $domDocument->loadHTML("<html><head><meta content='text/html; charset=utf-8' http-equiv='Content-Type'></head><body>" . $content, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);

    if (false === $domContent) {
        return $content;
    }
  
    $images = $domDocument->getElementsByTagName('img');
    if (0 === count($images)) {
        return $content;
    }

    foreach ($images as $image) {
        $img_src = $image->getAttribute("src");
        $arr = pathinfo($img_src);
        $dirname = $arr['dirname'];
        $base = $arr['basename'];

        $img_medium = $dirname . "/medium/" . $base;
        $img_small = $dirname . "/small/" . $base;

        $picture = $domDocument->createElement('picture');
        $pict_clone = $picture->cloneNode();
        $image->parentNode->replaceChild($pict_clone, $image);
        $pict_clone->appendChild($image);
            
        $source = $domDocument->createElement('source');
        $source->setAttribute("media", "(min-width:800px)");
        $source->setAttribute("srcset", $img_medium);
        $src_clone = $source->cloneNode();
        $image->parentNode->replaceChild($src_clone, $image);
        $src_clone->appendChild($image);
            
        $source = $domDocument->createElement('source');
        $source->setAttribute("media", "(min-width:300px)");
        $source->setAttribute("srcset", $img_small);
        $src_clone = $source->cloneNode();
        $image->parentNode->replaceChild($src_clone, $image);
        $src_clone->appendChild($image);
    }
    $content = $domDocument->saveHTML();
    $content = str_replace('<html><head><meta content="text/html; charset=utf-8" 
    http-equiv="Content-Type"></head><body>', "", $content);
    $content = str_replace('</body></html>', "", $content);
    $content = str_replace('</source>', "", $content);

    return $content;
}
0
Hendrix 8 oct. 2020 à 08:37

Vous l'ajoutez à l'élément source au lieu de picture

Remplacez ceci:

$src_clone = $source->cloneNode();
$src_clone->appendChild($picture);

$image->parentNode->replaceChild($src_clone, $image);
$src_clone->appendChild($image);

Avec ça:

$src_clone = $source->cloneNode();
$picture->appendChild($src_clone);

$image->parentNode->replaceChild($src_clone, $image);
$picture->appendChild($image);
0
s.wadhwa 7 oct. 2020 à 13:16