phpRS 2.8.x : phpRS Fórum
Toto fórum je určené výhradně k diskuzi o verzích phpRS v2.8.x.
phpRS - redakční a informační systém
posunutí obrázku ve clanku
Zaslán uživatelem/kou: marty (IP adresa zaznamenána)
Datum: 2008-09-15, 14:36

Ahoj, potreboval bych po vas malou drobnost se kterou si nevim rady:
mam clanek a v nem fotku. je se zarovnanim vpravo a nahled je zapnut.
vysledek vidite zde:
[http://www.bxclub.com/a/obrazek_hnf.jpg] ,
a potreboval bych ten obrazek posunout o par mm doprava, tj jej zarovnat s textem.
Obrazek mi pripada jako by mel okolo sebe vetsi ohraniceni, neb mysku nemam jeste na obrazku a uz je mozno na to kliknout.

poradite mi kde je zakopany pes? prohledal sem CSS a trclanek.php ale nikde sem nic nenasel co by k tomu ohraniceni/okrajum se psalo.

predem vam dik

marty

ICQ: 179653900
skype: marty_hranice
| www.hnfond.cz | | www.struhlovsko.cz | www.bxclub.com | www.r21club.com | www.palenice.net



Celkem upraveno 1×. Poslední úprava marty v 15.09.2008 14:36.

Re: posunutí obrázku ve clanku
Zaslán uživatelem/kou: mr3ska (IP adresa zaznamenána)
Datum: 2008-09-15, 14:52

no jesi vkládáš obrázek přes FCK editor tak sis tam nastavil okraje obrázku
vlastnosti hspace a vspace - tohle se mi u FCK už stalo, že sem si tam vložil omylem okraje

Re: posunutí obrázku ve clanku
Zaslán uživatelem/kou: marty (IP adresa zaznamenána)
Datum: 2008-09-15, 15:45

vkladam ciste html a obrazky pres interni galerii... proste original jak to jirka naprogramoval

ICQ: 179653900
skype: marty_hranice
| www.hnfond.cz | | www.struhlovsko.cz | www.bxclub.com | www.r21club.com | www.palenice.net



Celkem upraveno 1×. Poslední úprava marty v 15.09.2008 15:46.

Re: posunutí obrázku ve clanku
Zaslán uživatelem/kou: pa3k (IP adresa zaznamenána)
Datum: 2008-09-16, 13:23

Pohral by som sa s CSS:

.cla-obsah img {
margin:0 0 1em 1em;
}

prípadne si pridaj CSS triedu do generovania značky v súbore trclanek.php funckai DekodujZnackaObrazek niekde okolo riadkov 411 - 420. hľadaj text - // zpracovani obrazku

Re: posunutí obrázku ve clanku
Zaslán uživatelem/kou: marty (IP adresa zaznamenána)
Datum: 2008-09-18, 14:29

diky pomohlo toto:

.cla-text img { margin:0 -1em 1em 1em; }

viz: [http://www.hnfond.cz]


ICQ: 179653900
skype: marty_hranice
| www.hnfond.cz | | www.struhlovsko.cz | www.bxclub.com | www.r21club.com | www.palenice.net



Celkem upraveno 2×. Poslední úprava marty v 18.09.2008 14:30.

Re: posunutí obrázku ve clanku
Zaslán uživatelem/kou: humanisti.sk (IP adresa zaznamenána)
Datum: 2011-01-20, 20:45

Riešim možno podobný problém. Text v článkoch je doslova nalepený na obrázky. Ale skúšal som to cez CSS .cla-text img, lenže po úprave CSS to zasahuje na všetky obrázky, aj na tie, pre ktoré používam inú triedu, napríklad .autor img. Skôr by som potreboval možno niečo také:

Spraviť len margin-right: 7px; pre obrázky osadené vlevo, a pre obrázky osadené vpravo margin-left: 7px;

A do súboru trclanek.php by som len niekam pridal niečo tak, aby sa potom v článkoch načítala aj trieda class="vlevo" u tých obrázkov, ktoré budú zarovnané vľavo.

Do šablóny, pri vkladaní článku zadávam len: <obrazek id="" zarovnani="" nahled="">

A v článku sa potom to ukáže v zdrojovom kóde: <a href="storage/201....jpg" target="_blank"><img src="storage/n201.....jpg" align="left" width="120" height="100" alt="obrazok" title="obrazok" /></a>

A keby som nejakou opravou v trclanek spravil niečo tak, aby to už načítalo dajme tomu takto:

<a href="storage/201....jpg" target="_blank"><img src="storage/n201.....jpg" align="left" width="120" height="100" alt="obrazok" title="obrazok" class="vlevo" /></a>

A v freestyle.css by som pridal:

.cla-text .vlevo {
margin-right: 7px;
}

Alebo ako postupovať? Ak chcem dosiahnuť len to, aby sa obrázky tak nelepili na text. Aby tam vznikla nejaká medzera, ktorú si potom upravím podľa potreby, dajme tomu na asi 7px.



Re: posunutí obrázku ve clanku
Zaslán uživatelem/kou: pa3k (IP adresa zaznamenána)
Datum: 2011-01-21, 08:19

Na takéto srandy je ideálne jQuery.
[http://api.jquery.com/attribute-contains-prefix-selector/]
[http://api.jquery.com/attribute-contains-word-selector/]
[http://api.jquery.com/addClass/]
Ak to chceš robiť na úrovni serveru, musíš upraviť generovanie pseudotagu "obrazek", tak aby atribút "zarovnani" generoval s príslušnou CSS triedou, pomocou ktorej už nastavíš príslušný margin. Mimochodom, pozor na double margin bug v IE ;-)



Celkem upraveno 2×. Poslední úprava pa3k v 21.01.2011 08:24.

Re: posunutí obrázku ve clanku
Zaslán uživatelem/kou: humanisti.sk (IP adresa zaznamenána)
Datum: 2011-01-21, 09:24

Čo bolo zlé na mojom včerajšom komentári, že bol zmazaný?

Re: posunutí obrázku ve clanku
Zaslán uživatelem/kou: pa3k (IP adresa zaznamenána)
Datum: 2011-01-21, 09:33

Myslím, že bol vložený trikrát.
K téme: všimol som si, že zarovnanie obrázku pomocou align="left" a align="right" spraví okolo textu medzeru, pričom zarovnanie pomocou float tú medzeru nespraví. Ak používaš pseudotag "obrazek" mal by si tam medzeru mať. Mrkni napríklad sem: [http://www.nadacetlapka.cz/2011010002-pozdrav-od-smolicka-a-pacholicka] - text nie je nalepeny priamo na obrázku. Neviem ako sa dá formátovať veľkosť tohto odsadenia, ale ak použiješ float, bude treba aj triedu s marginom a to jedine cez úpravu generovania pseudotagu "obrazek" alebo aj pomocou jQuery, ako som písal vyššie. Inak zmena generovania obrazku nie je ťažká, na tomto webe som to prerábal tak, aby na to bol zavesený javascript pre zobrazenie v lightbox-e.



Celkem upraveno 1×. Poslední úprava pa3k v 21.01.2011 09:35.

Re: posunutí obrázku ve clanku
Zaslán uživatelem/kou: humanisti.sk (IP adresa zaznamenána)
Datum: 2011-01-21, 09:51

Trikrát. Lebo som sa pokúšal priložiť aj obrázok, na ktorom je to zvýraznené. Mám niečo od samého začiatku webu tak nastavené, že nie sú medzi obrázkami a textom medzery, a platí to aj pre pseudotagy aj keď to vložím cez DIV:

<div class="obrazok">
<a href="Zadajte adresu obrázka v pôvodnej veľkosti*" target="_blank">
<obrazek id="Zadajte ID zmenšeného obrázka" zarovnani="nastred" nahled="ne"></a><br>
Zadajte popis obrázka.
</div>
<p>Text článku.</p>

Tento obrázok som chcel včera priložiť, pre názornú ukážku: [http://img683.imageshack.us/img683/3306/medzeratextobr.jpg]

Re: posunutí obrázku ve clanku
Zaslán uživatelem/kou: humanisti.sk (IP adresa zaznamenána)
Datum: 2011-01-21, 10:00

P: a to jedine cez úpravu generovania pseudotagu "obrazek"

Kde, v ktorom súbore, sa to dá upraviť? Ak by bolo zadané VLEVO, pridalo by to class="vlevo", ak by bolo zadané vpravo, pridalo by to class="vpravo", a v CSS by som len pridal tak, aby podľa tých class bolo odsadenie textu.


Re: posunutí obrázku ve clanku
Zaslán uživatelem/kou: pa3k (IP adresa zaznamenána)
Datum: 2011-01-21, 10:09

No návod máš naznačený aj na úrovni servera ak na úrovni klienta. Daj vedieť ako si sa to rozhodol riešiť.

Re: posunutí obrázku ve clanku
Zaslán uživatelem/kou: pa3k (IP adresa zaznamenána)
Datum: 2011-01-21, 10:12

[http://www.phprs.net/forum/read.php?32,33264,33271#msg-33271]
;-)

// zpracovani obrazku
     if ($pocetobr==1):
       if ($nahled=='ano'):
         // nahled
         if ($zaobrazku=='center'):
           $sestaveny_obr="<div align=\"center\"><a href=\"".$odkaz_obrazek."\" target=\"_blank\"><img src=\"".$pole_obrazek["nahl_poloha"]."\" width=\"".$pole_obrazek["nahl_width"]."\" height=\"".$pole_obrazek["nahl_height"]."\" alt=\"".$pole_obrazek["nazev"]."\" title=\"".$pole_obrazek["nazev"]."\" /></a></div>";
         else:
           $sestaveny_obr="<a href=\"".$odkaz_obrazek."\" target=\"_blank\"><img class=\"img_".$zaobrazku."\"  src=\"".$pole_obrazek["nahl_poloha"]."\" align=\"".$zaobrazku."\" width=\"".$pole_obrazek["nahl_width"]."\" height=\"".$pole_obrazek["nahl_height"]."\" alt=\"".$pole_obrazek["nazev"]."\" title=\"".$pole_obrazek["nazev"]."\" /></a>";
         endif;
       else:
         // bez nahledu
         if ($zaobrazku=='center'):
           $sestaveny_obr="<div align=\"center\"><img src=\"".$pole_obrazek["obr_poloha"]."\" width=\"".$pole_obrazek["obr_width"]."\" height=\"".$pole_obrazek["obr_height"]."\" alt=\"".$pole_obrazek["nazev"]."\" title=\"".$pole_obrazek["nazev"]."\" /></div>";
         else:
           $sestaveny_obr="<img src=\"".$pole_obrazek["obr_poloha"]."\" align=\"".$zaobrazku."\" width=\"".$pole_obrazek["obr_width"]."\" height=\"".$pole_obrazek["obr_height"]."\" alt=\"".$pole_obrazek["nazev"]."\" title=\"".$pole_obrazek["nazev"]."\" />";
         endif;
       endif;
       // vysledny HTML kod
       $vysl=$sestaveny_obr;
     else:
       // chyba; obrazek nelze urcit nebo nebyl nalezen
       $vysl='<!-- obrazek id '.$idobrazku.' nenalezen -->';
     endif;
   endif;




Celkem upraveno 3×. Poslední úprava pa3k v 21.01.2011 10:23.

Re: posunutí obrázku ve clanku
Zaslán uživatelem/kou: pa3k (IP adresa zaznamenána)
Datum: 2011-01-21, 10:20

Už stačí len v CSS definovať margin pre príslušné triedy:
.img_left {}
.ing_right {}



Celkem upraveno 1×. Poslední úprava pa3k v 21.01.2011 10:23.

Re: posunutí obrázku ve clanku
Zaslán uživatelem/kou: pa3k (IP adresa zaznamenána)
Datum: 2011-01-21, 10:24

Upravil som to, možno tam budú chyby, netestoval som to, myslím, že z tohto popisu to už zvládneš upraviť sám.

Re: posunutí obrázku ve clanku
Zaslán uživatelem/kou: humanisti.sk (IP adresa zaznamenána)
Datum: 2011-01-21, 10:54

Pridal som.

Postupoval som takto:

V trclanek.php som pridal text: class=\"img_".$zaobrazku."\"

Ale až 2x, aj nižšie, k reťazcu: $sestaveny_obr="<a href=\"".$odkaz_obrazek."\" target=\"_blank\"><img src=\""...

A v CSS som pridal:

.cla-text .img_left {
margin: 4px 6px 6px 0;
}

.cla-text .img_right {
margin: 4px 0 6px 6px;
}

.cla-text .img_center {
margin: 4px auto;
}

Idem sledovať, ako sa to prejaví pri rôzne pridaných obrázkoch. vlevo, nastred, vpravo... vo viacerých článkoch...

Re: posunutí obrázku ve clanku
Zaslán uživatelem/kou: humanisti.sk (IP adresa zaznamenána)
Datum: 2011-01-21, 11:07

No, zatiaľ... mne sa vidí, že som dosiahol, čo som chcel... už sa zobrazujú medzery pri obrázkoch od textu.

Ďakujem... lebo na toto by som neprišiel, že to takto sa dá: img class=\"img_".$zaobrazku."\"

Pre mňa výborne. :-)



Lituji, ale pouze registrovaní uživatelé mohou zasílat příspěvky do této sekce.
This forum powered by Phorum and designed by STaNBoSS.