Forum Blogowe 17 lat!

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
FAQFAQ    UżytkownicyUżytkownicy  grupa Blogger Polska! na FBBlogger Polska!  GrupyGrupy  regulaminRegulamin RejestracjaRejestracja  ZalogujZaloguj

»  »  »  »  ::
Przesunięty przez: Htsz
2014-10-05, 00:07
Autor Wiadomość
ajditia 
Blogger.Klub

Dołączyła: 16 Maj 2014
Posty: 0
Wysłany:    Jak przenieść zdjęcie-miniaturę z posta nad jego tytuł?
Mam problem - męczę się właśnie z designem bloga (ten z btemplates już mnie zaczyna denerwować). Chciałabym, aby obrazek z posta znajdował się NAD tytułem, np tak jak u onelittlesmile


Nigdzie jeszcze takiego wątku nie znalazłam, a więc proszę o pomoc :)
 
  podziel si� tym postem na:



Utwórz darmowe konto na forum --- Zaloguj się --- Polub Blogowicza na FB!
Dołącz do grupy Bloggerów na FB

Htsz 
Blogger Product Expert
Blogowicz.Team


Zaproszone osoby: 84
Imię: Arkadiusz Narowski
Pomógł: 816 razy
Wiek: 38
Dołączył/a: 01 Sty 2006
Posty: 8948
Miasto: Wrocław
Wysłany: 2014-10-05, 00:04   Re: ikona wpisu nad tytułem
Ok, podjąłem się rozwiązania tego problemu tylko dlatego, że rzeczywiście nigdy podobne rozwiązanie nie było omawiane a część kodu mamy już gotową w innych wątkach.

Paulina na onelittlesmile używa skórki Breaker v0.1, która obecnie nazywa się Boxer. Ma ona zmodyfikowany szablon posta i wykorzystuje skrypt createSummaryAndThumb do tworzenia miniatur.

Uwaga! Zaawansowane zmiany w szablonie wykonujesz na własną odpowiedzialność. Przed jakimkolwiek działaniem wykonaj kopię zapasową i zapisz ją na dysku (opcję znajdziesz w zakładce szablon).

opcja I: podstawowe szablony bloggera (oprócz dynamicznych)

Tytuł będzie się pojawiał pod ikoną wpisu po kilku drobnych modyfikacjach.

1. Dotychczasowe tytuły zamykamy w tag warunkowy, który pokaże je jedynie na stronach, które nie należą do grupy indeks i archiwum (czyli wczyta kod jeżeli będą to strony postów lub statyczne).
odszukujesz:

Kod

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

zamieniasz na:
Wiadomość (widoczna dla zarejestrowanych)


2. Wykonujesz instrukcję z tematu o createSummaryAndThumb.

3. Modyfikujesz fragment wyświetlający miniaturę:

Kod

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></a></span>';
by wyglądał tak:
Wiadomość (widoczna dla zarejestrowanych)

jeżeli obrazek będzie za duży, to możesz dopisać sobie do CSS:

Kod

.post-summary-box img {
max-width: 800px;
}
gdzie 800 to maksymalna szerokość jaką ma mieć grafika.

opcja II: szablony pobrane z internetu

W przypadku tego, co masz obecnie na blogu - Resposive Review - jest nieco inaczej. On też jest zmodyfikowany i również korzysta z rozwiązania "create Summary And Thumb", więc część roboty masz już wykonaną.

1. odszukaj:

Kod

function createSummaryAndThumb(pID)
i zamień to na wersję, która pobierać będzie także tytuł:
Wiadomość (widoczna dla zarejestrowanych)

oraz:

Kod

createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
zmodyfikuj by wyglądało tak:
Wiadomość (widoczna dla zarejestrowanych)

2. Trzeba edytować teraz kod wyświetlający zdjęcie.
podmień:

Kod

imgtag='<div class="rt-img"><img src="'+img[0].src+'" /></div>';
na wersję z tytułem pod grafiką:
Wiadomość (widoczna dla zarejestrowanych)

3. Na koniec ustawienie by standardowy tytuł pojawiał się jedynie na określonych stronach.
Warunek z takiego:

Kod

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.title'>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
<b:else/>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
</b:if>
należy przerobić na taki:
Wiadomość (widoczna dla zarejestrowanych)

Na koniec pozostają kwestie wielkości i ułożenia zdjęcia. Należ zmienić CSS dla .rt-img img oraz .rt-img - min. skasować float, display, zmienić dopuszczalną szerokość i wysokość oraz wyśrodkować.

posta pisałem "z palca", ale wszystko powinno działać po zapisaniu zmian. Gdyby coś poszło nie tak, to muszę mieć wgląd w źródło z aktywnym problemem.
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum oraz grupy Blogger Polska! na fb
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ę, udostępniając link do tego forum na swoim blogu, fanpejdżu lub stronie!
Nie zapomnij kliknąć lubię to! na facebooku. :^^:
 
  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-2024 Wrocław | modified by Przemo © 2003 phpBB Group.
↑ skocz na górę ↑   |  shoutbox
 
Dodaj na Facebooku:

Zobacz także:


Szablony blogów i stron na wordpress
ogromna baza motywów WP, podzielona na kategorie tematyczne. Proste, jednostronicowe wizytówki lub zaawansowane układy, także z funkcją sklepu internetowego (ecommerce).
Wyszukaj na Blogowiczu:
snapchat blogowicz instagram blogowicz