Blogerzy wszystkich platform, łączcie się!

Dyskusje Blogerów, Fotoblogerów i Vlogerów - fora blogowe, graficzne, ogólnotematyczne
rozmowy o blogach, porady, instrukcje, ciekawostki z internetu



::
Autor Wiadomość
Marmoladka 
WordPress.Klub


Pomogła: 2 razy
Dołączyła: 26 Mar 2015
Posty: 5
Miasto: Warszawa

Wysłany:    [Blogger] Jak powiększyć miniatury popularnych postów?

Ostatnio postanowiłam dodać do kolumny widget "Popular Posts". Ale zdjęcia w nim są małe. Chciałam je powiększyć w html, co się udało, niestety w tedy jakość zdjęć się psuje. :(

Oryginalnie:


Html:

Kod

#PopularPosts1 img{float: left;
margin: 0 15px 0 0;
border-radius: 2px;
display: block;
height: 72px;
position: relative;
width: 72px;
padding: 0;}
#PopularPosts1 dd{line-height:22px;margin:0;padding:8px 15px 8px 10px;position:relative;min-height:55px;border-left:3px solid transparent;border-bottom: 1px solid #f4f4f4;}



Po zmianiach:


Html:

Kod

#PopularPosts1 img{float: left;
margin: 0 15px 0 0;
border-radius: 2px;
display: block;
height: 142px;
position: relative;
width: 216px;
padding: 0;}
#PopularPosts1 dd{line-height:22px;margin:0;padding:8px 15px 8px 10px;position:relative;min-height:55px;border-left:3px solid transparent;border-bottom: 1px solid #f4f4f4;}



Co powinnam w tym poprawić, lub dopisać, aby zdjęcia wyglądały lepiej? :zawstydzony:

[ Komentarz dodany przez: Htsz: 2017-03-03, 17:31 ]
UWAGA

zmiany w adresach URL są na tyle częste, że rozwiązania javascript przestają być skuteczne, bo trzeba je ciągle poprawiać lub zmodyfikować by ignorowały nowe parametry. Zamiast tego możesz wykorzystać rozwiązania systemowe, bo blogger już w 2016 roku przygotował odpowiedni kod. Instrukcję znajdziesz niżej: zmiana rozmiaru miniatur bez użycia javascriptu
 
  podziel się tym postem na:






Darmowa rejestracja - utwórz konto na forum --- Zaloguj się na swoje konto --- Polub Blogowicza na FB!

Htsz 
Blogger Top Contributor
Blogowicz.Team


Zaproszone osoby: 82
Imię: Arkadiusz (Arek)
Pomógł: 756 razy
Wiek: 31
Dołączył: 01 Sty 2006
Posty: 8746
Miasto: Wroclove City

Wysłany: 2015-05-15, 16:55   Jak powiększyć obrazy w #PopularPosts1 bez utraty jakości?

Zmiany w CSS niewiele dadzą. Pliki źródłowe z obrazkami mają wielkość 72x72 piksele, więc jak zmienisz rozmiar w stylu, to nienaturalnie je powiększysz. Będą rozmazane i rozpikselowane tak jak to widać na zrzutach ekranu powyżej.

W wątku dotyczącym edycji zdjęcia profilowego podałem skrypt, który powiększa obrazy znajdujące się w boxie z odpowiednią klasą/identyfikatorem. Dodaj go do źródła szablonu lub w gadżecie (ale poniżej popularnych postów) i zmień identyfikator na #PopularPosts1

//edit

To jednak nie działa tak jak przypuszczałem. Poniżej zamieszczam poprawny kod JavaScript, który należy umieścić w gadżecie pod popularnymi postami (HTML/JavaScript) lub w źródle szablonu tuż przed </body>:

Wiadomość (widoczna dla zarejestrowanych)


zamiast "s222-c" można wprowadzić inny wymiar dla kwadratów albo zrobić prostokąt w ten sposób:
Wiadomość (widoczna dla zarejestrowanych)


Jeżeli nie działa, to warto sprawdzić jaki ID ma gadżet, może kończy się na 2.

Oprócz tego należy dopisać do CSS taki kod:
Wiadomość (widoczna dla zarejestrowanych)
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum

Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się dodając link do tego forum na swoim blogu lub stronie!
Nie zapomnij kliknąć
lubię to! na facebooku lub dodać do obserwowanych na google+. :^^:
 
  podziel się tym postem na:
Marmoladka 
WordPress.Klub


Pomogła: 2 razy
Dołączyła: 26 Mar 2015
Posty: 5
Miasto: Warszawa

