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)
kimarite képe

Frissítés: ckeditor.com

A leírás némi frissítésre szorul, hiszen Drupal modulként jelent meg régebben a WYSIWYG szövegszerkesztő.

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.

Manapság már a szerkesztő a Linux Mint Magyar Közösség honlapba lett beágyazva, tehát nem Drupal modul (a CKEditor), hanem egy külső szolgáltatás, amely honlapja itt található: https://ckeditor.com/. Sok minden nem változott.
A beágyazás kifejezés angolul: embed. Találkozhattál a fogalommal a YouTube videók beágyazásával kapcsolatban, például amikor egy napilap valamely cikkében egy YouTube videó megjelenik, lejátszható. Ilyenkor valójában egy YouTube oldal látszik (a videó) és nem a napilap saját szerverén csücsül a videó a saját lejátszójukkal megvalósítva a lejátszást.

A változtatásra felhasználói igény volt, ezért valósult meg.

A kép URL-ként történő beillesztése, a képek méretezésének módja nem változott és a blogban említett „nem túl nagy” kép elvárás megmaradt. Ez az első lépés most is. Felhívom a figyelmed, hogy olvasd el az eredeti blogot, és tartsd be a méretre vonatkozó lépéseket, kívánalmakat.

Viszont a korábbi egy lépéses kép beágyazás -a külső szerkesztővel- immár két lépésben valósítható meg. Ahhoz, hogy a képet eredeti méretben, azaz jól értelmezhetően látni lehessen, linkelni kell a forrását is. Erre a szövegszerkesztő lehetőséget ad. Ez a második lépés. A második lépés tartalmazza, hogy a kép eredeti méretben, de új lapon nyíljon meg, azaz ne navigálj el a honlapról, miközben megnyitod a azt. Ezt az eredeti blog is tartalmazta, csak mindez egy lépésben, egy elemmel valósult meg.
A külső szerkesztő működésére nincs ráhatásunk. Jól működik, ezt szerintem elegendő tudni.

Akkor most figyelj, mert jön a leírás, amely segítségével látható képet oszthatsz meg az oldalon.

A megjelenítendő kép URL maradt az eredeti a jelen példában is:
https://s5.postimg.cc/rb9cxi8t3/gq-5x.png

Ismétlés:

-- kell egy tárhely szolgáltató, ahova regisztrálsz, belépsz, majd feltöltöd az eredeti képet (Imgur, PostImage, ImgBB, stb., de magyar képmegosztót vagy HTTP URL-t semmiképpen ne használj: használj HTTPS-t. Mármint, ha közvetlen linkelsz képet valamely weboldalról. Néha erre is szükség lehet.),
-- a képmegosztó oldal segítségével kapsz egy megosztható, azaz mindenki számára látható URL-t, ezt használod a beágyazáshoz is,
-- a fórumra közvetlenül ne tölts fel képet, mert a tárhelyünk véges. Egy, két képet esetleg feltöltesz, de aztán jön a panasz, hogy a többi miért nem megy fel. Hamar elfogy a felhasználóra engedélyezett, pár MB tárhely. Én szóltam. Nem tárhely szolgáltató vagyunk.

Ha a kép URL megvan, jöhetnek a következő lépések. Ezekről csak futólag írok, hiszen nem szeretném ugyanazt leírni ismét (olvasd el a részletekhez az eredeti blogot).

-- megnyomod a Kép elemet

-- megjelenik a Kép tulajdonságai ablak, beilleszted a Hivatkozás téglalapba a kép közvetlen elérését: URL
(az URL vége csak kép formátum lehet, más nem)

-- a kép méretezésén változtass kicsit itt leveszed 600 pixelre a szélességet, majd nyomd meg a Rendben elemet
(használd ezeket az értékeket: 100, 200, 400, 800. A 800 pixel méret lehet a legnagyobb méret.
A módszer az, hogy belekattintasz az egyik, a neked megfelelő méret téglalapba.
Ha a kép magassága nagyobb a szélességénél, akkor a magasságot változtasd.)

-- ekkor a kép megjelenik,

... de még nem végeztünk a szerkesztéssel. Ez így nem jó.

Ahhoz, hogy a kép az eredeti méretben és új lapon jelenjen meg, linkelni kell a forrást is.

-- rákattintasz a képre egyszer, azaz kijelölöd
(ezt nem mutatom meg, mert nem látszik)

-- nyomd meg a Hivatkozás beillesztése/módosítása elemet

-- Az Alaptulajdonságok fülön, a Hivatkozás téglalapba illesztd be a kép URL-t,

-- majd átlépve a Tartalom megjelenítése fülre, a Cél beállításban a <nincs beállítva> helyett válaszd ki ezt: Új ablak (_blank). Így a kép új lapon megnyílva, eredeti méretben nézhető, de a fórumban kisebb méretben jeleníted meg, hiszen az eredeti méret megjelenítése például zavaró lenne vagy túl hosszú ideig tartana a megjelenítése. A véglegesítéshez nyomd meg a Rendben elemet.

-- a kép tehát így néz ki készen
(ha a képre kattintasz, új lapon, eredeti méretben látható)

Ha figyeltél, észrevehetted, hogy ennél a képnél most a 700 pixel szélességet választottam ki, pedig korábban más méreteket ajánlottam. Igen, néha erre is szükség lehet: átgondoltam, mennyire látszanak majd a megjelenő karakterek, azaz szemrevételeztem a képet, mintha weboldalt, vagy újságot szerkesztenék például egy kiadványszerkesztő alkalmazással. És addig változtattam a méretet, mígnem ez a 600 pixel és 800 pixel közötti méret megtetszett, jónak tűnt. A százzal osztható méretek még elfogadhatóak az átméretezésnél. Arra is gondolni kell, legyen valami szabály erre, ne jelenjenek meg kesze, kusza méretezések: nézzen ki „valahogy” a fórum.
... egyébként nem választottam ki a 700 pixel szélességet. Hiszen túl nagy lenne így ez a kép. De lehetséges, olykor szükséged lehet erre méretre is.

A kép méretezése -a szerkesztés közben még- nem végleges: a képet kijelölve, majd a Kép elemre kattintva változtatható meg a méret. Erre még a szerkesztés közben gondolj.
Azonban arra feltétlen figyelj, hogyha egyszer mentetted már a hozzászólásod, akkor a hozzászólás szerkesztésére legfeljebb 333 másodperced maradt és nem több. Először szerkessz, és csak akkor küld be akármit is, ha végleges a „látvány”. Köszönjük.

Enjoy :-)

Értékelés: 

5
Átlag: 5 (1 szavazat)