szablony katemac

Dodawanie ilustracji i filmów do notki

Blox zmienia się nieustannie, w różnym zakresie i w odniesieniu do różnych elementów. Od czasu kiedy ta notka była pierwszy raz opublikowana zmienił się też pasek narzędzi edytora, przegrupowano narzędzia, dodano guziki ułatwiające określone zadania itd. Mam nadzieję, że mimo wszystko ten wpis przyda się czasami. Temat jest bardzo elementarny więc dodałam mu zielony listek autorstwa Mattahan.

Korzystając z edytora TinyMCE pod tytułem notki (i wstępem jeżeli używasz) a przed jej właściwą treścią jest pasek narzędzi, który wygląda mniej więcej tak:

Większość przycisków powinna być dobrze znana. Mają wygląd standardowy. I większość rzeczy, które chciałoby się zrobić ze swoją notką jest możliwa poprzez te właśnie przyciski. Chciałabym napisać kilka słów o wstawianiu obrazów i filmów bo to może rzeczywiście sprawić mały problem początkującym.

Blox robi wszystko co możliwe aby ułatwić piszącym blogowanie. Przyznam się, że ja wolę mieć wybór niż podane na tacy ale rozumiem że dla wielu nie ma znaczenia jak, ważne aby prosto i skutecznie do celu.

Na początek określ co chcesz zrobić i z jakiego edytora korzystasz.

1. Prosty edytor tekstowy
2. Dodawanie zdjęć w TinyMCE z nowymi zdjęciami
3. Dodawanie zdjęć w zaawansowanym edytorze TinyMCE
4. Dodawanie filmów

1. Prosty edytor tekstowy

Aby korzystać z prostego edytora trzeba posiadać bardziej zaawansowaną wiedzę, trzeba znać się na znacznikach HTML. Wystarczy podstawowa znajomość ale skoro szukasz informacji o dodawaniu zdjęć to radzę zmienić edytor na zaawansowany, będzie prościej.

2. Dodawanie zdjęć - Tiny MCE z nowymi zdjęciami

Zacznijmy więc od pierwszej opcji, najbardziej automatycznej czyli gdy korzystacie z edytora Tiny MCE z nowymi zdjęciami. Tiny MCE posiada za każdym razem mniej więcej te same przyciski. W zależności od bloksowej wersji guziczek Dodaj zdjęcie » działa inaczej. No i może brakować tradycyjnych guziczków do dodawania zdjęć - nie ma ich właśnie w wersji Tiny MCE z nowymi zdjęciami co moim zdaniem jest problemem. Ale po kolei.

Aby wstawić obrazek z innego serwisu, którego adres znamy należy użyć okienka zatytułowanego Z Internetu. Wpisujemy w nie adres ilustracji, klikamy wstaw i gotowe.

Skąd wziąć adres ilustracji? Przeglądarki często oferują możliwość skopiowania adresu ilustracji. Kliknij na obrazku prawym przyciskiem myszy (PPM) i zobacz czy jest tam opcja w stylu Kopiuj adres obrazka. Jeżeli jest no to załatwione. Jeżeli na stronie wyświetlony jest tylko ten obrazek to zerknij na pasek adresu, na samą górę przeglądarki. Jeżeli adres kończy się literami jpg, png, gif to znaczy, że jest to właśnie adres ilustracji. Możesz go skopiować (zaznacz cały adres, kliknij PPM wybierz opcję kopiuj albo zaznacz cały adres i kliknij kombinację klawiszy „Ctrl” i „C”).

Zdjęcia publikowane w internecie są czyjąś własnością. Publikując je na własnej stronie upewnij się, że nie naruszasz praw właściciela zdjęcia czy ilustracji. Jeżeli publikujesz grafikę opierając się na prawie cytatu to nie zapomnij podać autora ilustracji i linku do niego.

Aby wstawić obrazek z zasobów własnego komputera należy użyć przycisku z etykietą Dodaj. Otwiera nam się okno dostępu do naszego komputera, odnajdujemy plik który chcemy dodać klikamy Otwórz i gotowe. Plik ładuje się od razu do notki. Mała uwaga jednak. Pliki są nadpisywane czyli jeżeli w zasobach istnieje plik o tej nazwie zostanie on zastąpiony przez ten aktualnie dodawany. Czyli nie będzie żadnego ostrzeżenia jeżeli przez przypadek będziesz chcieć dodać dwa różne obrazy o tej samej nazwie.

Po kliknięciu Wstaw w pierwszej opcji  a Dodaj w drugiej możesz jeszcze wprowadzić kilka zmian. W tej wersji blox udostępnia opcję automatycznego dostosowania rozmiaru obrazu. Rzeczywista wielkość ilustracji się nie zmienia, zarówno w dziedzinie wymiarów jak i wagi. Na stronie natomiast ilustracja wyświetli się w określonych wymiarach. Dla uproszenia procesu dodano trzy opcje Duży, Średni i Mały. Wielkość można jednak sobie dostosować poprzez wybranie odpowiedniej szerokości.

