Z tego co wiem, grono administratorów chcących takiego moda u siebie jest liczna, a poszukiwania gotowców spełzają na niczym. Ci którzy go mają - a znam dwa fora,　które tą funkcjonalność u siebie zaimplementowały, z czego jedną z modyfikacji robiłem osobiście – się nim nie podzielą z goła odmiennych powodów. Forum A zapłaciło komuś żeby taki mod dla nich wykonał i nie mają prawa go udostępniać, chwała im za to, że umowy dotrzymują. Forum B może i by się podzieliło, gdyby umiało. Historia tego　moda na forum B jest bowiem taka, że chcąc napisać „multiavatara” dla dobra ogółu grzebałem prosto na plikach forum. Kodu do zmian wyszło bardzo dużo, a instalacja nastręczała by tylu problemów, że przyszłe aktualizacje silnika mogłyby powodować samobójstwa wśród administratorów. Oczywiście nie mówię i nie twierdzę, że nie da się zrobić tego łatwiej i sprawniej, bo da się i jestem tego pewien, ale ja osobiście zabiorę się za taką modyfikację tylko wtedy, gdy phpbb3 wejdzie na nową wersję, a wszystkie mody będzie można pisać obok głównego silnika, a nie w nim.　

   Po co więc ten artykuł? Bo pewnego smętnego dnia coś mnie ugryzło i szepnęło w ucho „zróóóóbbb cośśśś żeby działaaałłoooo, olleeej jaaakkkk”. Tak też się tu znaleźliśmy i stworzymy bardzo bardzo multiavatarowego replace moda w javascripcie.
Jakie są założenia tego tworu:
- ma być łatwy do zaimplementowania i wywalenia
- ma spełniać swoje zadanie, czyli pozwolić użytkowników na zmianę avataru.

   Zaczniemy od dodania biblioteki jQuery do naszego forum. Jestem przekonany, że większość z was ten krok może pominąć, bo już　z tej biblioteki korzysta. Jeżeli nie, to w pliku overall_header.html (znajdującego się w folderze template naszego stylu), w sekcji head dopisujemy linijkę:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

   Następnym krokiem będzie utworzenie nowego BBCode’a, ponieważ wykorzystując właśnie BBCode damy użytkownikowi możliwość zmiany avataru w danym poście.
Przechodzimy więc ścieżkę PA -> PISANIE ->Dodaj BBCode’a.
Sekcji Sposób użycia wpisujemy:

[avatar]{URL}[/avatar]

W sekcji Kod HTML natomiast:

<div class="replacer" style="display:none;">{URL}</div>

   Jak widzimy BBcode avatar, pozwala użytkownikowi wkleić adres URL, który następnie zostaje przepisany jako zawartość ukrytego diva. Większość z was już pewnie wie jak będzie to wszystko działało. Przejdźmy więc do ostatniego kroku, którym będzie umieszczenie kodu javascript ożywiającego naszego potworka.
Otwórzmy plik viewtopic_body.html (znajdujący się w folderze template naszego stylu) i pod linią kodu

<!-- INCLUDE overall_header.html -->

   Wstawimy nasz kod JS. Jednak co ma robić nasz kod? Ma na pewno znaleźć wszystkie DIV’y stworzone przy użyciu　naszego BBCode’a. Kiedy znajdzie DIV’a o klasie „replacer”, ma z jego zawartości wyłuskać adres URL, a następnie ten adres wstawić w znacznik IMG, który obsługuje aktualnie używanego avatara. Dobrze byłoby też uniknąć efektu przeładowywania avatarów, czyli ukryć głównego DIV’a do czasu, aż zamienimy wszystkie awatary.

<script type="text/javascript">
$("#page-body").toggle().ready(function() {
$(".replacer").each(function() {
var _this = $(this)

//zmienna img znajduje element IMG, który obsługuje aktualnego avatara. Poniższy kod zadziała na stylach stworzonych na prosilverze. Jednak łatwo go dostosować do innych styli.

var img = _this.parent().parent().parent().children(".postprofile").find( "img" );
var link = _this.html();
img.attr("src",link)
//możemy w tym miejscu ustawić szerokość i wysokość avatarów, jakich używamy na naszym forum
img.attr("height",80)
img.attr("width",80)
});
$("#page-body").toggle( "slow", function() {})

}); </script>

   Zapisujemy plik na serwerze, odświeżamy cache stylu i sprawdzamy czy działa. Do dowolnego postu wstawiamy BBCode’a avatar z linkiem do jakiegoś obrazu. W ten sposób użytkownicy uzyskali dostęp do funkcjonalności używania różnych avatarów w różnych postach. Zadanie wykonane po linii najmniejszego oporu.
   Jeżeli kogoś to zainteresuje, to w przyszłym odcinku pokażę, jak z wykorzystaniem „dodatkowych pól profilu”, prostego kodu PHP i odrobiny JS do naszego potworka dodać możliwość zapisywania i wczytywania listy używanych avatarów.

Hiob