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/
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
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
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
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.
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ć?
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ę.
usuń style z fotek oraz osadź je w jakimś div ie tak jak u mnie
<div><img src="http://4.bp.blogspot.com/_b0xJ7qk6DTc/TBHyS-j1afI/AAAAAAAAAqE/kVeMcPwYoBU/s144/Flower.jpg" border="0" width="144"><img src="http://4.bp.blogspot.com/_b0xJ7qk6DTc/TBHyS-j1afI/AAAAAAAAAqE/kVeMcPwYoBU/s144/Flower.jpg" border="0" width="144"><img src="http://4.bp.blogspot.com/_b0xJ7qk6DTc/TBHyS-j1afI/AAAAAAAAAqE/kVeMcPwYoBU/s144/Flower.jpg" border="0" width="144">
</div>
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.
skorzystaj np. z Lightbox image viewer - stosowny opis już dołączony do bloga
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
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?
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.
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.
URL bloga - możne ramka jest wywoływana na innym elemencie, prawidłowe parametry są podane pod grafiką bez obramowania
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.
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
Mam pytanie jak zrobić żęby nie musieć wstawiać tego do każdego zdjęcia żeby w ogóle nie było ramek?
Bardzo dziekuje. Super wytlumaczone!
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
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...
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ę :)
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.
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
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.
@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.
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. ;-)
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.
Przyda się ten artykuł, będę odsyłał do niego klientów.
Pozdrawiam
A może ktoś wie, jak wklejać zdjęcia do komentarz?
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
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
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ź
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.
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: