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

 

Additional Info

  • Data publikacji: Wtorek, 04 Luty 2014

Biorą udział w konwersacji

Komentarze (7)

  • . Dobrze byłoby też uniknąć efektu przeładowywania avatarów, czyli ukryć głównego DIV’a do czasu, aż zamienimy wszystkie awatary.

    Hmmm wyjaśni ktoś o co z tym chodzi?

    Jak rozumiem wszędzie bez tego bbcode działać będzie avek wgrany przez panel użytkownika?

  • $("#page-body").toggle()


    Ten kod wykonuje się przed i po pętli zamieniającej avki. Funkcja toggle() działa jak przełącznik ustawiając widoczność diva page-body na inny stan; tzn najpierw go ukrywa, a kiedy wszystkie avki już się zamienią go ujawnia.

    Owszem tam gdzie nie ma bbcoda, jest avatar normalny.

    W przyszłym wydaniu dodamy kilka "ficzerów" (tak jak pisałem listy avków i szybkie ich wklejanie) dodatkowo jakby coś było nie tak, to piszcie.

  • Kilka uwag, w tym problemy.
    1. class="replacer" - zapomniałeś dodać to w html dodawanego bbcode (bez tego mi avka nie pokazuje.
    2. Od kiedy to wrzuciłem na styl nie działają mi prawidłowo linki do konkretnych postów (podsyła stronka ładuje się kilka postów wyżej niż trzeba).
    3. Używam dodatkowych pól profilu z graficznym odnośnikiem (zrobione tak gg, oraz pola linkujące KP, punkty doświadczenia i tak dalej). Niestety za pola czasem wstawia mi teraz fragment grafiki, lub też całą... Co jest efektem raczej nieoczekiwanym.
    Czy jest jakaś możliwość by sprecyzować do grafiki avka? Te pola robione są wg tego
    http://phpbb3.pl/viewtopic.php?f=686&t=1134&sid=637974c32552b7bb4be6a61a8296fe4b

  • 1. Nie mam pojęcia dlaczego w artykule jest bez klasy dzięki, że zauważyłeś.
    2. strzelam w ciemno, że ma to związek z ukrywaniem page body. Usuń z kodu

    .toggle() 
    i

    $("#page-body").toggle( "slow", function() {})



    3. Da się. Najłatwiej będzie w viewtopic_body.html znaleźć miejsce gdzie jest wstawiony avatar
    - {USER_AVATAR} - i zmodyfikować to na coś takiego
    <div class="avatar">{USER_AVATAR}</div>

    a w kodzie zamienić na coś takiego (jadę na sucho nie mam teraz tego kompa przy sobie)

    var img = _this.parent().parent().parent().children(".postprofile").children(".avatar").find( "img" );

    Komentarz ostatnio edytowany około 6 lat(a) temu przez hi0b
  • Dzięki! wszystko działa jak trzeba teraz. Trochę z tym AVATAR inaczej, ale pokombinowałem i trafiłem :)

  • Gość (Wilczek)

    Odnośnik bezpośredni

    Zadziała tylko na phpbb3 czy na phpbb2 również? Bo chyba forumotion jest dość oporne. Dostęp do templates daje tylko na phpbb2 albo phpbb, ale za to w ogóle nie ma opcji dodania własnego BBcode.

  • Nie wiem jak to z phpbb2 z edycją stylu, ale na phpbb2 chyba jak na przemo możesz pozwolić graczom na wykorzystywanie html w postach, wówczas mogliby zawartość bbcode pisać jako html (

    ) i też powinno działać.

Dodaj komentarz