O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

Wstawianie obrazów i filmów do notki (edytor TinyMCE)

Nie dla wszystkich wszystko jest jasne od samego początku. Niektórzy potrzebują dodatkowych wyjaśnień albo wskazania w którą stronę mają patrzeć. Dla tych właśnie jest treść notek Ilustrowany przewodnik po bloksie dla początkujących. Dzisiaj wyjaśnienie rzeczy która jest elementarną częścią blogowania dla wielu piszących ale nie każdy wie jak wstawić zdjęcie czy film do notki. A rzecz jest bardzo prosta.

dodawanie zdjęć i filmów

Powyższa ilustracja wszystko już obrazuje. Adres ilustracji i filmu wstawiamy w odpowiednie okno, które otworzy się po kliknięciu w odpowiedni guzik. Edytor jest czymś niejako niezależnym od bloksa. Ja polecam używanie zaawansowanego TinyMCE bo jest najprostszy w obsłudze, stale aktualizowany i udostępnia najpopularniejsze funkcje w bardzo czytelny sposób. Jeżeli ktoś ma jednak wątpliwości to w rozwinięciu instrukcja dodawania zdjęć i filmów rozbita na elementy pierwsze.

Dodawanie ilustracji i filmów do notki

Leaf Icon by Mattahan (Paul Davey)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:

pasek narzędzi

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.

Tiny MCE z nowymi zdjęciamiBlox 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.

Tiny MCE z nowymi zdjęciami

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.

Tiny MCE z nowymi zdjęciami - Z InternetuSką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”).

UWAGA

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.


z dysku

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.

Tiny MCE z nowymi zdjęciami rozmiar

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.

Tiny MCE zaawansowany dodawanie zdjęć

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

TinyMCE przycisk dodaj zdjęcie TinyMCE przycisk dodaj zdjęcieOba 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).

Nowy plik zdjęcia

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

pojedyncze dodawanie ilustracji

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.

lista plikówJeż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.

podgląd

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.

wstaw oryginał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.

format zdjęcia

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ę.

właściwości ilustracji

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

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).

przeglądajO 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ą dodaj media przycisk TinyMCE(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.

dodawanie filmów

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ść.

edytor TinnyMCE narzędzia film url

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.

ILUSTROWANY PRZEWODNIK BLOX PL

Powiązane notki:

sobota, 28 lipca 2007, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
Gość: Bartehlll, *.neoplus.adsl.tpnet.pl
2009/04/05 00:17:54
no ok wszytsko ladnie pieknie ale jak wstaiwa sie filmik flash do xml??
-
kate_mac
2009/04/05 13:50:37
@ Bartehlll
przykro mi ale nie mam na to sprytnej recepty; jak do tej pory wstawiałam na bloga tylko jeden element flash i zanim znalazłam rozwiązanie trochę się naszukałam - polecam tą sama drogę
-
Gość: Asmo, *.neoplus.adsl.tpnet.pl
2010/09/01 18:30:34
Potrzebuję małej rady. Nie mam żadnego doświadczenia w edycji bloga. Poszukuję prostej wskazówki jak wstawić grafikę do nagłówka żeby ożywić blog. Może jestem ślepy albo przemęczony, ale nigdzie nie znalazłem takiego info w sieci. Katemac jest najbardziej czytelnym i przystępnym wsparciem dla posiadaczy bloxa, dlatego postanowiłem tutaj poszukać porady.
-
Gość: Marcin, *.nat.umts.dynamic.t-mobile.pl
2011/09/07 14:29:39
Bardzo ciekawe porady.
Pozdrawiam
-
kate_mac
2011/12/05 13:41:31
Poprawiam stare notki, dodaję im nowe tagi i nieco porządkuję. Przy okazji natrafiam na komentarze, które zostały dodane w okresach kiedy nie interesowałam się blogiem.

@Asmo
Poszukuję prostej wskazówki jak wstawić grafikę do nagłówka żeby ożywić blog.

Zapewne po półtorej roku dopowiedź Cię nie interesuje ale może komuś innemu się przyda.
1. grafikę dodajemy do zasobów bloga
2. przechodzimy do edycji wyglądu: Arkusz CSS
3. Odnajdujemy w arkuszu fragment opisujący wygląd części tytułowej i przy #BlogTytulBox opisujemy tło w postaci ilustracji: background

Oczywiście ten selektor dotyczy tylko starego kodu. Wielkość nagłówka zależna jest od szablonu. Jeżeli jest już w nim ilustracja to najprościej będzie ją zastąpić poprzez nadpisanie pliku w zasobach bloga.
Kilka przykładowych notek o zastępowaniu różnych elementów obrazami i zastępowaniu obrazów w tle tytułu własnymi ilustracjami:
Każdy szablon można zmienić: sportowy na literacki
Każdy szablon można zmienić: sportowy na kulinarny
Świąteczny RSS, instrukcja
blokowy na kulinarnego
blokowy kremowy - dzień drugi

I na koniec gotowy przykładowy kod

#BlogTytulBox {
margin: 0px;
padding: 80px 0 20px 0;
background: url(/resource/tytul_ilustracji.jpg) no-repeat center top;
}

Szerokość i wysokość elementu tytułowego zależna jest od wybranego szablonu, jego kodu HTML i opisu w arkuszu stylów.
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...