Ilustracje dodawane są automatycznie z linkiem do nich co ma swoje zalety. Możemy zmniejszyć rozmiar zdjęć tak aby dobrze wyświetlał się na blogu. A link będzie prowadził do pełnej wersji ilustracji, nawet baaardzo dużej.

Na szczęście nie usunięto przycisków linku więc można zarówno zmienić adres linku jak i go usunąć. Na powyższej ilustracji są to zaznaczona na granatowo guziki. Pierwszy pozwala na zmianę drugi usuwa.

I to by było na tyle jeżeli chodzi o edytor Tiny z nowymi zdjęciami. Raczej go nie polecam. Owszem ma swoje zalety ale ma też wady i to bardzo duże. O najważniejszej jeszcze nie wspomniałam. Zdjęcia w ten sposób dodawane nie mają wstawionego opisu. Jeżeli z jakiegokolwiek powodu nie będą mogły być wyświetlone żaden opis ich nie zastąpi. Sprawia to nie tylko, że notka będzie niepełna w syntezatorach mowy ale i w wizualnych przeglądarkach, które mają wyłączone wyświetlanie ilustracji.

3. Dodawanie zdjęć w zaawansowanym edytorze TinyMCE

Klasyczny TinyMCE daje większe możliwości jeżeli chodzi o dodawanie ilustracji. Robi to znacznie poprawniej i wcale nie jest trudniejszy w obsłudze.

Do dodawania ilustracji służą trzy przyciski. Omawiany Dodaj zdjęcie » który reaguje nieco inaczej niż w poprzednim opisie i dwa przyciski znajdujące się na pasku narzędzi pomiędzy dodawaniem linku a podglądem HTML. Pierwszy wyglądający jak obrazek przedstawiający jakiś krajobraz z małym plusem, działa dokładnie tak jak przycisk Dodaj zdjęcie » więc będę je omawiać razem. Drugi wygląda jak ilustracja z drzewem. Ich początkowe działanie jest nieco inne ale w zasadzie działają dokładnie tak samo, dając dostęp do tych samych okien edycji.

Dodaj zdjęcie » / advimageadd.imege_desc

Oba te przyciski działają dokładnie tak samo. Po kliknięciu otwierają się dwa nowe okna Wklej/edytuj obraz i Lista zasobów bloga. Poczekaj aż się załadują. Pierwsze (czyli na wierzchu) będzie Lista zasobów bloga. Wygląda ona tak samo jak w dziale PLIKI. Jeżeli pliki grupujesz w folderach (co polecam) to one będą widoczne pierwsze na liście, poza tym lista na początek uszeregowana jest chronologicznie. Można to w każdej chwili zmienić klikając w nagłówek danego działu (Plik, Typ, Data, Rozmiar).

Aby dodać zdjęcie należy kliknąć przycisk Nowy plik/zdjęcia. Jeżeli przycisk nie wygląda u ciebie tak jak na powyższej ilustracji to znaczy, że korzystasz ze starszego dodawacza, gdzie pliki trzeba dodawać pojedynczo. W każdej chwili możesz zmienić na nowszy, który pozwala na jednoczesne dodawanie większej liczby niż jeden plik.

• Nowy sposób dodawania plików »
• ZALETY: można dodawać wiele plików na raz
• WADY: działa na podstawie jakiegoś skryptu, który może zawiesić się czy nieco popsuć chwilowo gdy np. komputer jest bardziej obciążony
• Dodawaj zdjęcia / pliki pojedynczo » 
• ZALETY: prosta funkcja, która się nie wiesza i nie psuje więc jeżeli z nowszą będzie problem to ta zadziała w zastępstwie
• WADY: pliki dodaje się pojedynczo, jest więc nieco więcej klikania

Po dodaniu ilustracji do zasobów ma już ona własny adres można więc dodać ją do notki. Jeżeli dodawaliśmy tylko jedną ilustrację to jest ona na początku listy.

Jeżeli jednak dodawaliśmy na raz kilka to naszą ilustrację musimy odszukać na liście. Ułożona jest ona chronologicznie. Jeżeli klikniemy w słowo plik zmieni porządek na alfabetyczny ale jeżeli znasz nazwę to lepiej skorzystać z szukacza.
Nazwy plików są linkami do nich więc jeżeli w nie klikniemy to otworzą się nam w nowym oknie.

Aby upewnić się czy nasza ilustracja rzeczywiście kryje się pod daną nazwą wcale nie musimy jej jednak otwierać. Po najechaniu kursorem na symbol oka obok nazwy pliku powinien załadować się nam szybki podgląd.

