Serpent.

Építs portált egyszerűen!
Ugrás a tartalomhoz
  • Before és After

    Before és After – Előtte és Utána. Ez a két dolog CSS -ben igazán hasznos tud lenni, sőt. Segítségével tartalmat fűzhetünk az adott elem elé / mögé HTML használata nélkül. A tartalmat a content -tel tudjuk megadni: p::before{ content: “Előtte “; } p::after{ content: ” Utána”; } Előtte   Ez a tartalom   Utána Ez lenne az […]

  • Mit NE csinálj design készítésekor

    Az aktuális trendek szinte mindig változnak, beszéljünk akár divatról, tévéműsorokról vagy akár sablonkészítésről. Ezek ugyan mindig változnak, de ha úgy vesszük, pár “aranyszabály” mindig van. Most ezekről szeretnék mesélni nektek, konkrétabban arról, hogy mit tartok mai szemmel nagy hibának design készítésekor. Egyébként, készítettem egy új projektdobozt, amit itt(link) tudtok meglesni 🙂 Betűtípusok Nehéz lehet megtalálni […]

Arányos kiemelt kép egyszerűen

Aki már régóta szerkeszt az tudja jól, mennyire idegesítő tud lenni, ha nem találjuk el a kiemelt kép megfelelő méretét. Lehet azt akár képszerkesztő programban megvágni, vagy kóddal elérni. Vagy fáradalmas munka mindig képszerkesztőt használni, vagy van, hogy egy kód nem a megfelelő eredményt hozza. Ráadásul arra is gondolni kell, hogy reszponzív legyen. Nos, nem kell kódokkal vagy Photoshoppal fáradozni.

Beszeretném mutatni azt az egyszerű kis trükköt, amit én szoktam alkalmazni. Gondolom van, aki már gondolt rá és így csinálja, de szeretném azoknak is megmutatni, akik esetleg nem gondoltak még rá.

Első lépés – kiemelt kép megjelenítése

Jó, nyilván mégiscsak szükség van némi kódra, ha meg akarod jeleníteni a kiemelt képet, de arra viszont nem kell, hogy arányos legyen. De mindent csak sorjában! Először is, ezt a kódot helyezzük el a sablonunk functions.php fájljában:

add_theme_support( ‘post-thumbnails’ );

Második lépés – kép levágása

Aztán a következő kódot a sablon azon részében, ahol a kiemelt képet szeretnénk megjeleníteni:

<div id=”kiemelt_kep”>

<?php if ( has_post_thumbnail() ) { the_post_thumbnail();} ?>

</div>

Az a div ugyan alapból nem szükséges, de ez kell nekünk ahhoz, hogy arányosan jelenítsük meg. Mint mondtam, nem kell hozzá semmiféle kóddal játszadoznunk, elég egy kis CSS:

#kiemelt_kep img{
width: 100%;
height: 220px; / *Kiemelt kép magassága */
object-fit: cover; /* Ezzel vágjuk le a képet */
}

Remélem tudtam vele segíteni 🙂

WP függvények forrása

Oszd meg az ismerőseiddel