Imagini

Lithera.ro vă oferă posibilitatea adăugării de imagini în texte. Pentru a putea adăuga imagini sunt necesari următorii paşi:

1. Crearea galeriei foto

Fiecare litherat îşi poate crea propria galerie foto prin accesarea zonei de administrare (linkul „Bord” din dreapta imaginii de utilizator, după autentificare). Odată intraţi în panoul de administrare veţi găsi, în partea de jos a meniului din dreapta, submeniul pentru administrarea galeriei foto. Fiecare litherat poate crea o singură galerie foto care va purta numele acestuia de utilizator, iar linkul către aceasta, respectiv către toate imaginile încărcate, va fi de tipul: /vizual/#nume-de-utilizator# unde #nume-de-utilizator# se înlocuieşte cu numele utilizatorului respectiv.

2. Adăugare (upload) de imagini în galerie

După crearea galeriei puteţi adăuga imagini în aceasta. Toate imaginile pe care le încărcaţi vor fi reduse de către site proporţional în aşa fel încât nici lăţimea nici înălţimea să nu depăşească 600 pixeli. Dacă doriţi să evitaţi această reducţie pentru a nu risca să pierdeţi din calitatea imaginii vă sugerăm să reduceţi dvs. imaginea într-un editor de imagini apoi să încărcaţi imaginea gata micşorată. Adresa imaginilor încărcate în galeria dvs. va fi de tipul: /vizual/#nume-de-utilizator#/#nume-fişier# unde #nume-de-utilizator# se înlocuieşte cu numele dvs. de utilizator iar #nume-fişier# cu numele imaginii încărcate.

3. Introducerea imaginii în text

De astăzi, 16 septembrie, am modificat funcţionalitatea butonului ajutător [img] de deasupra ferestrei de editare a textelor pentru a înlesni introducerea de imagini, astfel încât tot ce trebuie să faceţi este să apăsaţi butonul, apoi să introduceţi adresa imaginii (Ex: /vizual/stefan-doru-dancus/fata-morgana.jpg), descrierea imaginii (Ex: Fata morgana) si tipul de aliniere (left, right, center sau none). Pentru aceasta nu mai este necesară parcurgerea textului de aici până la exemple, dar o considerăm utilă.