W ostatniej kolumnie znajdują się właściwe odnośniki służące do załadowania ilustracji do notki. Mamy do wyboru wstawienie oryginału bądź miniatury. Jeżeli plik ma właściwy rozmiar, zarówno pod względem wymiarów jak i ciężkości to możemy od razu dodać go do notki. Jeżeli jednak potrzebujemy zmniejszyć zdjęcie bo jest przykładowo za szerokie  to należy skorzystać z opcji miniatury.

Ilustrację zmniejsza bloksowy edytor i dodaje pod nową nazwą do zasobów bloga a więc zarówno oryginał jak i miniatura będą dostępne. Format podany jest w postaci kwadratów ale edytor zachowuje proporcje a więc nie tyle chodzi o oba wymiary co o szerokość.

Można skorzystać z opcji miniatury ale nie zawsze efekt będzie doskonały więc rozważnie proszę.

Teraz pozostaje nam tylko wypełnić pola właściwości. Koniecznie wpisujemy Opis obrazka, jest on niezbędny szczególnie jeżeli ilustracja powiązana jest z treścią notki. Dzięki opisowi notka nie traci treści nawet jeżeli przeglądarka nie wyświetla obrazów.

O właściwościach możesz poczytać w notce: Dodawanie obrazu, właściwości. Jeżeli ilustracja jest mniejsza niż szerokość notki to tekst może ją otaczać, opływać z jednej strony. Jak to zrobić? Ano właśnie w tym oknie z właściwościami przypisywanymi obrazowi.

Wstaw/edytuj obraz

Ten przycisk działa niema dokładnie tak samo jak dwa poprzednie. Jedna różnica to fakt, że po jego kliknięciu ładuje się nam tylko okno edycji właściwości obrazu, już bez okna z plikami w zasobach bloga. Ten przycisk jest więc idealny aby poprawić coś w ustawieniach właściwości już dodanej do notki ilustracji. Albo do wstawienia ilustracji, której adres już znasz, czy to będącej już w zasobach twojego bloga czy gdzieś indziej w Internecie (np. na FotoForum).

O ile dwa pierwsze przyciski otwierają od razu oba okna o tyle ten poprzestaje na otwarciu jednego a aby dostać się do drugiego należy kliknąć przycisk obok okna URL obrazka. I jesteśmy w dokładnie tym samym miejscu jak gdybyśmy kliknęli, któryś z pierwszych dwóch przycisków. Czyli bez obaw, wszystkie drogi prowadzą do Rzymu.

Nie ma znaczenia który z guzików użyjemy do dodania ilustracji bo wszystkie trzy działają tak samo i dają dostęp do tych samych miejsc w edycji bloga.

Dodawanie filmów

Filmy dodaje się podobnie jak zdjęcia. Do dyspozycji mamy przycisk z klatką filmową (ostatni w pierwszym rzędzie na pasku narzędzi) albo dla tych, którzy mają problem przedstawieniami ikonograficznymi blox wyróżnił tą funkcję dodając odpowiedni guzik nad paskiem edytora: Dodaj film ». W obu przypadkach otworzy nam się to samo nowe okno w którym wybieramy typ pliku wpisujemy adres i podajemy rozmiar.

Najprawdopodobniej najczęściej film dodawany na blogu będzie przechowywany gdzie indziej, będzie to film z YouTube, Vimeo czy innego tego typu serwisu.

Przede wszystkim potrzebujemy adresu tego pliku. Na YouTube adres na pasku adresu zadziała jako adres pliku więc możemy go po prostu wpisać. Ale nie w przypadku każdego serwisu tak będzie. Jeżeli jest możliwość upublicznienia folmu na innej stronie to wśród informacji o filmie znajdziemy kod embed z niego wyciągniemy adres url (najprawdopodobniej poprzedzony embed src=), powinny się tam także znaleźć informacje o typie (przykładowo: type="application/x-shockwave-flash") a także rozmiar. Filmy podobnie jak i zdjęcia można zmniejszyć jeżeli nie mieszczą się na blogu należy jednak pamiętać o proporcjach i nie zmieniać wymiarów na oko. Dlatego opcja zachowaj proporcje powinna być zaznaczona zawsze gdy zmieniasz wielkość.

To tyle na dzisiaj. Oczywiście można to zrobić na kilka innych sposobów. Jest też kilka notek na podobny temat, które mogą Cię zainteresować. Zapraszam do zerknięcia do zakładek.

Powiązane notki:

• Jak prosto i wygodnie dzielić notkę na wstęp i treść
• Otaczanie ilustracji w notce tekstem (FAQ)
• Dodawanie obrazu w notce, możliwości zmiany właściwości