Cikkajánló
A design színvilága is egy nagyon-nagyon fontos dolog egy weboldal beindításában. Egyáltalán nem mindegy, hogy milyen színeket, mennyit és hogyan alkalmazunk egy oldalon. Nem tudom, ti hogy vagytok vele,
Hoztam még egy .psd fejlécet és a hozzá gyűjtött .png képeket is feltöltöttem a galériába. A fejléc a szokásos helyen tölthető le: PSD – Photoshop fejlécek Itt pedig meg
Hoztam egy újabb jópofa CSS kódot, amit G-Portálon, WordPress-ben vagy bárhol máshol is lehet alkalmazni :) Akár szélső sávban, akár a főmodulban is. Én most a példa kódot egy
Blog téma G-Portálra 2.0 Betűtípus kereső Teszteld oldalad felbontását URL cím értelmezése CSS kód beillesztése G-Portálra
Kiemelt képek arányos beállítása

Amióta használok kiemelt képeket az oldalon azóta foglalkoztatott a dolog, hogy lehetne azt megcsinálni, hogy a képeket lehessen méretileg alakítani és ne kelljen esetleg törölni őket. Ezzel a megoldással simán lehet a kiemelt képeket mindig egyforma méretűre tenni. Igazodik a modul szélességéhez is, így keskenyebb vagy szélesebb modult is lehet beállítani. Design készítésnél nagyon ajánlott tud lenni. Csak utána ne felejtsétek el a képek méretét is átállítani. Így a régi bejegyzések képei is mindig jól fognak mutatni :) Persze akkor lesznek a képek szépek, ha minél szebb és nagyobb minőségű képeket használtok. De a képarány mérete mindegy, a kód így is-úgy is arányosan fogja levágni a képet :)

 

Ha pedig később újra kell méretezni a kiemelt képeket, mert másik design-t használtok majd, akkor a functions.php fájlban át kell írni a méretezést, utána pedig ezzel a bővítménnyel a régi kiemelt képeket frissíteni kell, hogy felvehesse az új képméretet :)

 

Először a functions.php fájlba teszünk egy kódot. Ha használtok kiemelt képeket, akkor az alap kód az már benne van. Az ez lenne:

 

if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
}

 

Ez alá kellene még ezt a kódot bemásolni

 

if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'new-size', 720, 450, true );
add_image_size( 'category', 300, 200, true );
}
add_filter('image_size_names_choose', 'my_image_sizes');
function my_image_sizes($sizes) {
$addsizes = array(
"new-size" => __( "New Size"),
"category" => __( "New Size")
);
$newsizes = array_merge($sizes, $addsizes);
return $newsizes;
}

 

Magyarázat a kódhoz
Felülről a második és harmadik sorban láthatóak az értékek (ami több sor is lehet), ahol meg kell adni, hogy egyes oldalakon majd a kiemelt képek mekkorák legyenek. Így eltérőek is lehetnek a képek, mert mondjuk a főoldalon csak bélyegképek jelennek meg, míg, ha rákattintunk, hogy a teljes cikket lássuk, akkor pedig nagyban lesz ott a kép. A második sor nálam az a sor, ami a főoldali képekre hat. Az-az erre:

 

 

A harmadik sor pedig egy minta oldalra hat jelenleg, ahol ezt-azt próbálgatok. Itt most ez a kategória oldal, és ott úgy állítottam be, hogy csak bélyegképek jelenjenek meg ugyanazokból a képekből.

 

 

 

Az alattuk lévő kódban pedig szintén meg vannak nevezve a méretek new-size és category néven. Ezt a sort is ki kell egészíteni, ha még teszünk hozzá méretet vagy lehet törölni, ha csak a főoldali képeket akarjuk méretezni.

 

És van még egy kód. Ezt pedig pontosan oda kell tennetek, ahol megszeretnétek majd jeleníteni a kiemelt képeket vagy bélyegképeket. Ez lehet index.php, page.php, home.php, stb. Cikk alá, fölé, mellé, stb…

 

<?php if ( has_post_thumbnail() ) { the_post_thumbnail('new-size');} ?>

 

Kiemeltem mind a két kódban egy fontos részt három helyen. Ezt: new-size. Az a lényeg, hogy a function.php-ban, ahol megadjátok a kép méretét ott van egyszer egy new-size. Ez lesz a kép mérete. Alatta pár sorral is van egy new-size. Ez vágja le arányosan a képet. És a harmadik kódban is van egy new-size. Ezzel hivatkoztok a function.php-ban lévő méretre, hogy a script tudja azt, hogy melyik oldalon melyik méretű kép mekkora legyen. Fúú, remélem lehet érteni, amit mondani akarok :D Ha nem, akkor kérdezzetek és segítek.

 

A category nevezetű kód értelemszerűen nálam a category.php-ba lett téve, így ott kisebbek lettek a képek.

 

<?php the_post_thumbnail( 'category' ); ?>

 

Ennyi az egész. Egyáltalán nem bonyolult, de nagyon hasznos kód.

lindadesign Hozzászólások
519 megtekintés

Hozzászólások