Reszponzív kép-beillesztés wordpress oldalba külső tárhelyről

Update: A Google Drive nem engedi már, hogy az ott tárolt képeket, fotókat a weboldaladba beilleszd! Így olvasd a postot.

Több weboldalt is készítettem már, mindegyiket wordpress alapokon úgy, hogy a kereső programoknak (Google, Yahoo, Bing, stb.) a lehető legjobban a kedvében járjak. Ugyanakkor azt is próbáltam szem előtt tartani, hogy a felhasználók számára is könnyen olvasható, átlátható legyen az oldal. A kettő szempont által támasztott követelmények között nagy az átfedés, azaz ami jó a felhasználóknak, az jó a keresőknek is. Ilyen például, ha az adott weboldal gyorsan betöltődik, illetve ha okostelefonon nézegetik, akkor sem omlik össze sőt, olvasható marad!

A weboldal betöltődési sebességén próbáltam úgy javítani, hogy a viszonylag nagy méretű képeket először optimalizáltam, majd egy külső tárhelyről töltöttem be. Képek optimalizálása: http://optimizilla.com/ Külső tárhely ingyen: Google drive, dropbox.

Megjegyzés: azáltal, hogy nem a weboldal tárhelyén vannak a képek, egy csomó helyet és pénzt is meg lehet takarítani. Különösen igaz ez magazin jellegű oldalaknál, melyek sok képet használnak.

Az ötletet tett követte. A Google Drive ideális megoldásnak tűnt arra, hogy a képeket ott tároljam és onnan töltsem be a wordpress oldalamba. Ebben az esetben arra kell figyelni, hogy a drive-ra feltöltött képfájlokat meg kell osztani úgy, hogy azok bárki által elérhetőek legyenek. Vannak fizetős wordpress pluginok, melyek médiatárolóként tudják kezelni a Google drive-ot, ám minden egyes plugin terheli a rendszert, azaz csökkentheti a weboldal betöltődési sebességét, ezért ezt az ötletet elvetettem.

Annak, aki nem akar minden képet egyenként állítgatni, itt van egy plugin: Google Drive As CDN

Ha valaki nem boldogul a Google drive használatával: Képek tárolása Google drive-on, beillesztése weboldalba

Ott tartottam, hogy a képek ideális méretűre tömörítve elhelyezésre kerültek a külső tárolón és a beillesztésük is megtörtént a weboldalba. Aztán láttam, hogy a sablonom - ami egyébként reszponzív - nem kezeli megfelelően ezt a dolgot, így a mobil nézetben a weboldal a külső tárolóból beillesztett képek miatt összeomlott!

Megoldás: a wordpress gyermek sablon (child theme) css fájljában létre hoztam egy "reszponzív " osztályt a képeimnek, így:

/* google drive image reszponzív tétele */
img.responsiv {
max-width: 100%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto
}

Erre az adott postban/oldalon így hivatkozom:

< img class="responsiv" title="kép címe" src="https://googledrive.com/valami/ezakép.jpg" alt="kép szöveg" />

A gyerek sablonról itt lehet bővebben olvasni: Child Theme Természetesen sok más megoldás is van a problémára, nálam ez jött be.