Widget zależny od wyszukiwanej etykiety



Ten widget jest zależny od etykiet i wyświetlany tylko podczas wyszukiwania wybranych - Zobacz opis

piątek, 15 października 2010

Wydrukuj to...

Grafika - nieco inaczej...


Typowy kod HTML dodanego zdjęcia możemy podzielić na trzy sekcje styl wyświetlania adres oryginalnego pliku oraz jego miniaturę wyświetlaną na stronie bloga.  Sekcje te widać w kolorkach poniżej.


<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5N_TCqNDtn9zRk6dxse6-kILyhTTobkI6cdH42ZyIjWgO5E_WrdptFDIk6jw8gAGOLH6DbRcg1XNwowE_TBMnfzWNrkmHPR-hF0arI3x1L0SQZxljK1o3Al31RIXa3VfywxydYLHGRUg/s1600/Flower.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> 
<img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5N_TCqNDtn9zRk6dxse6-kILyhTTobkI6cdH42ZyIjWgO5E_WrdptFDIk6jw8gAGOLH6DbRcg1XNwowE_TBMnfzWNrkmHPR-hF0arI3x1L0SQZxljK1o3Al31RIXa3VfywxydYLHGRUg/s320/Flower.jpg" width="320" />
 </a>
 </div> 


Tak trochę od środka na początku zajmijmy się sekcją miniatury:

Zmiana wielkości obrazu.
Widać że są w nim parametry naszego wczytywanego zdjęcia height oraz width
Oprócz opisanego tutaj sposobu zmiany w edytorze WYSIWYG możemy dokonać zmian niestandardowych w trybie edycji HTML.
Jak nam wiadomo parametry height oraz width w tagu IMG odpowiadają za rozmiar wyświetlanej grafiki - zatem możemy za ich pomocą regulować dowolnie wielkość wyświetlanej miniaturki obrazu.
Jeśli chcemy zmienić grafikę do dowolnej szerokości możemy a nie znamy adekwatnej jej wysokości tak aby współczynnik kształtu nie został zmieniony a tym samym nasze zdjęcie nie okazało się dziwnie rozciągnięte możemy usunąć parametr wysokości. Zostanie on więc dobrany automatycznie przez przeglądarkę. Przykład: oryginalna miniaturka naszego zdjęcia: 250x320px





zmieniamy jej szerokość do 450px /poprawnie usuwamy parametr height/




zmieniamy jej szerokość do 450px /parametr height nie został zmieniony i mamy dość dziwne proporcje/

Aby nasze zdjęcie było po zwiększeniu bardziej ostre musimy też dobrać kolejny z parametrów tagu IMG Przyjrzyjmy się więc adresowi src pliku miniatury:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5N_TCqNDtn9zRk6dxse6-kILyhTTobkI6cdH42ZyIjWgO5E_WrdptFDIk6jw8gAGOLH6DbRcg1XNwowE_TBMnfzWNrkmHPR-hF0arI3x1L0SQZxljK1o3Al31RIXa3VfywxydYLHGRUg/s320/Flower.jpg

Publikując w blogu zapisujemy w Picasie plik oryginalny a system ten samoistnie generuje nam kilka ich rozmiarów:
  • 72px  - s72
  • 144px  - s144
  • 288px  - s288
  • 320px  - s320
  • 640px   - s640
  • 720px   - s720
  • 800px  - s800
  • 1600px   - s1600
Wymiar ten należy tak dopasować aby był zbliżony do naszej szerokości. np mając szerokość 700px s320 zamienimy na s720 - proste prawda

 Obramowania itp style
W moim blogu ramki są dodawane automatycznie ale jeśli ich nie chcemy w danej fotce można je usunąć dopisując parametr style='border:none' efekt poniżej






<img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5N_TCqNDtn9zRk6dxse6-kILyhTTobkI6cdH42ZyIjWgO5E_WrdptFDIk6jw8gAGOLH6DbRcg1XNwowE_TBMnfzWNrkmHPR-hF0arI3x1L0SQZxljK1o3Al31RIXa3VfywxydYLHGRUg/s320/Flower.jpg" width="320" style='border:none' />


