Képproblémák a Wordpressben

Ebben a posztban kétféle, képekkel kapcsolatos problémáról lesz szó:

1.
Amikor elhelyeztem a honlapon a különféle illusztrációkat, először elégedetten dőltem hátra, és egészen addig tartott nyugalmi állapotom, amíg nem szóltak nekem, hogy nem ártana csinálni valamit, mert a képek fehér háttere és a sablon fehér háttere eltérő színű.

Ez nekem fel sem tűnt, mert az én gépemen, Chrome böngészővel teljesen jól jelentek meg a színek. Aztán amikor megnéztem őket egy másik gépen Explorerrel, dobtam egy hátast: húúúú, tényleg nagyon gázul nézett ki, a képek fehér háttere sokkal világosabb volt. Ez nem maradhatott így, muszáj volt vele valamit csinálni. De mit?

Két lehetőségem volt: vagy a sablon háttérszínén változtatok, vagy a képekén. Egyik jobb, mint a másik...

Az első lehetőséget azonnal kizártam. Még ha át is tudom írni a kódot, mennyit kellene próbálgatni, hogy pontosan ugyanolyan legyen a színe, mint a képek háttere? Nem is beszélve arról, hogy képből sok van, és egyáltalán nem biztos, hogy egyforma fehér a hátterük. Maradt tehát a másik lehetőség, a képekkel való machinálás. 
Szóval egyedüli optimális megoldásnak az tűnt, hogy az összes kép fehér hátterét egyenként átlátszóvá kell varázsolni. Fogalmam sem volt róla, hogy ezt hogyan is kell csinálni, úgyhogy irány az internet. Nem bonyolult ez a dolog, íme egy részletes leírás, amiből bárki megértheti:

1. Először is szükség van egy képszerkesztő programra, lehetőleg ingyenesre. Én a Gimpet választottam, amit te is letölthetsz például innen.

2. Ha telepítetted a gépeden a Gimpet, indítsd el, és egy ilyen ablakot fogsz látni:

És persze szükség van a képre, amit szerkeszteni akarsz, én most ezt a bárányosat választottam ki erre a célra. Íme képnézegetőben, hogy látszódjon, ennek még fehér a háttere:

3. Most pedig következzenek a konkrét lépések! Biztosan van több lehetőség is, én azt írom le, ahogyan én csináltam:

Fájl / Megnyitás / Tallózással kikeresem a képet, ami megjelenik a szürke ablakban:

Eszközök / Kijelölő eszközök / Szín szerinti kijelölés, majd a háttér fehér színére kell kattintani. Akkor jó, ha körbe vannak szaggatott vonalazva a fehér részek. Ha a képen belül is vannak fehér részek, akkor onnan ki kell venni a kijelölést, mert azokból is átlátszót csinál. (Megjegyzés: ha a honlap háttere fehér, akkor ezzel felesleges foglalkozni, de ha nem fehér, akkor sajnos figyelni kell erre is.)

Jobb katt a kijelölt fehér részen / Kijelölés / Invertálás
Szerkesztés / Másolás
Fájl / Új - ekkor egy ilyen ablak nyílik meg:

Speciális lehetőségek / Kitöltés ezzel: Átlátszóság, OK
A megnyíló ablak így néz ki:

Szerkesztés / Beillesztés, és már kész is van:

Végül el kell menteni a képet, mégpedig png formátumban:
Fájl / Exportálás...
a megnyíló ablakban balra lent: 

Fájltípus kiválasztása / PNG-kép / Exportálás / Exportálás. 
És már kész is :)
Így már nyugodtan feltehetőek a képek a honlapra. Kicsit fárasztó ezt végigjátszani minden egyes képpel, de egy idő után már úgyis rutinból kattingat az ember.
(És igen, biztosan egyszerűbb lett volna egy videót készíteni erről, de én jobb szeretem így, egyelőre.)

2.
A második probléma: csupán egy apró beállítás kérdése, hogy a szövegbe helyezett képekre kattintva mi történik.

Megtehetjük, hogy hozzárendelünk egy linket, és a képre kattintva a megfelelő oldalra navigál bennünket. De amikor csak simán annyit akarunk, hogy a kép egy illusztráció legyen a szövegben és nehogy elvigye bárhova is az olvasót, akkor oda kell figyelni arra, hogy nem az alapbeállítás a jó!

Ez számomra akkor derült ki, amikor a sales oldal megrendelő formjánál a "tesztalanyaim" izomból elkezdtek a mozgó nyílra kattintani, ami csak illusztráció, illetve a figyelemfelkeltő hatás miatt van ott. Persze ezt ők nem tudhatták, és ha rákattintottak, akkor egy külön oldal nyílt meg, amin csak a nyíl volt. (Haha, de jó lett ez a mondat!)

Mutatom, hogyan kell ezt kiiktatni:

Menjünk be a Wordpressben az adott oldal szerkesztőfelületébe, ahol a képre kattintva az elsötétül, és megjelenik két apró ikon, nekünk a baloldali, képet ábrázoló ikon kell majd, kattintsunk rá:

És megjelenik egy ilyen ablak: 

No, itt a Hivatkozás URL sorra kell koncentrálnunk:

• Ha szeretnénk, hogy a kép elnavigáljon valahová, akkor ide írjuk be a cél-URL-t.
• Ha pedig nem szeretnénk, akkor ebből a sorból töröljük ki azt, ami alapértelmezettként benne van, vagy csak  egyszerűen nyomjuk meg az Egyik sem gombot (spórolunk vele 3 másodpercet). Frissítés, és a képünk szépen belesimul a szövegbe és kattinthatatlanná válik. 

Lesznek még hasonló okosságok, egyelőre elég ennyi mára.