După adăugarea imaginii în galerie o puteţi introduce în oricare din textele dvs. folosind următoarea sintaxă:
[caption #atribute#]
<a #atribute#>
<img #atribute# />
</a>
[/caption]

Această sintaxă poate fi scrisă şi într-un singur rând, paginarea ei pe mai multe rânduri a fost făcută doar pentru evidenţierea semanticii.
Cu cele trei comenzi de mai sus veţi reuşi să afişaţi imaginile aşa cum doriţi, folosind atributele fiecăreia dintre ele, afişate mai jos.

Atributele comenzii [caption]

Comanda [caption]este opţională. Ea adaugă un chenar în jurul imaginii şi un text descriptiv, poziţionat sub imagine, în acelaşi chenar, similar afişării imaginilor în cărţi. Atributele permise sunt:

  • align=""
    Atribut opţional, recomandat. Poate avea oricare dintre valorile: alignnone, aligncenter, alignright şi alignleft. Aliniază imaginea în rând cu textul, central, la dreapta respectiv la stânga. De notat că align="alignright" şi align="alignleft" vor face textul să îmbrace imaginea în spaţiul lateral rămas liber în vreme ce align="alignnone" şi align="aligncenter" vor împinge restul textului sub imagine.
  • caption=""
    Atribut opţional, recomandat. Decrierea imaginii. Acest text va fi afişat în cadrul chenarului, sub imagine.
  • width=""
    Atribut opţional, nerecomandat. Declară lăţimea imaginii (măsurată în pixeli) ce urmează a fi încadrată.
  • NOTĂ: atributul width="" trebuie setat întotdeauna la 200 sau sub această valoare deoarece lăţimea maximă a imaginilor afişate în cadrul textelor pe site-ul lithera.ro este fixată la 200 pixeli din considerente grafice. Dacă doriţi afişarea de imagini mai mari soluţia este amplasarea unei imagini mici (de lăţime maximă 200 pixeli) care să constituie link către imaginea la dimensiuni reale, care se va deschide în faţa textului în momentul accesării imaginii mici.
  • height=""
    Atribut opţional, nerecomandat. Declară înălţimea imaginii (măsurată în pixeli) ce urmează a fi încadrată.
  • NOTĂ: Nu declaraţi atributul height="" dacă doriţi ca imaginea să rămână proporţională. Dacă declaraţi acest atribut şi valoarea sa nu este proporţională cu lăţimea imaginii din galerie, imaginea va fi deformată.
Atributele comenzii <a>

Comanda <a>este opţională. Ea este folosită atunci când doriţi să ataşaţi textului o imagine cu lăţimea mai mare de 200 pixeli şi, pentru că imaginile afişate în text pe siteul lithera.ro nu pot avea o lăţime mai mare de 200 pixeli, doriţi ca la click pe imaginea micşorată să se deschidă imaginea mărită, deasupra textului. Atributele permise sunt:

  • href=""
    Atribut obligatoriu. Indică adresa imaginii şi trebuie să aibă valoare de tipul: /vizual/#nume-de-utilizator#/#nume-fişier#
  • title=""
    Atribut opţional, recomandat. Declară textul care va fi afişat când ţineţi mouse-ul deasupra imaginii. În mod normal se completează cu descrierea sau titlul imaginii
Atributele comenzii <img>

Comanda <img> este comanda propriu-zisă de introducere a imaginii. Folosirea ei fără celelalte două comenzi va determina afişarea imaginii simple în cadrul textului, fără chenar, fără text descriptiv şi fără link către imaginea la dimensiune reală.

NOTĂ: Restricţia de maxim 200 pixeli pentru lăţimea imaginilor în cadrul textului este valabilă pentru toate imaginile, indiferent dacă sunt sau nu însoţite de comenzile [caption] şi <a>.
Atribute permise sunt:
  • src=""
    Atribut obligatoriu. Declară adresa de la care este încărcată imaginea. Fără acest atribut, imaginea nu este afişată.
  • alt=""
    Atribut opţional, recomandat. Text alternativ pentru situaţiile în care imaginea nu se încarcă sau nu poate fi încărcată. Unele browsere afişează acest text când ţineţi mouse-ul deasupra imaginii.
  • width=""
    Atribut opţional, nerecomandat. Declară lăţimea în pixeli a imaginii. Dacă este mai mare de 200 va fi ignorat.
  • height=""
    Atribut opţional, nerecomandat. Declară înălţimea în pixeli a imaginii. Dacă este mai mare de 600 va fi ignorat. În cazul în care valoarea nu este proporţională cu lăţimea, imaginea va fi deformată.

Exemple

Pentru exemplificare aveţi mai jos codul corect şi complet folosit pentru cele două imagini din textul Aripa visului de Matei Ghigiu. La prima imagine am folosit:

[caption align="alignleft" width="200" caption="grafica noctei"]
<a href="/vizual/mat/6_citecevadespre.jpg">
<img src="/vizual/mat/6_citecevadespre.jpg" alt="aripa_visului" width="200" />
</a>
[/caption]

iar la a doua:
[caption align="alignright" width="200" caption="încremenitele_adâncuri"]
<a href="/vizual/mat/5_incremeniteleadancuri.jpg">
<img src="/vizual/mat/5_incremeniteleadancuri.jpg" alt="încremenitele adâncuri" width="200" />
</a>
[/caption]

Dacă nu eşti sigur(ă), întreabă!

Vom răspunde cât de repede oricărei întrebări legate de aspecte tehnice ale site-ului.
Dacă ai nelămuriri, dacă ţi se pare că ceva nu funcţionează cum ar trebui sau dacă pur şi simplu nu reuşeşti să faci un text să arate aşa cum ai fi vrut… nu ezita!
Te ajutăm cu plăcere.

Această litheraţie are acum un cititor.
(un musafir)

Comentează

Trebuie să te autentifici pentru a comenta.

Comentarii litherare
Cele mai citite
Cele mai necitite

Cititori

  • 751Ai acestei pagini:
  • 9Pe lithera azi:
  • 28Pe lithera ieri:
  • 102Pe lithera în ultima săptămână:
  • 6Medie zilnică lithera:
  • 24726Total lithera:
  • 3Acum online: