A honlap működése 2. rész: látható képek beillesztése, beágyazása

kimarite képe

A Linux Mint Magyar Közösség honlapján a képek beágyazását (blogba, fórumba) viszonylag könnyedén oldhatod meg az alapértelmezetten megjelenő WYSIWYG szövegszerkesztő segítségével (what you see is what you get / amit látsz, azt kapod), amely egy Drupal modul. Azaz a képek megjelenítésére, láthatóvá tételére itt, a honlapon lehetőséged van. Bizonyára örülsz ennek a hírnek.

!Fontos: honlapunk jelenleg nem rendelkezik elegendő tárhellyel a képek feltöltésére és tárolására, így a honlapra közvetlenül feltöltött képek tekintetében minden felhasználónak igen kicsi tárhelyet tudunk biztosítani. Azaz egy, illetve két kép tölthető fel nagyjából: ne csodálkozz, ha több kép feltöltése egy bizonyos ponttól nem lesz számodra lehetséges.
Megjegyzés: a Hírek továbbközlését igen fontosnak tartjuk. E témakörben szabadon tölthetsz fel képet, képeket. Minden esetben közöld a hír forrását is.

Általános tudnivalók

Az előbbiek ismeretében logikusnak látszik, hogy a saját blogodba vagy fórum hozzászólásba illesztett, azaz az informatika nyelvén „beágyazott” képek tárolását valamilyen megbízható tárhelyen, azaz képmegosztó oldal használatával kell megoldanod. Majd a képmegosztó oldal „Share / Megosztás” szolgáltatása segítségével, egy olyan URL-t kell kapnod, amelyet a WYSIWYG szövegszerkesztő is megért. Az ilyen URL rendelkezik valamely kép kiterjesztéssel, amely kép kiterjesztés a kép sajátja, de mindenképpen erre kell végződjön a hivatkozás, amelyet használni fogsz. Kép kiterjesztés például: JPG, PNG, GIF.

A megfelelő URL elnevezése angol kifejezéssel a „direct link” (közvetlen link), amely egy olyan weblap, ahol a kép közvetlenül (direct), bárkinek és bármikor megjelenik, tehát például a „munkamenet-azonosító token” sincs jelen a címben, azaz semmilyen szabály nem vonatkozik a kép általános láthatóságára.

Képmegosztó oldal

A megfelelő képmegosztó oldal kiválasztásánál nyilván fontos, hogy ingyenes legyen, és az előbbi szövegblokkban ismertetett „szabály”-nak megfelelően tudd használni. Nem megfelelő a célra a kepmegosztas.com és az olyan, ehhez hasonló oldalak, ahol a feltöltött képek (az oldal üzemeltetőjének tárhellyel való ilyetén gazdálkodása miatt) előbb vagy utóbb, de biztosan törlődnek. Szükségünk, szükséged van arra -mint fórum, ahol a nem az egyén, hanem a közösség segítése a cél- hogy a kép nagyon hosszú ideig megmaradjon. De például te se töröld azt a későbbiekben (ha ez lenne a célod valamikor is). Fontos, hogy regisztrálj a kiválasztott oldalon, hiszen így például a feltöltött képeid mappákba rendezheted, amelyekben később is megtalálod a képeid (az esetben, ha belépsz oda). Lehet, máskor is szükséged lesz egy régebben elkészített képre: segítenél vele valakinek vagy csak felelevenítenéd a témával kapcsolatos emlékeidet. A képek a szövegnél sokkal több tartalmat hordoznak, könnyebb egy képpel megértetni valamit, mint ezerféleképpen „körbeírni”.

A képmegosztó oldal kiválasztásában tudunk segíteni, tedd meg a kérdésed egy hozzászólásban!

Én a Postimage szolgáltatását használom, és néha a Flickr-t is. Most futólag kitérek néhány dologra a Postimage kapcsán. Először is regisztráltam a oldalon. Másodszor a fórum és a blog hozzászólásaimhoz való képeket két mappában tárolom, így könnyebb megtalálni ..., de választhatsz saját módszert, lényeg, te emlékezz rá. Amikor egy képet feltöltök, először belépek az oldalra, aztán kiválasztom a megfelelő könyvtárat, azt megnyitom, kiválasztom a gépről a feltöltendő képet, majd feltöltöm. Végül a „Share / Megosztás” elem megnyomásával kapok jó pár URL-t, de én ezt választom:
https://s5.postimg.cc/rb9cxi8t3/gq-5x.png
A Postimage oldal ezt az URL-t így hívja: Direct link
Az URL végén ott a már említett és szükséges kép kiterjesztés, jelen esetben a PNG.
A képet innen szedtem le, fórumtárunk engedélyével:
https://linuxmint.hu/forum/gq-5x-spi-usb-programozo
Megjelenítve így néz ki:

Itt látható a „Share / Megosztás” elem megnyomása utáni állapot a „Direct link” lehetőséggel:
(csoportos kép feltöltésnél elég a képek fölé vinni az egér mutatót egyenként)

Nyilván már nagyon kíváncsi vagy, mégis hogy tettem láthatóvá a képeket. Akkor most elmondom.

Képek beágyazása

Onnan folytassuk, hogy már a vágólapon van a megosztani kívánt kép URL-je, a megfelelő tulajdonságokkal. Azt az általad használt tárhelyről kimásoltad a Ctrl + C -vel vagy más módszerrel ...
Tehát a vágólapon van, és várja, hogy valahova beilleszd. Például így: Ctrl + V

Legyen akkor ez a példában használt URL:
https://s5.postimg.cc/rb9cxi8t3/gq-5x.png

Képek helye a szövegben

Amikor megnyitsz egy hozzászólást („új hozzászólás”), válaszolsz egy másik fórumozónak („válasz” vagy „reply to node”), netán elkezdesz írni egy blogot, rögtön feltűnik a WYSIWYG szerkesztő. A szerkesztő ablakának felső részén különböző ikonokat látsz. Neked a „Kép beillesztése / módosítása” ikon kell. Ez a horgony ikontól közvetlenül jobbra található, de ha bármely ikon fölé viszed az egér mutatót, akkor láthatod a tulajdonságait. Megnyomod ezt az ikont, és ekkor ezt látod:
... hohohohó, álljunk csak meg egy pillanatra! Hiszen még nem tudjuk, hova szeretnéd beilleszteni a képet, vagyis az általad létrehozott szövegben mi elé, alá vagy fölé kerül, tehát a dizánj mi lesz. Ezt én nem tudom megmondani helyetted, de ami biztos, ha egy szövegblokk vagy mondat után szeretnéd viszonlátni -és láttatni másoknak is- a képet, akkor az egérmutatót vidd a mondat végére, kattints bele a szövegbe (egészen pontosan a mondat végére), majd üss Enter-t. És csak ezután nyomd meg az ikont, mármint, ha a kép helyét kitaláltad, továbbá pontosan ott az egérmutató, ahol a kép helyét elképzelted. Huuh, ez kemény történet, fele se tréfa, de remélem, te legalább érted. Na jó, megmutatom:

-- mondat vége - a kijelölés

-- a kép helye - az Enter megnyomása után
(Tipp: ha nem egyszer, hanem kétszer nyomod meg az Enter billentyűt és a fel kurzorral egyet visszalépsz, akkor az ide beillesztett kép alá könnyebb lesz gépelned a szöveg, vagyis a mondanivalód folytatását, mert eleve oda kerül az egér kurzor. Netán egy másik képet is be tudsz illeszteni ide. Máskülönben azzal szembesülhetsz, hogy „elfogyott a hely” a kép alatt az irogatásra.)

Kép tulajdonságai

Folytassuk, ahol abbahagytuk

-- (a „Kép beillesztése / módosítása” ikon megnyomásakor) ezt látod:

Alaptulajdonságok menü

  • Hivatkozás: ide kerül a kép URL (a vágólapról illeszted be: Ctrl + V)
  • Buborék szöveg: ha a már elmentett hozzászólásnál valaki a kép felé viszi az egérmutatót, akkor az ide írt szöveg jelenik meg. Ez bármi lehet, de lehetőleg a képpel összefüggő magyarázat, megjegyzés szerepeljen itt. A helyesírásra ügyelj. Én ki szoktam hagyni.
  • Szélesség / Magasság: a zárt lakat ikon azt jelenti, hogy a képarányok zárolva vannak, tehát, ha az egyik értéket változtatod, akkor a másik érték is változni fog, másként kifejezve, a kép nem torzul. Ez így normális. A kör alakban futó nyíl megnyomásával a kép valós mérete fog megjelenni a méret mezőkben és a képet is annak valós méretében látod.
  • Keret: keretezni tudod a képet. Nem használom
  • Vizsz. táv: a képet el tudod tolni jobbra. Nem használom
  • Függ. táv: a képet el tudod tolni lefelé. Nem használom.
  • Igazítás: különféle fix dolgokhoz tudod igazítani a képet a nyíl megnyomásával láthatóvá tett menüben.

Az „Alaptulajdonságok” menü jellemző használata:

A kép méretének beállításánál tudnod kell az alábbiakat:

  • 800 pixel-nél szélesebb képet ne állíts be, mert akkor a képet a honlap lekicsinyíti, és így a látható kép minősége romlik, akár az élvezhetetlenségig. Én mindig csak a szélességet állítom be egy százzal, ritkábban ötvennel osztható méretre, úgy, hogy először megnyomom a kör alakban futó nyilat az eredeti kép megjelenítéséhez és annak szemrevételezéséhez, azaz, hogy lássam, a képet milyen mértékben érdemes kicsinyíteni. A kép magassága automatikusan változik -ezzel nem kell foglalkoznod- mert a kép arányait megtartó lakat ikon zárt állapotban látható.
  • A képet nagyítani nem igazán érdemes, mert ez esetben a látható minősége szintén romlik. Kisebb képeknek megfelelő a 400 pixel, a közepeseknek a 600 pixel, míg például egy Asztalt vagy például böngésző ablakot mutató kép szélessége lehet akár a maximális 800 pixel méret. Érzéssel kell a méretet beállítanod: a helyes választás, ha a képen látható információk még éppen, pontosabban már jól értelmezhetőek. A túl kicsi vagy a túl nagy -információkat mutató- kép egyike sem megfelelő egy fórumon.
  • A képek általában négyzet alakúak, de leginkább jellemző a fekvő téglalap forma. Álló kép esetén azonban a magasságot állítsd a szélesség helyett. Nem túl könnyű álló téglalap formájú képet megfelelően méretezni. Gyakorlás kérdése, de te is tudod, senki nem sürget a szerkesztésnél. Gondold át alaposan a választásod.
  • Ha a kép túl sok információt hordoz, akkor -a képmegosztó oldalra feltöltés előtt- szerkeszd, vágd le a jelentéktelen részeket, hogy csak a közölni kívánt és mindenképpen fontos információ maradjon a képen. Így bőven beleférsz a 800 pixel maximális szélességbe akár, de egyáltalán nem fontos ezt kihasználni. Erre a méretre mindig legyél tekintettel. A képek szerkesztésére én a GIMP alkalmazást használom.
  • Ne ragaszkodj a nagy képek megjelenítéséhez, a kisebb méret sokszor több információt hordoz: felesleges „sallangok” levágása. Sokszor bőven elég a 400 pixel szélesség. Arra is gondolj, hogy a megjelenített, túl nagy képek az oldal betöltését lassítják. A következő részben („Hivatkozás menü”) elárulom, hogy miként mutatod be eredeti méretben a képet, miközben itt kisebb méretben láttatod.

A kép megosztásáról tudnod kell az alábbiakat:

  • Mindig utalj a kép forrására! Megfelelő megoldás erre a kép alatt közvetlenül elhelyezett „Forrás: URL” forma. Az URL utaljon arra a blogra vagy weboldalra, ahol a kép eredetije szerepel, vagyis ahonnan azt letöltötted. Ilyen lehet például egy Wikipédia oldal címe, de akármi más is lehet.
  • Feleslegesen ne tölts fel és főleg ne ossz meg képet, csak akkor, ha a képpel valami fontosat szeretnél mondani, illetve megmutatni, vagy, ha erre például mi kértünk.
  • Gazdálkodj okosan a tárhelyeddel, amely ugyan ingyenes, de valakinek akkor is pénzbe kerül. Csak a legfontosabb képeket töltsd fel oda, és így nyilván nem is kell törölnöd, ha esetleg elfogyna a hely. Törölni nem is szabad, mert akkor a fórumról is eltűnik a példa, amelyből rajtad kívül még sokan tanulhatnak. A képmegosztó oldalak felesleges és túlzó használata (a tárhely fogyása) akár azok megszűnéséhez is vezethet. De például használhatod az egyik képmegosztót a Linux-szos képeidhez, és egy másikat más célra. Mindezek ismeretében használd ésszel a képmegosztó oldalakat.

Hivatkozás menü

Miután az előző, „Alaptulajdonságok” menüt beállítottad, átléphetsz a következő „Hivatkozás” menüre. Ez a menü az eredeti kép megjelenítésére való. Ha valaki az egérrel rákattint a képre, új lapon nyílik meg az eredeti kép, természetesen a kép megosztás címén.

  • Webcím: ide kerül -legtöbbször ugyanaz az URL- amit az „Alaptulajdonságok” menünél már használtál. De például -ha a kép megjelenése a fórumon is megfelelő- akkor a kép forrásának címe is betehető ide. Ha nem így teszel, minden esetben linkeld a kép forrását! Ez a becsületes megoldás a kép készítője felé.
  • Tartalom megjelenítése: az „Új ablakban (_blank)” kiválasztása a legjobb lehetőség, mert így mindegyik böngésző új lapon nyitja meg a képet. Mondhatjuk úgy is, hogy nem lenne szerencsés, ha a kép megnyitásakor elnavigálnánk az eredetileg megnyitott oldalról (https://linuxmint.hu/), oda, ahova a képet feltöltöttük: tehát az eredeti oldal is nyitva marad és a kép is látható lesz egy másik, új böngésző lapon.

Az „Hivatkozás” menü jellemző használata:

További opciók menü

Erről a menüről most nem beszélek. Használatát azoknak javaslom, akik értik, miket lehet itt beállítani. Nem igazán fogod használni. Ha mégis, akkor bátran kérdezz, ha elakadsz valamiben!

Összefoglalás

Miután mindegyik menüben beállítottad azt, amit szerettél volna, úgy a „Rendben” elemet megnyomva a kép az oldalba ágyazva, mindenki által láthatóan jelenik meg. Ez a mentés. Ha a képet még szerkesztenéd, finomítanál a megjelenésén, vagy a beállításokon, akkor kattints rá az egérrel (egyféle kijelölés), majd nyomd meg a „Kép beillesztése / módosítása” ikont, így ismét a beállításokhoz jutsz.

Javaslom, hogy az általam közölt beállításokkal használd a „Kép beillesztése / módosítása” funkciót. Természetesen a most bemutatottakon kívül még néhány apróbb lehetőség kínálkozik, azonban az ezekkel való ismerkedést rád bízom.

Enjoy :)

Javasolt kép megosztó oldalak
(a lista bővülhet, sőt ez a cél)

Postimage: https://postimages.org/
ImgBB: https://imgbb.com/
imgur: https://imgur.com/
Flickr: https://www.flickr.com/
A Flickr-re regisztráláshoz érdemes saját és új Yahoo fiókot nyitni. A képek megosztása (az URL) kis trükkel oldható meg.

Hozzászólások

kimarite képe

A honlap működése 2. rész

#1 Facebook-kal lehet regisztrálni. Oszt nehogymá' köze legyen a képeimhez ..., én így gondolom.
De most látom, hogy ezen kívül van már (valahogy alakult dolog):
-- Twitter
-- Google+ és
-- Yahoo!
Így már kedvezőbb a fekvése.
Sőt, csak úgy is lehet: need an account?

Jó ez is, persze. Az Imgur.
Vélhetően regisztrálok ide is.

Értékelés: 

0
Még nincs értékelve

A honlap működése 2. rész

#1.1 Én simán regisztráltam. Az ImgBB-t jobbnak találtam, egyszerűbb a használata.

(Sajnálatos, hogy az egyes szolgáltatók is erőszakoskodnak, hogy kössem össze a Facebook, vagy a Google fiókommal a regisztrációmat. Van szolgáltató, amelyik bejelentkezéskor - számlát fizetnék - a képembe tolja "nincs megadva a Facebook fiókom és nem engedélyeztem az üzleti megkereséseket.)

Értékelés: 

0
Még nincs értékelve
kimarite képe

A honlap működése 2. rész

#1.1.1 Az Imgur is ezt csinálta régebben, összekötött volna közösségi oldallal. A Postimage-t találtam, az ImgBB-t itt ajánlotta lala - az ilyen oldalakról szóló párbeszédben. :)

Értékelés: 

0
Még nincs értékelve

A honlap működése 2. rész

#1.1.1.1 Az ajánlás után regisztráltam az ImbBB-re :-)

Értékelés: 

5
Átlag: 5 (1 szavazat)