Note that there are some explanatory texts on larger screens.

plurals
  1. POPHP dom wrap image in link and add span before image tag
    primarykey
    data
    text
    <p>So I've been at this for quite a while, and the best I got is wrapping the image in a link and with a span after the image tag:</p> <pre><code>&lt;a href=""&gt; &lt;img src=""&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt; </code></pre> <p>But wat I want is:</p> <pre><code>&lt;a href=""&gt; &lt;span&gt;&lt;/span&gt; &lt;img src=""&gt; &lt;/a&gt; </code></pre> <p>I tried al kinds of variatons and positions of</p> <pre><code>$img-&gt;parentNode-&gt;appendChild($dom-&gt;createElement('span'), $img); </code></pre> <p>and the use of insertBefore() on all kinds of places in my code and I'm completely out of ideas since I'm fairly new to the php DOM stuff. My source: </p> <pre><code>foreach($dom-&gt;getElementsByTagName('img') as $img) { $fancyHref = $dom-&gt;createElement('a'); $clone = $fancyHref-&gt;cloneNode(); $img-&gt;parentNode-&gt;replaceChild($clone, $img); $clone-&gt;appendChild($img); $img-&gt;parentNode-&gt;appendChild($dom-&gt;createElement('span')); }; </code></pre> <p><strong>Update:</strong> To clarify my goal: I have an img tag in the html. After it goes through the php dom I want the img tag wrapped in an a tag with a span tag before the image tag:</p> <p><em>Before</em></p> <pre><code>&lt;img src="" /&gt; </code></pre> <p><em>After</em></p> <pre><code>&lt;a href=""&gt; &lt;span class=""&gt;&lt;/span&gt; &lt;img src="" /&gt; &lt;/a&gt; </code></pre> <p><strong>My code at the moment for doing this (without the span)</strong></p> <pre><code>foreach($dom-&gt;getElementsByTagName('img') as $img) { $src = $img-&gt;getAttribute('src'); $filename = substr(strrchr($src , '/') ,1); $filename = preg_replace('/^[.]*/', '', $filename); $filename = explode('.', $filename); $filename = $filename[0]; if($this-&gt;imagesTitles[$this-&gt;currentLanguage][$filename] !== '') { $img-&gt;setAttribute('title', $this-&gt;imagesTitles[$this-&gt;currentLanguage][$filename]); $img-&gt;setAttribute('alt', $this-&gt;imagesTitles[$this-&gt;currentLanguage][$filename]); } else { $img-&gt;removeAttribute('title'); $img-&gt;removeAttribute('alt'); } $classes = explode(' ', $img-&gt;getAttribute('class')); if(!in_array('no-enlarge', $classes)) { $fancyHref = $dom-&gt;createElement('a'); $span = $dom-&gt;createElement('span'); $span-&gt;setAttribute('class', 'magnifier'); $fancyHref-&gt;setAttribute('class', 'enlarge'); $fancyHref-&gt;setAttribute('rel', 'enlarge'); $fancyHref-&gt;setAttribute('href', $img-&gt;getAttribute('src')); if($img-&gt;getAttribute('title') !== '') { $fancyHref-&gt;setAttribute('title', $img-&gt;getAttribute('title')); $fancyHref-&gt;setAttribute('alt', $img-&gt;getAttribute('title')); } $clone = $fancyHref-&gt;cloneNode(); $img-&gt;parentNode-&gt;replaceChild($clone, $img); $clone-&gt;appendChild($img); $img-&gt;parentNode-&gt;insertBefore($span, $img); } $img-&gt;setAttribute('class', trim(str_replace('no-enlarge', '', $img-&gt;getAttribute('class')))); if($img-&gt;getAttribute('class') === '') { $img-&gt;removeAttribute('class'); } } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload