Brielle
Brielle
2015. Júl 12

Már többször is előkerült a kérdés, hogy mégis hogyan helyezem a Coppermine Galériám legfrissebb képeit a fejlécemre, éppen ez okból most el is hoztam a megoldást egy hosszabb leírás formájában. Ez egy nagyon személyre szabható dolog lesz, tehát úgy jelenítheted meg a legfrissebb képeket, ahogy szeretnéd, és ahol szeretnéd.

Most a fejlécünkre fogjuk elhelyezni a képeket, mint ahogy a mintán is láthatjátok, de ettől függetlenül ugyanúgy oldalmodulban vagy egy statikus, dinamikus modulban is elférhet a dolog.

Az első és legfontosabb dolog, hogy legyen az oldaladhoz tartozó Galériád (G-Portálos oldalak esetében is megoldható, de mivel én azzal nem foglalkozom, ezért erre nem fogok kitérni a leírás során.). A Galériád általában oldalad/gallery vagy oldalad/photos címen jelenhet meg. Ez később fontos lesz.

Le kell töltened a Copperminehoz telepíthető plugint, ami a Cpmfetch nevet viseli, és ez teszi lehetővé nekünk a képek megjelenítését. Cpmfetch 2.0.0 letöltése

Miután letöltötted, bontsd ki a tömörített fájlt, és a benne található teljes mappát töltsd fel FTP segítségével a Galéria mappádba. A Galéria mappád neve attól függ, hogy milyen helyet adtál meg neki telepítéskor. Az előbb említett /photos és /gallery nevekre térek most vissza. (mostantól minden helyen a gallery-t fogom emlegetni, ha neked más a telepítési címed, akkor majd aszerint járj el). Most ebbe kell átmásolnod a cpmfetch-et. Ám ekkor még nem vagyunk készen, ne zárd be az FTP kapcsolatot.

 

Most telepítenünk kell Galériánkba magát a cpmfetch-et, amit az oldalad/gallery/cpmfetch/install.php címen tehettek meg. Ha helyesen írod be a telepítési címet, akkor a következőt fogod látni:

Ha nincs hibaüzenet, akkor eddig minden a megfelelő módon működik. Ezután kattints a megjelenő Click here to run the install feliratra a telepítéshez. Ha sikeresen lezajlott a telepítés, akkor meg kell jelennie a legfrissebb Galéria képeknek a következő módon:

Ezután le kell töltened a következő fájlt is, melyet a legutóbb átmásolt cpmfetch mappába kell majd ismét FTP segítségével átrakni. Ennek a fájlnak a segítségével fogjuk megjeleníteni a legfrissebb képeket, és fontos, hogy ennek a fájlnak a szerkesztésével tudod majd megformálni ezeknek a megjelenését. latestimages.php letöltése »

Legfrissebb galéria képek formázása

A latestimages.php-t nyissuk meg jegyzettömbben vagy NotePad++-ban a szerkesztéshez. Itt látni fogtok a lap elején egy CSS kódok, a második felében pedig egy PHP kódot. A másodikkal adhatjuk meg, hogy mennyi friss kép jelenjen meg, hány sorban.

<?php
error_reporting(E_ALL);
ini_set('display_errors',0);
include "./cpmfetch.php";
$objCpm = new cpm("./cpmfetch_config.php");
$options = array('windowtarget' => '_blank', 'imagewidth' => '70');
$objCpm->cpm_viewLastAddedMedia(1,7,$options);
$objCpm->cpm_close();
?>

A kiemelt két számból az első adja meg a megjelenítendő képek sorát, a második pedig az adott sorban megjelenő számot. Tehát az 1,7 annyit jelent, mint 7 kép jelenik meg egy sorban. Ha 6 képet akarunk megjeleníteni 3 sorban, akkor azt a 3,6 kóddal adhatjuk meg.

A kódban még van egy fontos információ, amit érdemes megadni, ez pedig nem más, mint a képek szélessége. Az előző kódban ezt is felfedezhetjük: az ‘imagewidth’ utáni szám a kép méretét adja meg pixelben. Ezekkel az adatokkal érdemes eljátszani úgy, hogy megkapjuk a számunkra kellő méretet, és képmennyiséget.

Ugyanebben a latestimages.php-ban formálhatjuk meg a megjelenítendő képek stílusát is, tehát ha szeretnénk nekik kereted adni, vagy valamilyen hatást, akkor azt a CSS-el adjuk meg. Ebben már nem lesz semmi bonyolult, mindent a saját kedved alapján formálhatsz meg az alábbi kódban:

<style type="text/css">
<!--

a img { /* képek megjelenése */
background: url(http://cherryuniverse.net/wp-content/themes/cu-demi/images/linkeskep01.png);
background-position: top left;
padding: 3px;
margin: 0px;
-webkit-transition: .5s ease-in;
-moz-transition: .5s ease-in;
-o-transition: .5s ease-in; }

a:hover img { /* képek megjelenése, ha ráviszed az egeret */
background: url(http://cherryuniverse.net/wp-content/themes/cu-demi/images/linkeskep02.png);
background-position: top left;
padding: 3px;
margin: 0px;
-webkit-transition: .5s ease-in;
-moz-transition: .5s ease-in;
-o-transition: .5s ease-in; }
-->
</style>

Ha mindent rendeltetés szerűen csináltál, akkor az oldalad címe után beillessztve ezt a kódot, meg kell jelennie a legfrissebb képeknek: /gallery/cpmfetch/latestimages.php

Tekintsétek meg, ez nálam hogy mutat: link

Képek beillesztése a designodba

Eddig még csak egyszerűen megformáztuk a legfrissebb képeinket, de arról még nem volt szó, hogy ezek mégis hogy a francba fognak megjelenni a designunkon. A következő kód megfelelő helyre való illesztéssel ott jelenítheted meg a képeket, ahol szeretnéd. (a saját linkem cseréld le a tiedre)

<iframe width="700" height="100" frameborder="0" name="latestimages" src="http://cherryuniverse.net/gallery/cpmfetch/latestimages.php"></iframe>

  • width: ezzel a szélességét a doboznak adhatod meg
  • height: ezzel pedig a magasságát

Fontos, hogy akkora méretet adj meg ennek a kis latestimages dobozkának, amekkorába pont belefér az összes kis kép. Ha kisebb lesz a doboz ugyanis, akkor oldalt és alul csuszkák jelenhetnek meg, ami azért eléggé elcsúfítja a designunkat.

Képek fejlécre helyezése

Már csak egy lépés maradt hátra, ez pedig a képek fejlécen való megjelenítése. Ehhez div kódot, és CSS-t fogunk használni. A következő kódot illeszd be a header.php fájlba, a fejléckép fölé, de a <div id="header"> kód alá.

<div class="latestimages"><iframe width="700" height="100" frameborder="0" name="latestimages" src="http://cherryuniverse.net/gallery/cpmfetch/latestimages.php"></iframe></div>

Ehhez tartozó CSS kód:

.latestimages{
position: absolute;
padding-top: 200px; /*doboz távolsága az oldal tetejétől*/
padding-left: 150px; /*doboz távolsága az oldal bal szélétől*/
}

A paddingokkal pontosan megadhatjuk, hogy hol helyezkedjen el a fejlécen a legutóbb hozzáadott képek doboza. Ha mindent tökéletesen összehangolunk, akkor jól fog működni. Igazából, ennyi lenne ez a hosszú segítség, ami elsőre nehéznek tűnik, de igazából nem az, csak nagyon pipicselős, aprólékos munka. De az eredmény miatt már megéri, nem is utolsó szempontként pedig biztos, hogy jól fel fogja dobni a lapunkat, a látogatók pedig örülni fognak neki, hogy mindig szemmel tarthatják, mik a legújabb Galéria képeink. :)


Kérdésed van? Írj bátran!









Hozzászólásod csak jóváhagyás után fog megjelenni.

Ellenőrző kód *