Mam lekkiego fioła na punkcie kilku zagadnień, m. in. zgodności ze standardami i czystego, przejrzystego kodu, więc ten post musiał się pojawić.
We wczorajszym wpisie użyłem innego niż dotychczas narzędzia prezentującego fotogalerię. Niestety, zaglądnięcie w kod wygenerowanej strony, czerwona kartka od walidatora w3c i ukazanie chyba z 70 błędów nieco ostudziły moją fascynację nową galerią.

Picasna to wyjątkowo udany plugin do WordPressa autorstwa Igora Barbashina. Posiada natomiast 2 wady, z których jedna na siłę może okazać się zaletą. (Na dziś w repozytoriach WordPressa znajduje się wersja 1.5.2 i o niej tu piszę)

  1. quasi-zaleta: zarówno plik .swf jak i .xml trzymane są na serwerze autora: jak serwer padnie to galerii „niet” (zostanie tylko link do albumu na Picasie Googlowej), z drugiej strony jeśli pojawi się błąd, dziura w zabezpieczeniach, albo inna podobna przypadłość to poprawka będzie globalna i czas jej wprowadzenia zależy wyłącznie od autora,
  2. wada: generowanie kodu niezgodnego ze specyfikacją HTML 4.01 / XHTML 1.0 (gdzie tag <embed> nie występuje).

Gdzie tkwi problem?

Obecnie generowany obiekt SWF ma postać:

<object style="float:left; margin: 0 10px 10px 0" width="154" height="154">
<param name="movie" value="http://picasna.com/widget/gallery.swf?cover=lh4.ggpht.com/_...blebleble...itd."></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed style="float:left; margin: 0 10px 10px 0" width="154" height="154" src="...blebleble...itd."></embed>
</object>

Chcemy natomiast coś podobego do:

<object style="float:left; margin: 0 10px 10px 0" width="154" height="154" data="http://picasna.com/widget/gallery.swf?cover=lh4.ggpht.com/_...blebleble...itd." type="application/x-shockwave-flash" title="tytuł naszej galerii">>
<param name="movie" value="http://picasna.com/widget/gallery.swf?cover=lh4.ggpht.com/_...blebleble...itd."></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
</object>

Niby podobne, ale diabeł tkwi w szczegółach.

Rozwiązanie

Zastanawiam się czy w ogóle jest sens używać Picasny jako pluginu, czy nie lepiej od razu wklejać sobie kod zagnieżdżający flasha… załóżmy, że zostajemy przy pluginie.

W pliku picasna-functions.php znajduje się funkcja picasna_display() a w niej zmienna $pout w liniach 167 i 227.
Komentujemy „//” te straszliwie długaśne i nieeleganckie linijki, dodając pod 167:

$pout = '<object style="float:left; margin: 0 10px 10px 0" width="'.$coverwidth.'" height="'.$coverheight.'"';
$pout .= ' data="'.$pluginPath.'/gallery.swf'.$flashvars.'" type="application/x-shockwave-flash" title="'.$match[6].'">'."\n";
$pout .= '<param name="movie" value="'.$pluginPath.'/gallery.swf'.$flashvars.'" />'."\n";
$pout .= '<param name="allowFullScreen" value="true" />'."\n";
$pout .= '<param name="allowscriptaccess" value="always" />'."\n";
$pout .= '</object>'."\n";

a pod 227:

$pout = '<object style="float:left; margin: 0 10px 10px 0" width="'.$coverwidth.'" height="'.$coverheight.'"';
$pout .= ' data="'.$pluginPath.'/gallery.swf'.$flashvars.'" type="application/x-shockwave-flash" title="'.$albumname.'">'."\n";
$pout .= '<param name="movie" value="'.$pluginPath.'/gallery.swf'.$flashvars.'" />'."\n";
$pout .= '<param name="allowFullScreen" value="true" />'."\n";
$pout .= '<param name="allowscriptaccess" value="always" />'."\n";
$pout .= '</object>'."\n";

W ten sposób źródło strony jest czytelne, semantyka składni jest poprawna, ale walidator w3c dalej krzyczy o błędach.
Po zapoznaniu się z tekstem Ampersands, PHP Sessions and Valid HTML należy zmienić wartość także zmiennej $flashvars
zamieniając tekstowe & na &amp; kolejno nad poprzednimi poprawkami:

$flashvars = '?cover='.substr($albumcover, 7).'&amp;xmlPath='.$xmlscript.'&amp;an='.$album.'&amp;ps='.PICASNA_MAXSIZE.'&amp;un='.$match[3].'&amp;at='.$match[6].'&amp;ts='.PICASNA_THUMBSIZE.'&amp;cpad=5&amp;tpad=7&amp;cscheme='.PICASNA_COLOR.'&amp;ct='.PICASNA_COVERTITLE.'&amp;bt='.PICASNA_BADGETYPE.$asign.$auth;

oraz

$flashvars = '?xmlPath='.$xmlscript.'&amp;an='.$albumname.'&amp;ps='.PICASNA_MAXSIZE.'&amp;un='.$match[3].'&amp;ts='.PICASNA_THUMBSIZE.'&amp;cpad=5&amp;tpad=7&amp;cscheme='.PICASNA_COLOR.'&amp;ct='.PICASNA_COVERTITLE.'&amp;bt='.PICASNA_BADGETYPE.$asign.$auth;

sprawdzamy…

This document was successfully checked as XHTML 1.0 Transitional!

Ufff… zrobione :)

Tagged with →  
Share →

3 Responses to Picasna vs. poprawna walidacja HTML 4.01 / XHTML 1.0

  1. Alek pisze:

    Wielkie dzięki! Też chciałem użyć Picasny i tak jak Ty miałem problem z walidacją. Niestety nie znam się tak dobrze na HTMLu, więc sam bym sobie nie poradził :)

  2. damian pisze:

    A czy jest możliwość spolszczenia tego pluginu? Bo teraz po otwarciu galerii po lewej stronie mam duży napis Click through… blablabla. A bardzo zależy mi żeby było po polsku.

  3. Maurycy pisze:

    Hmm, nie wiem za bardzo o co może chodzić, bo po otwarciu galerii z picasy (u mnie w każdym razie) pobierany jest tytuł galerii, nazwa usera – ta z picasy i opis galerii – też ten z picasy.
    Więc może chce żebyś mu kliknął fru żeby setnąć topik albo deskripszyn?… bo nic innego do głowy mi nie przychodzi.
    A spolszczyć to by można było chyba tylko panel adm. w WP, bo zauważ, że SWF jest pobierany z obcego serwera (tak, autor ma Twoje statystyki ;) ), a sam SWF jest transparentny językowo.