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

dodawanie obrazu, właściwości

O tym jak dodawać zdjęcia w notce już pisałam. W zależności od tego gdzie zdjęcie się znajduje możemy skorzystać z kilku przycisków w zaawansowanym edytorze TinyMCE ale w gruncie rzeczy to i tak nie ma znaczenia bo zawsze jesteśmy w stanie trafić w to samo miejsce a mianowicie do okna Wklej/edytuj obraz, które to okno jest naszym dzisiejszym celem.

Wklej/edytuj obraz

Mamy tutaj trzy karty: Ogólne, Wygląd i Zaawansowane. Wszystkie trzy bywają przydatne choć w różnym stopniu. Część ogólne zawiera informacje podstawowe w części wręcz niezbędne do wyświetlenia ilustracji. Wygląd (dawniej prezentacja) odpowiada za różne mniej lub bardziej magiczne sposoby ustawienia zdjęcia czy dodania mu ramki. Ostatnia zakładka zawiera już bardziej zaawansowane ustawienia, związane głownie z różnymi innymi plikami powiązanymi z ilustracją.

Na początek niewielkie wyjaśnienie związane z edytorem. Blox się rozwija i zmiany zachodzą w nim na bieżąco. Mino iż notka nie jest bardzo stara (w momencie ponownej edycji, w grudniu 2011 ma nieco ponad rok) to nawet w dziedzinie właściwości ilustracji zaszły pewne zmiany, częściowo na lepsze częściowo na gorsze.

Drobne zmiany w oknie edytora wyszły mu na lepsze. Określenia są nieco bardziej jasne i zrozumiałe.

Tiny MCE z nowymi zdjęciamiUdostępniono nieco zmienioną wersję edytora nazwaną TinyMCE z nowymi zdjęciami, której zasadniczo nie polecam. Wszystko się jeszcze może zmienić ale jak kilka dni temu sprawdzałam to dodając zdjęcia do wpisu nie można było nawet alt (alternatywnego opisu obrazka) wpisać co nie tylko jest niedogodnością ale i chyba sporym błędem. Co do reszty opisywanych tu ustawień i właściwości ilustracji to nie dotyczą one edytora TinyMCE z nowymi zdjęciami bo on choć może i łatwiej czy szybciej dodaje zdjęcia do notek to jednak trudniej cokolwiek z tymi zdjęciami zrobić (choćby ustawić je względem tekstu).

Edycja obrazu: OGÓLNE

Ta część jest niezbędna. Uzupełnić musimy jedno pole, powinniśmy dwa a trzy są mile widziane.

Zaczynamy od URL obrazka czyli adresu internetowego naszej grafiki (img src). Jeżeli tyle co wstawiliśmy go do zasobów to to pole jest zapewne automatycznie wypełnione jeżeli nie to wpisać należy cały adres począwszy od http skończywszy na rozszerzeniu pliku (czyli gif, png, jpg...).

Następnie jest Opis obrazka (alt), który jest konieczny z co najmniej trzech względów:

  • osoby niewidzące a korzystające z programów odczytujących im treść strony tylko dzięki opisowi obrazu mogą zapoznać się z jego treścią;
  • drugi powód to przeglądarki tekstowe i wyłączone wyświetlanie obrazów czyli sytuacje gdzie z różnych względów użytkownicy widzą Twoją stronę pozbawioną elementów graficznych;
  • ostatni powód to roboty wyszukiwarek; jasne biorą one pod uwagę kontekst czy słowa w adresie ale to alt powinien opisywać co jest na zdjęciu

Trzecie pole to Tytuł (title). To nie jest to samo co tekst alternatywny. Przykładowo w większości przeglądarek tytuł obrazu wyświetli się w chmurce po najechaniu kursorem na obraz.

Na tej karcie zostaje nam już tylko podgląd. Jeżeli właściwie uzupełniono pole na adres URL to w podglądzie widać będzie nasz plik.

Edycja obrazu: WYGLĄD

eTinnyMCE edytuj obraz Prezentacja

W części Prezentacja jak sama nazwa mówi mamy dostęp do edycji sposobu w jaki będzie wyświetlana nasza ilustracja. W zasadzie wszystko co nas tutaj interesuje to dwa pola: Rozmiary i Styl, pozostałe mają tylko pomagać wypełnić pole styl. Ale po kolei.