Jakieś pytania - pisać chętnie poruszymy dalszą dyskusje....

Teraz nieco o adresie oryginalnego pliku ..

Otwieranie w nowym oknie... 
Domyślnie nasze obrazy otwierają się w oknie bloga. Zachodzi jednak konieczność otwarcia ich w innym oknie, tak więc do edycji kodu użyjemy parametru target .


<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5N_TCqNDtn9zRk6dxse6-kILyhTTobkI6cdH42ZyIjWgO5E_WrdptFDIk6jw8gAGOLH6DbRcg1XNwowE_TBMnfzWNrkmHPR-hF0arI3x1L0SQZxljK1o3Al31RIXa3VfywxydYLHGRUg/s1600/Flower.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="fotka">

 Teraz nasze zdjęcie otworzy się po kliknięciu w nowym oknie. Jeśli wszystkie obrazy będą mieć taki sam unikatowy atrybut okna w naszym przypadku fotka to po kliknięciu na kolejne z nich to poprzednie zostanie zastąpione nowym
przykład poniżej:





A teraz unikatowe nazwy okien





Jeśli chcemy aby odsyłacz załadował nam oryginalny rozmiar możemy skrucić masz adres usuwając jego końcówkę: 

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5N_TCqNDtn9zRk6dxse6-kILyhTTobkI6cdH42ZyIjWgO5E_WrdptFDIk6jw8gAGOLH6DbRcg1XNwowE_TBMnfzWNrkmHPR-hF0arI3x1L0SQZxljK1o3Al31RIXa3VfywxydYLHGRUg/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">

Usuwanie efektu kliknięcia...
Jeśli nie chcemy aby nasza miniatura otwierała cokolwiek w naszym adresie usuwamy wartość href: zastępując ją #  

<a href="#" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">

Zaawansowani i nieco odczytani będą bić na alarm że to nie jest rozwiązanie, lecz w kodzie tym mamy jeszcze inne informacje stylu o których początkujący user ma prawo nie wiedzieć i ich usunięcie może wywołać niepożądany efekt.

Galerie Lightbox image viewer...
 Jak zainstalować Lightbox'a w naszym blogu dowiesz się z tego posta jego działanie  w tych przykładach zostało celowo wyłączone z uwagi na charakter posta


To by było na tyle w tym temacie ;) zapraszam do dyskusji i  ew pytań ...

© Fotki by: PWA
10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Napisano już 31 komentarze/y. Dyskusja nabiera poważnego tempa...
Już teraz przyłącz się do dyskusji i dodaj nowy komentarz


Podoba ci się modyfikacja sekcji komentarzy - opis znajdziesz tutaj: Tuning komentarzy

Pemberley pisze...

Bardzo ciekawe!! Ale jesli akurat szablon ma orginalne ustawienia bez ramek - mam wlasnie to border none, to jak dodac ramke? Chetnie do roznych zdjec dodawalabym rozne ramki- tlo bloga mam zielone, ale ramka zielona nie pasuje do wszystkich zdjec, stad koniecznosc stosowania uniwersalnej czerni lub popielu.

ewarub pisze...

Ja też bym chciała, żeby ramka była szersza i na dodatek nie biała, a w innym kolorze, w zależności od zdjęcia. Jak to zrobić?

Grzyb pisze...

Chcę wstawić kilka fotek obok siebie wszytkie widziane są jedna pod drugą bez względu na wielkość - szerokość posta jest wystarczająca by mogły zmieścić 2-3 obok siebie - skruciło by mi to długość strony i byłoby w kompozycji bloga ciekawsze i nie takie nudne dla odbiorcy. Jak to zrobić? Dziekuję.

Anonimowy pisze...

Można by prosić, o opisanie, jak zrobić, żeby, jak kliknę na zdjęcie to ono powiększało się w tym samy oknie, ale jakby nad treścią. Chodzi mi o takie jakby nie okno, ale po prostu zdjęcie.

stach pisze...