Wysłany: 2015-05-17, 14:13   [blogspot] Powiększenie zdjęć w Popularnych postach

Z zalecenia HTSZ. :) Dodaję informacje do tematu.

Skrypt do powiększenia zdjęć w Popularnych postach bez utraty ich jakości (width, height - zmienne, w zależności od tego, jakiej wielkości chcemy zdjęcie.)

Wiadomość (widoczna dla zarejestrowanych)
 
  podziel się tym postem na:
Htsz 
Blogger Top Contributor
Blogowicz.Team


Zaproszone osoby: 82
Imię: Arkadiusz (Arek)
Pomógł: 756 razy
Wiek: 31
Dołączył: 01 Sty 2006
Posty: 8746
Miasto: Wroclove City

Wysłany: 2015-05-17, 22:12   

Dzięki za dodanie :)

Wyjaśnię różnicę w skryptach, bo ich działanie jest takie same - zmiana rozmiaru z kwadratowej miniatury na zdefiniowany kształt. Mój skrypt wymaga dodatkowego zabiegu z CSS by nadpisać wartości dodane do HTML przez bloggera. Ten, który zamieściłaś nadpisuje również te wartości.

// edit.

Jeszcze jedna różnica. Drugi rozwiązanie może wymagać wstawienia odwołania do biblioteki jquery w sekcji head lub tuż nad tym skryptem.

Na przykład:

Kod

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'/>
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum

Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się dodając link do tego forum na swoim blogu lub stronie!
Nie zapomnij kliknąć
lubię to! na facebooku lub dodać do obserwowanych na google+. :^^:
 
  podziel się tym postem na:
Htsz 
Blogger Top Contributor
Blogowicz.Team


Zaproszone osoby: 82
Imię: Arkadiusz (Arek)
Pomógł: 756 razy
Wiek: 31
Dołączył: 01 Sty 2006
Posty: 8746
Miasto: Wroclove City

Wysłany: 2016-04-21, 14:59   PopularPosts1 w72-h72-p-nu - rozmyte miniatury

Z uwagi na różnego rodzaju usprawnienia kod bloggera zmienia się nieco i dzisiaj zauważyłem, że miniatury z gadżetu popularnych postów zmieniły parametr w URL.

Do tej pory był taki:

Kod

/s72-c/
a w tej chwili wyświetla się tak:

Kod

/w72-h72-p-nu/


Jeżeli korzystacie ze skryptów takich jak powyżej i wasze miniatury się popsuły, to musicie je zaktualizować. W przeciwnym razie wasze obrazki będą niewyraźne (rozmyte, "spikselowane").
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum

Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się dodając link do tego forum na swoim blogu lub stronie!
Nie zapomnij kliknąć
lubię to! na facebooku lub dodać do obserwowanych na google+. :^^:
 
  podziel się tym postem na:
Htsz 
Blogger Top Contributor
Blogowicz.Team


Zaproszone osoby: 82
Imię: Arkadiusz (Arek)
Pomógł: 756 razy
Wiek: 31
Dołączył: 01 Sty 2006
Posty: 8746
Miasto: Wroclove City

Wysłany: 2017-01-14, 03:01   rozpikselowane obrazki - popularne posty - w72-h72-p-k-nu

Blogger nie pozwala się nudzić :D Z tego co widzę kwestia parametrów w obrazkach popularnych wpisów nie wyklarowała się chyba do końca. Obecnie, zamiast wcześniejszego kadrowania mamy dodatkowy element: -k i parametr w URL obrazka wygląda tak:

Kod

/w72-h72-p-k-nu/

Przykładowe fragmenty javascript, który zawiera stary sposób wykrywania kadrowania:

Kod

replacement.replace(/w72-h72-p-nu/g,'s'+size+'-c');
lub
src.replace( 'w72-h72-p-nu', 's650' );


Jeżeli komuś ponownie popsuł się ten gadżet a jego szablon podmieniał rozmiary miniatur na większe, to polecam przejrzenie źródła szablonu w poszukiwaniu starego kodu - tj. -> w72-h72-p-nu i zamianę na nowy w72-h72-p-k-nu.
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum

Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się dodając link do tego forum na swoim blogu lub stronie!
Nie zapomnij kliknąć
lubię to! na facebooku lub dodać do obserwowanych na google+. :^^:
 
  podziel się tym postem na:
HitFan 
Blogger.Klub


Imię: Damian
Pomógł: 6 razy
Wiek: 21
Dołączył: 26 Lut 2016
Posty: 61
Miasto: Bytom

