Css forstør billede. Hvordan får man et billede til at forstørre, når man holder markøren over det i CSS? WordPress standard billedstørrelser
En ret almindelig praksis på moderne websteder er glat at forstørre en blok med et billede. Hvordan gør man dette med ved hjælp af CSS?
Jævn billedzoom på svævende CSS
Vi deler løsningen af problemet op i to faser: html markup Og css stilarter. Lad os først markere blokkene med billeder indeni:
Alle blokke blev tildelt kasseklassen. En af dens vigtige egenskaber vil være overløb: skjult, det vil sige skjul alt, hvad der går ud over blokken. Skal vi forstørre billedet? Ja. Men kun den del, der er begrænset af blokken, vil være synlig.
Vi ordnede det her. Lad os gå videre til beskrivelsen af stilarter.
æske (
overløb:skjult;
bredde: 250px;
højde:250px;
}
Alt er som angivet - firkantede blokke, der svarer til standardstørrelsen, ikke forstørret billede, så også 250 gange 250.
Overflow:hidden egenskaben, som tidligere nævnt, tillader den ikke at gå ud over blokkens grænser, når den zoomes ind.
Egenskaber relateret til billeder:
Box img (
-moz-overgang: alle 1'ere ease-out;
-o-overgang: alle 1'ere ease-out;
-webkit-overgang: alle 1'ere ease-out;
overgang: alle 1'ere ease-out;
}
Box img:hover(
-webkit-transform: skala(1.2);
-moz-transform: skala(1.2);
-o-transform: skala(1.2);
transform: skala(1.2);
}
Der er ingen vej udenom uden CSS3. Alle moderne browsere animationen vil blive vist. Du har brug for overgangs- og transformationsparametrene. Vi indstiller animationstiden til 1 sekund (1s). Stigningen bliver 1,2 gange. Du kan ændre det efter din smag.
Nu for eksempel arbejde!
God eftermiddag. Med denne lektion fortsætter vi vores træning i WordPress. Og i dag vil vi se på, hvordan man indstiller tilpassede størrelser til miniaturebilleder i indlæg i WordPress.
Indstil vilkårlige (dine egne, brugerdefinerede) miniaturestørrelser
Åbn functions.php filen og i slutningen af filen skriv en kommentar om, at vi starter vores brugerdefinerede kode, og indsæt koden for at registrere vores thumbnail størrelser:
// MINE FUNKTIONER // Indstil thumbnails og thumbnail størrelser for indlæg // tilføje thumbnails til temaet if (function_exists("add_theme_support") add_theme_support("post-thumbnails"); // Bestem størrelsen på thumbnails if (function_exists("add_image_size"))( add_image_size("tie-small", 100, 55, true); //$width, $height, $crop add_image_size("tie-medium" , 300, 150, sand); add_image_size("tie-large", 600, 300, sand); )
Vis tilpassede miniaturestørrelser i skabelonen
I i dette eksempel Jeg bruger twentywelve-temaet. I dette tema vises almindelige indlæg ved hjælp af content.php-skabelonen. Jeg åbner denne skabelon. I den vises indlægsminiaturebilledet på den 20. linje med koden:
Vi skal vise vores nye miniaturestørrelser. Lad os erstatte denne kode ovenfor med følgende:
Jeg kommenterede standard kode thumbnail output, deaktivering af det, og efter at det tilføjede koden til at outputte din thumbnail, størrelse tie-medium. Miniaturebilleder vises nu i indlæg given størrelse tie-medium 300px X 150px.
Tilføjelse.
Proceduren for at arbejde med thumbnails ved oprettelse af en hjemmeside/tema:
1. Bestem, hvilke thumbnail-størrelser, der skal bruges på webstedet
2. Registrer de passende størrelser i functions.php
3. Tilføj thumbnails, hvis thumbnails allerede er indstillet, så kør genskabe thumbnails plugin
4. Vis thumbnails i skabeloner
I denne artikel vil vi se på det grundlæggende i at arbejde med Wordpress thumbnails. Lad os lære, hvordan du aktiverer thumbnail-understøttelse for Wordpress-temaet, tilføjer brugerdefinerede billedstørrelser og bruger thumbnails i Wordpress skabelon. Alt dette vil gøre arbejdet med grafik meget lettere ved at automatisere processerne med at skabe og vise billeder på webstedet.
trykt version
Tilføjelse af miniatureunderstøttelse til WordPress
For at kunne indstille billeder som thumbnails for WordPress sider, skal du aktivere støtte for miniaturebilleder i skabelonen. For at gøre dette skal du tilføje følgende kode til dit temas functions.php-fil.
If (function_exists("add_theme_support")) (
add_theme_support("post-thumbnails");
}
Efter dette, når du opretter en side, vil en ny blok "Post Thumbnail" dukke op i højre kolonne.
For at indstille et miniaturebillede for et indlæg skal du blot klikke på linket og vælge ønskede billede, og klik derefter på "Set Thumbnail". I dette tilfælde kan du vælge et billede enten fra et fælles filbibliotek eller uploade det separat ved hjælp af en standard uploader.
Når du har tilføjet et miniaturebillede, vil det valgte billede blive vist i den tilsvarende blok.
Hvis blokken for tilføjelse af thumbnails ikke vises på siden for tilføjelse/redigering af en post, så gå til punktet "Skærmindstillinger" til højre øverste hjørne ved siden af knappen "Hjælp", og marker afkrydsningsfeltet "Send miniature".
Hvis dette ikke hjælper, skal du kontrollere, at funktionen til aktivering af miniaturebilleder er tilføjet korrekt.
Miniaturefunktion i WordPress
For at vise thumbnails i et WordPress-tema, brug speciel funktion the_post_thumbnail(). Den bruges indvendigt WordPress cyklus og kan tage to parametre – miniaturestørrelsen og en række attributter.
The_post_thumbnail($størrelse, $attr);
- $size – navnet på thumbnail (standard thumbnail, medium, large, full) eller en matrix, der indeholder bredden og højden af billedet, for eksempel array(64, 64). Du kan også sende navnet på miniaturebilleder med vilkårlige størrelser, som er oprettet ved hjælp af add_image_size()-funktionen som en værdi.
- $attr – række attributter. For eksempel, for at indstille en klasse til et billede, skal du bare skrive array('klasse' => 'thumb-class'). Da andre parametre bruges meget sjældent, vil vi ikke overveje dem. Du kan læse mere om alle betydningerne i WordPress-koden.
Kode til visning af thumbnails i forskellige størrelser
The_post_thumbnail(); // Parameter er bestået -> "post-thumbnail"
the_post_thumbnail("thumbnail"); // Standardstørrelse: 150px x 150px maks
the_post_thumbnail("medium"); // Standardstørrelse: 300px x 300px maks
the_post_thumbnail("stor"); // Standardstørrelse: 640px x 640px maks
the_post_thumbnail("fuld"); // original størrelse af den uploadede fil
the_post_thumbnail(array(100.100)); // Brugerdefineret størrelse (100px x 100px)
Eksempel på færdiglavet kode til visning af thumbnails i en WordPress-skabelon
Lad os som et eksempel se på koden, der viser et miniaturelink til stort billede. Dette er især nyttigt, hvis dit websted bruger pop op-billeder. Da det er ret besværligt at skrive koden separat, vil der ud for hver linje være en kommentar med forklaringer.
if (has_post_thumbnail()) ( /* Søger efter et miniaturebillede knyttet til et indlæg */
$large_image_url = wp_get_attachment_image_src(get_post_thumbnail_id(), "large"); /* Få et link til et stort billede */
ekko ""; /* Generer et link til et stort billede ved hjælp af CSS-klasser og Title-attributten */
the_post_thumbnail("thumbnail", array("class" => "single-thumb")); /* Vis et miniaturebillede med single-thumb-klassen */
ekko ""; /* Tilføj et afsluttende tag til linket */
) else ( /* Hvis indlægget ikke har et miniaturebillede */ ?>
" title="!}" >
Ændre størrelse på miniaturebilleder
Som standard kan størrelserne på standardminiaturer ændres direkte gennem webstedets administrative panel i afsnittet Indstillinger - Mediefiler. Disse omfatter thumbnail, medium og large thumbnails.
Derudover kan du ændre/indstille størrelsen på post-thumbnail-outputtet ved hjælp af funktionen_post_thumbnail() ved hjælp af set_post_thumbnail_size()-funktionen, som skal tilføjes til functions.php-filen:
Set_post_thumbnail_size($width, $height, $crop);
- $width – miniaturebredde i pixels (standard: 0).
- $height – thumbnail højde i pixels. (standard 0).
- $crop – beskær eller formindsk billedet. sand - en del af billedet med de angivne dimensioner vil blive taget, falsk - billedet vil blive reduceret proportionalt, og alt overskydende vil blive beskåret (standard: falsk).
Tilføjelse af miniaturebilleder med tilpassede størrelser
Hvis standardminiaturebilleder ikke er nok for dig, kan du om nødvendigt oprette yderligere et hvilket som helst antal miniaturebilleder med vilkårlige størrelser. For at gøre dette skal du bruge følgende funktion, som du skal tilføje til functions.php-filen i dit WordPress-tema.
Add_image_size($navn, $width, $height, $crop);
- $navn – navnet på miniaturebilledet.
- $width – bredden af miniaturebilledet i pixels.
- $height – thumbnail højde i pixels.
- $crop – beskær (sand) eller reducer (false) billedet (falsk som standard).
Eksempel:
If (function_exists("add_image_size")) (
add_image_size("min-thumb", 180, 210); //180 bred og 210 høj
}
I dette tilfælde, når du uploader et billede, vil WordPress desuden oprette en anden billedfil med en maksimal størrelse på 180 px bred og 210 px høj. Montering udføres altid på den større side. For eksempel, hvis det originale billede var 500x1000 pixels i størrelse, så vil miniaturebilledet være 105x210 pixels stort.
Brug af brugerdefinerede miniaturebilleder
Brug af tilpassede miniaturebilleder adskiller sig ikke fra at bruge standardbilleder. Den eneste forskel er i navnet på miniaturen.
The_post_thumbnail("min-thumb");
Ovenstående kode vil vise min-thumb-thumbnailet oprettet ved hjælp af koden lige ovenfor. Miniaturebilleder med andre navne vises på samme måde.
Dette afslutter denne artikel. Held og lykke til dig og succes med at skabe hjemmesider!
Jeg bruger denne teknik med billeder på min blog. Når brugeren svæver over miniaturebilledet af ethvert indlæg, forstørres det gradvist. Enig, det er slet ikke dårligt og ser smukt ud.
Og dette gøres kun ved hjælp af CSS3, og ganske enkelt. Nu vil jeg fortælle dig, hvordan du gør dette.
Du kan se hvordan det fungerer i demoen og på min blog på hovedsiden.
Jævn billedforstørrelse ved svæv ved kun at bruge CSS3.
HTML
Først skal vi forberede en simpel html-markering til vores billeder, i dette tilfælde vil vi have 3 af dem.
Som du kan se, har alle billeder en billedklasse, som vi faktisk vil sætte parametre til.
CSS
Og her er, hvordan stilene ser ud:
Billede (overløb:skjult; bredde: 380px; højde:250px;)
Vi lavede en almindelig blok på 380 gange 250 pixels. Denne blok skal have samme størrelse som billedet (i vores tilfælde 380 gange 250). Derfor, hvis dit billede er større eller mindre, gør vi størrelsen på .image-blokken til samme størrelse som billedet.
Og sørg for at indstille regeloverløbet: skjult; Det er nødvendigt, så vores billede ikke går ud over blokken, når det forstørres.
Nu sætter vi reglerne for selve billederne:
Image img ( -moz-transition: alle 1s ease-out; -o-transition: alle 1s ease-out; -webkit-transition: alle 1s ease-out; ) .image img:hover( -webkit-transform: scale( 1.1); -moz-transform: skala(1.1); -o-transform: skala(1.1); )
Animationen sker ved hjælp af en parameter i CSS3. Hele animationen tager os et sekund. Hvis du vil have billedet til at forstørre hurtigere, skal du reducere denne værdi.
I demoen er billedet forstørret 1,1 gange. Hvis du indstiller værdien til 2, fordobles billedet i størrelse og så videre.
Det var det, venner. Som lovet vil lektionen være meget enkel. Jeg håber, du kunne lide denne enkle effekt til billeder. Vi ses snart.
Registrerer en ny billedstørrelse (thumbnail).
Registrering betyder, at WordPress ved indlæsning af et billede, udover de grundlæggende dimensioner, vil oprette endnu en fil - en ændret kopi af originalen med de angivne mål.
For at kunne definere et miniaturebillede for et indlæg, skal du aktivere denne funktion ved hjælp af funktionen - add_theme_support("post-thumbnails"); i skabelonfilen functions.php.
Når du opretter dit eget tema til VI temabiblioteket, skal navnet på den nye størrelse indeholde navnet på temaet, . For eksempel:
Add_image_size("mytheme-mini", 200, 200, sand);
Der er ingen kroge.
Vender tilbage
Returnerer intet.
Brug
add_image_size($navn, $width, $height, $crop); $navn (streng) (påkrævet) Navnet på den nye billedstørrelse. $bredde (nummer) (påkrævet) Miniaturebredde (i pixels). $højde (nummer) (påkrævet) Miniaturehøjde (i pixels). $afgrøde (logisk)Hvordan laver man en miniature?
- array(X-koordinat, Y-koordinat) - angivelse af beskæringspositionen, dvs. hvis du angiver et array (array("højre", "top")), så vil billedet blive beskåret fra de angivne positioner.
falsk - skalering: billedet vil blive ændret til den rigtige side. Miniaturebilledet oprettes langs en af de relevante sider: den angivne bredde eller højde. Det endelige billede passer ikke nøjagtigt til de angivne dimensioner.
true - beskæring: thumbnailet oprettes nøjagtigt i henhold til de angivne dimensioner. Den mest egnede side vælges, billedet reduceres i overensstemmelse med den, og den overskydende del af den modsatte side, som ikke er egnet i forhold, skæres af.
beskæring virker kun for nyoprettede billeder. Hvis webstedet allerede har billeder og først derefter tilføjer størrelsen, vil det ikke blive behandlet.
Standard: falsk
Reserverede størrelsesnavne
thumb, thumbnail, medium, large, post-thumbnail
Navnene "thumb" og "thumbnail" er aliaser (synonymer) og henviser til de samme filer.
Du kan også indstille mulighederne for, at miniaturebilledet skal oprettes via:
Update_option("thumbnail_size_w", 160); update_option("thumbnail_size_h", 160); update_option("thumbnail_crop", 1);
Eksempler
Lad os tilføje nye miniaturestørrelser
Vi registrerer nye thumbnail-størrelser ved at tilføje denne kode til functions.php skabelonfilen:
If (function_exists("add_theme_support")) ( add_theme_support("post-thumbnails"); set_post_thumbnail_size(150, 150); // standard post thumbnail size ) if (function_exists("add_image_size")) (addumb_image_size(tilføj_f.eks. , 300, 9999); // 300 i bredden og ingen højdebegrænsning add_image_size("homepage-thumb", 220, 180, true); // Beskær billedet)
Beskær ($crop-parameter)
#1 - falsk (skalering)
Denne linje vil fortælle WP, at når du uploader en ny fil, skal den oprette en mindre kopi af den. I dette tilfælde vil miniaturebilledet blive justeret, så det passer til bredden eller højden, afhængigt af hvilken side der er mere egnet, og den modsatte side reduceres proportionalt og vil højst sandsynligt ikke være større end den angivne størrelse. For eksempel har vi et originalt billede på 2500x1800 pixels, vi laver en miniature på 220x180 pixels. Billedet vil blive reduceret til 250x180 px, dvs. højden vil være 180, som vi angav, men bredden vil være højere end de angivne 250 og ikke 220. I dette tilfælde beskæres billedet ikke, og den reducerede kopi bevarer hele sine proportioner.
Add_image_size("homepage-thumb", 220, 180);
#2 - sand (beskæring)
Hvis du indstiller den fjerde parameter til sand, vil miniaturebilledet blive reduceret og beskåret nøjagtigt til de angivne dimensioner. For eksempel har vi et originalt billede på 2500x1800 pixels, vi laver en miniature på 220x180 pixels. Originalen vil blive reduceret til en højde på 180xp (så vil dens bredde være lig med 250px), og bredden vil blive trimmet ved kanterne med 15px, og som et resultat vil vi få en reduceret kopi: 220x180 pixels:
Add_image_size("hjemmeside-thumb", 220, 180, sand);
#3 - reduktion på den ønskede side
For at reducere billedet langs en af siderne, vi har brug for, skal vi angive en enorm værdi for den modsatte side. For eksempel har vi et billede 2500x1800, vi skal have et miniature 500x1800, så specificerer vi det sådan:
Add_image_size("homepage-thumb", 500, 9999);
#4 - Array(x, y) (beskæring med positionsindikation)
Siden version 3.9 er det blevet muligt at angive beskæringspositionen. Lad os tilføje størrelsen på miniaturebilledet, som vil være 220x220 pixels i størrelse og vil være et fragment fra originalen, som vil blive taget fra det øverste venstre hjørne (venstre, øverst):
Add_image_size("custom-size", 220, 220, array("venstre", "top"));
X_position kan være: "venstre" "center" eller "højre".
Y_position kan være: "top", "center" eller "bund".
Bruger nye størrelser
Vi har registreret 3 størrelser forskellige fra de grundlæggende: post-thumbnails, kategori-thumb, homepage-thumb. For nu at bruge disse størrelser (vise billeder i skabelonen), kan du bruge følgende funktioner:
Udvalgt billede
For at bruge den nye størrelse, når du viser et billede, der er angivet som "Udvalgt billede" af et indlæg, skal du bruge funktionen the_post_thumbnail() i skabelonfilen:
If (has_post_thumbnail()) ( the_post_thumbnail("kategori-thumb"); // kategori-thumb - størrelsesnavn)
Ny størrelse i valget af størrelser ved indsættelse af billede (admin panel)
For at tilføje en ny størrelse til størrelsesvalget, når du indsætter et billede i et indlæg, skal du bruge filterkrogen image_size_names_choose, hvor du skal tilføje en størrelse og angive et klart navn for den:
Add_filter("image_size_names_choose", "mine_tilpassede_størrelser"); function my_custom_sizes($sizes) (retur array_merge($sizes, array("category-thumb" => "Min størrelse",)); )
Til hovedmediefiler (PHP/skabeloner)
Du kan også vise billeder (efter størrelse) direkte fra WordPress-biblioteket efter billed-id. For at gøre dette skal du bruge funktionen wp_get_attachment_image():
// Det antages, at du har et billede med ID 42 i dit bibliotek... echo wp_get_attachment_image(42, "category-thumb");
Hvis vi kun skal have billedets URL og ikke et færdigt tag , og brug derefter wp_get_attachment_image_src() funktionen.
Plugins
- Simple billedstørrelser - giver dig mulighed for at oprette nye miniaturestørrelser direkte fra mediepanelet. Han kan også genskabe miniaturer. Det tilføjer nye størrelser til indlægsvalget, så du kan indsætte nye størrelser i indlæg. Du kan vælge, hvilke størrelser du gerne vil genskabe, og for hvilke typer indlæg du skal gøre dette.
Regenerer miniaturebilleder - Dette plugin giver dig mulighed for at oprette nye dimensioner for hvert uploadet billede. Nyttigt, når du har ændret eller tilføjet nye miniaturestørrelser (via Indstillinger > Medier), mens du allerede har downloadet billeder i dit bibliotek. Eller når du ændrer størrelsen på "Udvalgt billede" af et indlæg.
Force Regenerate Thumbnails - sletter tidligere oprettede størrelser og opretter nye baseret på de aktuelle indstillinger.
AJAX thumbnail rebuild - giver dig mulighed for at genopbygge thumbnails. Nyttigt, hvis du brugte add_image_size()-funktionen, når du allerede har indlæst billeder. (Det er et langsomt plugin, men det lider ikke af hukommelsesfejl, der ikke er tildelt.)