skorzystaj np. z Lightbox image viewer - stosowny opis już dołączony do bloga

Anonimowy pisze...

Git opis. Mam taki przypadek: przy usunięciu wysokości i edycji szerokości fotka sama dopasowuje się proporcjonalnie - jak w Twoim opisie. Problem w tym że przy postowaniu fot i podawaniu tylko szerokości za każdym razem defaultowo mam już szerokość px = s1200 (więc prawidłową), a fota nadal pozostaje z bardzo słabą rozdziałką zupełnie bez ostrości (plik postowany ma 1200 x 800). Dodatkowo jest ucięta w połowie jakby coś ograniczało zasięg jej wyświetlania. Pzdr

Anonimowy pisze...

W sprawie powyższego posta już sobie poradziłem zmieniając w Ustawieniach->Edytor postów-> na Zaktualizowany (wcześniej miałem Starszy). Jednak problem z obciętym po prawej stronie zdjęciem pozostał. Jak poszerzyć jego granice żeby całe zdjęcie 1200x800 było wyświetlane?

aza pisze...

A jak ustawić w menu dwa obrazki (widgety Image) obok siebie (www.babytravels.pl) Zrobiłem z float: left i marginesami ale wszystko się rozjeżdża w różnych przegladarkach.

Andrzej Kosiorowski pisze...

Chcę pozbyć się ramek zdjęć zg. z instrukcją, ale nie działa. Do tagu img wklejałam na końcu: style='border=none' , style='border:none' (bo Admin użył w opisie obu - które jest poprawne?), a także style="border=none" i style="border=none" (tzn. " zamiast ' - tu też nie wiem, które jest poprawne) i niczego to nie zmienia. Ramka pozostaje.

stach pisze...

URL bloga - możne ramka jest wywoływana na innym elemencie, prawidłowe parametry są podane pod grafiką bez obramowania

Andrzej Kosiorowski pisze...

papuziblog.blogspot.com post: Dobre wychowanie 3

Wpisałam, jak radzi Admin, w tagu img.

Ale chyba ma też znaczenie czy używa się dwukropka czy znaku równości, czy też pojedynczego lub podwójnego cudzysłowa. Nie wiem, które jest poprawne.

stach pisze...

wiec tak jeśli border= to 0 a jeśli CSS style to : tak jak pod obrazkiem w kodzie

natomiast w twoim przypadku to nie border tylko padding: i background: powodują efekt tego obramowania
wyszukaj: .post-body img i usuń te linie lub zmień wg własnego uznania, podając padding:0px; też usuniesz to obramowanie, w razie czego pisz na maila

Kóba pisze...

Mam pytanie jak zrobić żęby nie musieć wstawiać tego do każdego zdjęcia żeby w ogóle nie było ramek?

Katarzyna pisze...

Bardzo dziekuje. Super wytlumaczone!

DP pisze...

Czy jest możliwe żeby ustawić jednym wpisem w poście wielkość wszystkich fot, tak aby nie zmieniać parametrów przy każdym zdjęciu?
Pozdrawiam

Domi pisze...

A jak wstawić cinemagraph (http://cinemagraphs.com/) żeby sie "ruszało" od razu na blogu, a nie dopiero po kliknieciu na zdjęcie i otwarciu go w oddzielnym okienku? Bo jak wstawiam zwyczajnie jak zdjęcie to sie nie rusza...

Paul pisze...

A ja mam 2 sprawy. Pierwsza to chciałbym uzyskać blog szeroki tak jak ten http://www.fashionbitsandbobs.com/ wydaje mi się, że to już nie tylko spawra ustawienia szablonów ale w ogóle kodu html, prawda?
I druga sprawa, jak ustawić automatyczne przeskalowywanie obrazów?
Z góry dziękuję :)

kwiatuch pisze...

Czy jest możliwość wklejenia .png bez ramy z prześwitem? Myślałam, że usunięcie ramek dookoła zdjęć coś da, ale widzę, że nie o to chodzi.

Anonimowy pisze...

Witam

Mam problem dodaję zdjęcia w rozmiarze 660x237 a po zapisaniu posta pomniejsza mi zdjęcie o 2 razy. Proszę o pomoc - np. ostatni wpis

Krwisty pisze...

Ja mam inne pytanie. Jak zrobić, by zdjęcia które zamieszczam w poście, miały te same rozmiary automatycznie? Chodzi o to, by na głównej stronie były zawsze takie same (szerokość i wysokość)przy każdym artykule.

stach pisze...

@Robert Dodać do szablonu arkusz CSS .post-body img {width:430px!important;} - width:430px; ustawi automatycznie szerokość w tym wypadku 430px
lub height:300px; wysokość (tutaj 300px ,!important - opcjonalnie jeśli bez tego nie zaskoczy)
Ustawianie obu wartości nie jest wskazane, bo będą siadać proporcje grafiki. Najlepiej jest manewrować jedną ze zmiennych, chyba że zamieszczasz zawsze takie same proporcje obrazu,np. wszystkie fotki kadrowane poziomo,


Istnieje też sposób z jQuery (images resizer) notabene ustawiony na moim blogu studia ale nie mam gotowego kodu musisz go poszukać na google.

Krwisty pisze...

Ok dzięki, pokombinuję na jednym z moich mniejszych blogów, jak wyjdzie, to spróbuję na głównym WinterSzus.pl. Bo od dawna wkurza mnie nierówny wygląd zdjęć na głównej. Pozdrawiam. Fajny masz ten blog. Pomocny. ;-)