Wysłany: 2017-01-14, 17:21   

Właśnie przez ten -k mi też się rozleciało, na szczęście znalazłem co i jak i udało się rozwiązać problem. :)
 
  podziel się tym postem na:
Htsz 
Blogger Top Contributor
Blogowicz.Team


Zaproszone osoby: 82
Imię: Arkadiusz (Arek)
Pomógł: 756 razy
Wiek: 31
Dołączył: 01 Sty 2006
Posty: 8746
Miasto: Wroclove City

Wysłany: 2017-03-03, 16:11   Jak naprawić rozmazane miniaturki bez javascript?

Nowe wartości jakie można napotkać w miniaturach postów to:

Kod

s72-c-k-no
lub

Kod

w72-h72-p-k-no-nu
. Rozmazanie wynika najczęściej z faktu, że miniaturze nadano jakiś konkretny rozmiar w kodzie HTML lub CSS a jego źródło po zmianie parametru przez bloggera przywróciło miniaturę do wielkości 72x72. Problem będzie dotyczył wszystkich rozwiązań opartych na podmianie tego w javascript.

----------------
SKORZYSTAJ Z INSTRUKCJI PONIŻEJ
----------------

Na szczęście blogger się rozwija i dostarcza coraz więcej rozwiązań pozwalających na zbudowanie ciekawszych szablonów. Jednym z nich jest resizeImage, który pozwala określić wymiary obrazka systemowo. Dzięki temu nie trzeba co jakiś czas poprawiać kodu, bo znowu zmienił się parametr kadrowania.

Jeżeli wasze szablony wykorzystują stare metody, to znaczy, że ich autorzy przespali prawie rok zmian na blogspocie ;-)

Jak rozwiązać problem systemowo i skutecznie?
1) Przejdź do zakładki z motywem, zapisz kopię zapasową.
2) Edytuj kod html
3) z rozwijanej listy wybierz gadżet PopularPosts1
4) możesz też skorzystać z wyszukiwarki w kodzie by znaleźć szybko taki fragment:

Kod

resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;)

5) 72 określa rozmiar dłuższego boku obrazka a 1:1 proporcje kadrowania - w tym przypadku kwadrat 72x72px
6) Jeżeli miniatury mają pozostać kwadratami, modyfikujesz tylko pierwszą liczbę - na przykład na 300.
7) Jeśli obrazek ma być prostokątem, to wtedy dobierz odpowiednią proporcję - np. 2:1 lub 24:17 lub 16:9 - najlepiej ustawiać to pod proporcje swoich okładek, żeby nie obcinało ich z żadnej strony.
8) zapisz zmiany i sprawdź czy wszystko działa dobrze.
9) w przypadku większej ilości gadżetów z popularnymi postami, należy wykonać w każdym z nich kroki od 4) do 9) - oczywiście obrazki mogą mieć za każdym razem inne wielkości i proporcje.

Przykłady zastosowania systemowego rozwiązania:
http://www.styloly.com/ - pasek boczny, miniatury na całą szerokość
http://www.refreszing.pl/ - sidebar z miniaturkami na pół kolumny a sekcja dolna z dużymi obrazkami

drobna uwaga: polecam ustawianie miniatur nie mniejszych niż szerokość ekranów komórek - czyli 320 i 360, wtedy także na tych urządzeniach obrazki będą prezentowały się dobrze i wyraźnie.

---
Masz uwagi lub pytania? Zapytaj na forum, Zadziałało? Polub i daj znać innym w komentarzach na facebooku lub google plus.
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum

Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się dodając link do tego forum na swoim blogu lub stronie!
Nie zapomnij kliknąć
lubię to! na facebooku lub dodać do obserwowanych na google+. :^^:
 
  podziel się tym postem na:
Wyświetl posty z ostatnich:   
::
Odpowiedz do tematu
Nie możesz pisać nowych tematów. Zobacz szczegóły.
Nie możesz odpowiadać w tematach. Zobacz szczegóły.
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach
Nie możesz załączać plików na tym forum
Nie możesz ściągać załączników na tym forum
Dodaj temat do Ulubionych
Wersja do druku

Skocz do:  

Powered by phpBB & Weblove.pl © 2006-2017 Wrocław | modified by Przemo © 2003 phpBB Group.
skocz na górę   |  shoutbox
 
Dodaj na Facebooku:
Dodaj na Google+:


Zobacz także:


Szablony wordpress
kod zniżkowy -10% za licencję
w koszyku wpisz: Blogowicz
Wyszukaj na Blogowiczu:
snapchat blogowicz instagram blogowicz