Wyrównanie w przypadku obrazu nie oznacza prostego do lewej-prawej-środka. W tym miejscu będziemy określać wzajemne położenie tekstu i obrazu. Jeżeli obraz wyświetla się jako jedyna rzecz w akapicie (enter-obraz-enter) pierwszych sześć możliwości w zasadzie go nie dotyczy. Dla lepszego wyobrażenia przygotowałam przykład, w którym większy z obrazków wyrównany jest na osiem różnych sposobów (mniejszy zostawiam bez opisu więc powinien zachowywać się zupełnie jak tekst). Zachęcam więc do zapoznania się z przykładową notką: Dodawanie obrazu - Prezentacja - Wyrównanie PRZYKŁAD.

  1. Glowna LiniaGłówna linia (vertical-align: baseline;)
    • To jest wartość początkowa. Jeżeli w szablonie nie zostało to zmienione to w ten właśnie sposób wyrównywane są elementy, czyli zazwyczaj brak i główna linia będą dawały taki sam efekt.
    • Linia bazowa obrazu wyrównana jest z linią bazową tekstu w paragrafie.
  2. GornyGórny (vertical-align: top;)
    • Wyrównuje górę elementu (opisywanego obrazku) z górą najwyższego elementu w linii paragrafu.
    • Jeżeli na moim przykładzie nie było by drugiej ilustracji, która jest wyższa od tekstu górą, do której wyrównywalibyśmy byłaby góra tekstu co wyglądałoby podobnie jak tekst górny.
  3. ŚrodkowyŚrodkowy (vertical-align: middle;)
    • Wyrównuje środek elementu (ilustracji) ze środkiem małych liter rodzica (czyli elementu w którym obrazek się znajduje).
    • W związku z czym możemy mieć małą zmyłkę bo wydawałoby się, że rzecz dotyczyć powinna środka wysokości linii elementu czyli w przypadku linii z drugim obrazkiem powinna powinna być gdzie indziej i uwzględniać wielkość drugiego obrazu ale tak nie jest. Środkowy działa tak jakby był tekstem środkowym (text-middle), który nie istnieje.
  4. DolnyDolny (vertical-align: bottom;)
    • Wyrównuje dół obrazu z dołem całkowitej linii czyli z dolną krawędzią najniższego elementu.
    • Trudno zauważyć różnicę pomiędzy tym wyrównaniem a wyrównaniem tekst-dolny ale jest ono odwrotne do górnego więc mam nadzieję, że zasada jest jasna.
  5. Tekst GornyTekst górny (vertical-align: text-top;)
    • Wyrównuje górę ilustracji z górą tekstu w paragrafie.
    • Tutaj najprościej zauważyć różnicę pomiędzy wyrównaniem do górnej krawędzi a wyrównaniem do górnej części tekstu. W linii paragrafu umieszczona jest druga, mniejsza ilustracja i ona wyznacza górną krawędź. My natomiast wyrównujemy do góry czcionki co sprawia, że drugi obrazek nieco wystaje.
  6. Tekst DolnyTekst dolny (vertical-align: text-bottom;
    • Wyrównuje dół ilustracji z dołem czcionki.
    • Różnica pomiędzy tym rozwiązaniem a wyrównaniem dolnym może nie być wyraźnie widoczna. Na moich przykładach jest to zaledwie 1px.
  7. LewyLewy (float: left;)
    • To jest zupełnie inny typ wyrównania i nie ma żadnych analogii z powyższymi sześcioma.
    • Powstaje przy wykorzystaniu pływania elementu.
    • Left wysyła obrazek w kierunku lewej krawędzi paragrafu a pozostałe elementy w akapicie oblewają jego prawą i dolną krawędź.
  8. PrawyPrawy (float: right;)
    • Obrazek płynie ku prawej krawędzi akapitu i od swej lewej i dolnej strony oblewany jest tekstem i innymi elementami.

eTinnyMCE edytuj obraz Prezentacja wyrównanie float

Jak łatwo zauważyć wybierając określony typ wyrównania wypełniamy też pole styl. Pojawia się tam css-owa wersja tego co zamierzamy zrobić z naszą ilustracją.

Następne okienko to Rozmiary. Jako jedyne nie ma tutaj nic wspólnego ze stylami (choć mogłoby i może w przyszłości będzie choć nie byłabym tego pewna). Przypisane są bezpośrednio ilustracji jako width i height. W ten sposób możemy dostosować wielkość (w pikselach) naszego obrazu nie ingerując w jego rzeczywisty rozmiar. Obraz dalej będzie miał swoje oryginalne parametry, zostanie jedynie przeskalowany (ściśnięty) do wymiarów podanych w oknie. Pierwsza jest szerokość (width) a następnie wysokość (height). To stosunkowo łatwy sposób zmniejszania ilustracji. Nie zmienia to jej ciężkości (czyli rozmiaru w MB) ale umożliwia szybką i łatwo-dostępną zmianę. Konieczne jest aby okienko Zachowaj proporcje było zaznaczone. W takim wypadku uzupełniając jedno pole drugie zostanie automatycznie dostosowane tak aby obrazek zachował proporcje i z kwadratu nie stał się prostokątem.

Pionowy i poziomy odstęp to margines czyli odstęp naszej ilustracji od otaczających ją elementów (nie mylić z dopełnieniem czyli padding, czyli przestrzenią pomiędzy obrazem a przykładowo jego ramką). Odstęp jest szczególnie mile widziany gdy stosujemy wyrównanie Lewe. Tekst opływa wtedy obraz z prawej strony i zaczyna się w momencie gdy kończy się obraz. W przypadku vertical-align brane są także pod uwagę spacje tutaj tak nie ma. Dlatego też przydaje się zastosowanie margin-right.

Zostało nam jeszcze Obramowanie. Również jest uzyskiwane dzięki stylom (zanim bloksowy TinyMCE przeszedł uaktualnienie ramka była przypisana bezpośrednio jako border="wielkość" co było słabszym i już nie polecanym rozwiązaniem). Wpisujemy wielkość obramowania a w stylach pojawia się odpowiedni fragment kodu. Ramka to nie tylko wielkość ale także rodzaj i kolor. Wpisany jest solid black czyli pojedyncza, prosta, ciągła czarna linia. Dysponując stylami możemy wprowadzić także tutaj zmiany wybierając własny styl linii czy kolor. Jak możemy opisywać ramki opisane jest w notce Ramka jako dodatek do tła, część 2

I na koniec Styl. Jeżeli coś w tej zakładce zmieniano to w stylu są już odpowiednie dane. Można jednak dodać inne, które także będą odpowiednie dla ilustracji jak przykładowo padding czy background. Polecam zerknąć do zakładek na tym blogu i odszukać dział z linkami do notek o CSS.

Edycja obrazu: ZAAWANSOWANE

Tutaj możemy określić dodatkowe atrybuty obrazu. To rzeczywiście jest już zaawansowana zabawa choć niekoniecznie skomplikowana, po postu niepotrzebna na co dzień.

eTinnyMCE edytuj obraz Zaawansowany

Zaznaczając pole Alternatywny obrazek możemy pobawić się w całkiem zaawansowany sposób z naszą ilustracją. Możemy dobrać jej towarzysza. Alternatywna grafika wyświetli się po najechaniu kursorem na obraz jeżeli w polu for mouse over podamy jej adres. Drugie pole (for mouse out) służy do wyboru ilustracji która wyświetli się gdy usuniemy kursor znad ilustracji. Jeżeli go nie wypełnimy pozostanie tam obrazek alternatywny. Należy pamiętać, że ze względu na określone wcześniej atrybuty wielkości wszystkie obrazki powinny być tej samej wielkości (główny, alternatywny i następny).

Id to identyfikator, czyli unikalna jakby-nazwa. Identyfikator na stronie może pojawić się tylko raz a więc jeżeli zdecydujemy się przypisać identyfikator to za każdym razem powinien być inny. Po co nam to? Z dwóch powodów:

Kierunek języka ławo się domyślić co znaczy ale zastanawia mnie dlaczego akurat przy obrazku mamy łatwy dostęp do tego atrybutu.

Podobnie kod języka. Rozumiem, że może się zdarzyć sytuacja w której będzie to nam przydatne ale dlaczego akurat łatwy dostęp przy obrazku?

Mapa obrazu to coś jeszcze bardziej niezwykłego niż obraz alternatywny ale równocześnie znacznie trudniejszego (przykładowa mapa graficzna: genealogia.mrog.org - najedz kursorem na jedną z twarzy i zobacz co się dzieje). W okienku mapa obrazu podajemy tylko ścieżkę dostępu do mapy. Samą mapę sporządzamy już we własnym zakresie i wymaga ona nieco pracy. Dodatkowo taką mapę moglibyśmy zrobić nie poprzez html a dzięki css więc nie wiem czy to właściwe rozwiązanie.

Długi opis linku to znów alternatywa obrazu znajdująca się w osobnym pliku. Traktowana jest jako uzupełnienie alt. Podaje się ją w osobnym pliku może więc być dużo bardziej szczegółowa.


I to wszystko. Opis jest bardzo dokładny bo podobnie jak z edytorem, prosty jest dla zaawansowanych a zaawansowany dla początkujących. Mój obszerny opis jest dla początkujących choć niekoniecznie bardzo zielonych. Jeżeli mimo wszystko opis jest niejasny to zapytaj się w komentarzu, pokażę paluszkiem i wyjaśnię innymi słowami, może dzięki temu będzie jaśniej.

Powiązane notki:

niedziela, 31 października 2010, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
Gość: ada, *.xdsl.centertel.pl
2010/11/14 11:23:02
witam. Napisałam do Pani mail z zapytaniem. Jesli znalazłaby Pani chwilkę, to prosze o odpowiedź. Dziękuję i pozdrawiam.
Ada
-
2010/11/15 11:08:43
Witam, założyłam dwa blogi na szablonach skopiowanych w pasku wygląd/szablony użytkowników - szukałam 3 szpalt.
Na pierwszym blogu kalendarzdietydykana.blox.pl mam aktywne wpisy, a na drugim najlepszadieta.blox.pl wpisy nie są aktywne. Na tym drugim blogu też korzystałam z szablonu użytego do bloga kalendarzdietydukana i też tytuły wpisów nie były aktywne.
Żeby sprawdzić czy i gdzie jest coś nie tak, podłaczyłam do bloga trzeciego naturalnesuplementy.blox.pl też dwuszpaltowy szablon jak na najlepszejdiecie - i też tutaj na nowym blogu tytuły wpisów nie są aktywne.

Czy może Pani sprawdzić co takiego się stało, że tytuły wpisów nie są aktywne i jak temu zaradzić.
Pozdrawiam
-
2010/11/15 11:51:45
Witam, odkryłam że ten mój blog, który miał aktywne tytuły wpisów miał też zaznaczoną optymalizację w wyszukiwarkach (nie znam platformy bloxa, dopiero się jej uczę, więc nie zauważyłam, że nie włączyłam w dwu kolejnych blogach optymalizacji. Po zmianie ustawień w panelu, tytuły wpisów stały się aktywne. Interwencja już nie jest potrzebna, choć warto może,aby gdzieś w widocznym miejscu ta informacja była podana. Pozdrawiam
-
kate_mac
2010/11/19 19:03:48
@najlepszaomega3
dokładnie to jest odpowiedz na twoje pytanie :D
przykro mi, że nie udzieliłam jej na czas ale sama sobie poradziłaś więc straty nie ma, jest jedynie zysk

w mojej opinii nowe blogi powinny mieć automatycznie włączoną optymalizację ale zapewne ze względu na powstanie nowego kodu (szablon new_age) zaniechano takiego działania

w swoim czasie sporo było pisania o tej optymalizacji, co jak i dlaczego; z biegiem czasu jednak temat umarł i tylko w postaci takich jak Twoje zapytań od czasu do czasu ożywa

Co do podawania informacji w widocznym miejscu to wydaje mi się że przed zmiana skórki edycji bloksa ta informacja była tuż przy polu zaznaczania

Tu u siebie musiałabym widocznie umieszczać całkiem sporo informacji. Staram się to robić, stąd w zakładkach wyróżnione są szczególnie polecane notki a i tak dostaje w tej sprawie zapytania czy to tu na blogu czy na maila; dla każdego co innego musiałoby być w widocznym miejscu a tak się nie da - polecam więc skorzystanie z wyszukiwarki; jeżeli ta bloksowa nie pomoże to każdą stronę można przeszukać korzystając z wyszukiwarki google, wystarczy wpisać obok szukanej frazy site:szablonykatemac.blox.pl i odpowiedzi szukasz tylko na moim blogu
-
2010/11/20 00:34:31
Witam, jestem w trakcie tworzenia bloga i mam kłopoty z boczną szpaltą. Chciałabym żeby dodatki, które wpisuje w polu na dodatkowy HTML były przesunięte nad archiwum (na samą górę szpalty). Po długich poszukiwaniach nie znalazłam nigdzie odpowiedzi na to pytanie.. co zrobić ? Zastanawia mnie jeszcze jak wstawić obrazki między poszczególne elementy szpalty, np między archiwum a "ostatnie wpisy". Byłabym wdzięczna za pomoc :)
-
w.pewnym.kraju
2011/01/04 07:47:23
Witam! Skorzystałam z Pani szablonu z kawą:) Oto adres bloga:
wpewnymkraju.blox.pl/html
Pozdrawiam serdecznie!
-
Gość: Altri consigli, 207.244.89.*
2016/01/26 13:31:25
thabks
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...