Krwisty pisze...

Właśnie zastosowałem się do Twoich rad Stachu i "gra muzyka". Wkleiłem tego CSS z wysokością i szerokością, w miarę ustawiłem kwadrat i jest ok. Na stronie głównej jest fajnie, bo zdjęcia małe, ale niestety po otwarciu jakiegoś artykułu, w którym zamieszczałem także fotki, one automatycznie też się zmniejszyły, a to już kiepsko wygląda. Chciałem tylko małe i równe zdjęcia na głównej stronie, a po rozwinięciu artykułu, fajnie jakby inne fotki w nim zawarte miały większe rozmiary, bez klikania w nie.

Szablony allegro pisze...

Przyda się ten artykuł, będę odsyłał do niego klientów.
Pozdrawiam

_leszek pisze...

A może ktoś wie, jak wklejać zdjęcia do komentarz?

Anonimowy pisze...

jednak mam problem jak edytowac zdjecie. kiedy nie usune height to zdjecie rozciaga sie na calej stronie. Natomiast kiedy juz to usune zdjecie pokazuje sie w oryginalnych rozmiarach zapisanych w picasa. Ale ni jak nie moge zmienic jego rozmiaru, zeby bylo mniejsze

Tomaszi Aviation Photography pisze...

Witam i mam pytanie : jak mam ustawić zdjęcia ( miniatury ) tak aby wyświetlały się jedna obok drugiej ? W tej chwili samoczynnie ustawiają się pod sobą . Szerokosc bloga mam odpowiednią. pozdrawiam

Deyenn pisze...

Hej, mam problem, bo chcem aby wszystkie zdjęcia na blogu miały jednakowe rozmiary. Proszę o pomoc
Z góry dziękuję za odpowiedź

Monika Zawadzka pisze...

Dość podstawowy kurs dla osób chcących zająć się tworzeniem stron www https://dolp.pl/strony-www i to zupełnie od podstaw. Należy najpierw dobrze poznać elementy języka HTML i wtedy możemy stawiać dalsze kroki.

Izabella Nowotka pisze...

Uważam, iż samo pozycjonowanie witryn jest bardzo ważne i moim zdaniem, iż warto się tym zainteresować. Niedawno o tym czytałem w artykule http://www.gdansk4u.pl/pozycjonowanie-stron-www/ i oczywiście, uważam że takie rzeczy są całkiem istotne. Przede wszystkim, iż teraz chyba każdy chce aby być wysoko w wyszukiwarce internetowej.

Prześlij komentarz

Zapraszam do komentowania i wyłapywania ew. błędów... Twoje IP: