Keskustelu: Nettisivujen teko: Preg_replace_callback ja kuvien kietominen linkkeihin?

Minulla on CKEditorilla tehtyä sisältöä, jossa on myös valokuvia. Jos CKEditorilla lähetetty kuva on riittävän suuri, tallennetaan siitä palvelimelle kaksi eri kokoista versiota. Editori näyttää kuvista vain pienemmän, mutta valmiille sivulle haluaisin laittaa pienemmästä kuvasta linkin suurempaan.

Olenkin yrittänyt tehdä tämän hoitavaa säännöllistä lauseketta, joka ei ihan toimii... Eli seuraavan koodin tulisi etsiä tietyn laisia kuva-tägejä ja verrata tulosta palvelimen tiedostoihin, jos kuvasta löytyy suurempi versio, niin sen ympärille pitäisi luoda linkki.

<?php

$content = "Tämän tulisi linkittää kuvia, jos niistä löytyy suurempi versio<br>";
$content.= "<img alt=\"ei suurempaa versiota\" src=\"/liite.php?image=kuva1.jpg\" style=\"border:1px solid black;\"><br>";
$content.= "<a href=\"http://google.com\"><img src=\"muukuva.jpg\"></a><br>jeejee<br>";
$content.= "<img alt=\"tämä kuva pitäisi linkittää\" src=\"/liite.php?image=kuva2.jpg\" style=\"width:400px; height:300px;\">";

function WrapLinks($matches){
  if($matches[2]=='kuva2.jpg'){ //tässä oikeasti is_file():llä tutkittaisiin tiedostoja
    return "<a href=\"/liite.php?image=$matches[2]&large\"><img $matches[1] src=\"/liite.php?image=$matches[2]\" $matches[3]/></a>";
  }
  return "<img $matches[1] src=\"/liite.php?image=$matches[2]\" $matches[3]/>";
}

echo preg_replace_callback("{<img\\s*(.*?)src=\"\/liite.php\?image=(.*?|[^\\s]+)\"(.*?)\\s*/?>}ims", "WrapLinks", $content);

?>

Ongelma on, että tuo kietoo väärän kuvan linkkiin, jos edellisen kuvan ympärillä on linkit. Eli yllä oleva koodi tulostaa näin:

Tämän tulisi linkittää kuvia, jos niistä löytyy suurempi versio<br><img alt="ei suurempaa versiota"  src="/liite.php?image=kuva1.jpg"  style="border:1px solid black;"/><br><a href="http://google.com"><a href="/liite.php?image=kuva2.jpg&large"><img src="muukuva.jpg"></a><br>jeejee<br><img alt="tämä kuva pitäisi linkittää"  src="/liite.php?image=kuva2.jpg"  style="width: 400px; height: 300px;"/></a>

Homma toimii jos tuon linkillisen kuvan ottaa välistä pois. Osaako joku sanoa miksi tämä toimii noin ja vielä hienompi olisi, jos joku osaisi korjata tuon. :)

Ongelmasi ei mitenkään liity siihen, onko edellisen kuvan ympärillä linkki, vaan vika on yksinkertaisesti lausekkeessasi. Nythän lausekkeesi ensimmäinen (.*?) ottaa HTML-koodista koko pätkän kohdasta src="muukuva.jpg" seuraavan kuvan alt-attribuuttiin asti.

Ongelma ratkeaa yksinkertaisesti niin, että korvaat useimmat pisteet lausekkeesta merkkiryhmällä [^>], jotta lauseke pysyy aina yhden img-tagin sisällä.

HTML:  <img plaaplaaplaa><img alt="plaaplaa" src="...">
vanha: <img (.*?)                            src="..."> (väärä osuma)
uusi:  <img ([^>]*?)    > (ei osumaa)
                         <img ([^>]*?)       src="..."> (osuma)