Praktik yang cukup umum di situs web modern adalah memperbesar blok dengan gambar dengan lancar. Bagaimana melakukan ini dengan menggunakan CSS?

Zoom gambar halus saat hover CSS

Kotak (
meluap:tersembunyi;
lebar: 250 piksel;
tinggi:250 piksel;
}
Semuanya seperti yang dinyatakan - balok persegi, ukurannya mirip dengan standar, bukan gambar yang diperbesar, lalu juga berukuran 250 kali 250.
Properti overflow:hidden, seperti yang disebutkan sebelumnya, tidak mengizinkannya melampaui batas blok saat diperbesar.
Properti yang terkait dengan gambar:

Gambar kotak (
-moz-transition: semua kemudahan 1;
-o-transisi: semua kemudahan 1;
-webkit-transition: kemudahan semua 1;
transisi: semua kemudahan 1;
}

Gambar kotak: arahkan kursor (
-transformasi webkit: skala(1.2);
-moz-transform: skala(1.2);
-o-transformasi: skala(1.2);
transformasi: skala(1.2);
}
Tidak ada cara untuk melakukan ini tanpa CSS3. Semua browser modern animasi akan ditampilkan. Anda memerlukan parameter transisi dan transformasi. Kami mengatur waktu animasi menjadi 1 detik (1 detik). Peningkatannya akan menjadi 1,2 kali lipat. Anda dapat mengubahnya sesuai selera Anda.
Sekarang misalnya bekerja!

Register ukuran baru gambar (thumbnail).

Registrasi berarti WordPress, saat memuat gambar, selain dimensi dasar, akan membuat file lain - salinan asli yang dimodifikasi dengan dimensi yang ditentukan.

Untuk dapat menentukan gambar mini untuk sebuah postingan, Anda perlu mengaktifkan fitur ini menggunakan fungsi - add_theme_support("post-thumbnails"); dalam file template function.php.

Saat membuat tema Anda sendiri untuk direktori tema VI, nama ukuran baru harus berisi nama tema, . Misalnya:

Add_image_size("tema-mini", 200, 200, benar);

Tidak ada kait.

Kembali

Tidak mengembalikan apa pun.

Penggunaan

(logis)

Bagaimana cara membuat miniatur?

false - scaling: gambar akan diubah ukurannya ke sisi yang sesuai. Thumbnail dibuat sepanjang salah satu sisi yang sesuai: lebar atau tinggi yang ditentukan. Gambar akhir tidak akan sama persis dengan dimensi yang ditentukan.

• true - cropping: thumbnail dibuat persis sesuai dengan dimensi yang ditentukan. Sisi yang paling sesuai dipilih, gambar diperkecil sesuai dengan itu, dan bagian berlebih dari sisi yang berlawanan, yang tidak sesuai proporsinya, terpotong.

susunan(koordinat X, koordinat Y) - indikasi posisi pemotongan, mis. jika Anda menentukan array (array("right", "top")), maka gambar akan dipotong dari posisi yang ditentukan. crop hanya berfungsi lagi gambar yang dibuat

. Jika situs sudah ada gambarnya dan baru kemudian ditambah ukurannya, maka tidak akan diproses.

Bawaan: salah

Nama ukuran yang dipesan

jempol, thumbnail, sedang, besar, pasca-thumbnail

Nama "thumb" dan "thumbnail" adalah alias (sinonim) dan merujuk pada file yang sama.

Anda juga dapat mengatur opsi pembuatan thumbnail melalui:

Update_option("ukuran_thumbnail_w", 160); update_option("ukuran_thumbnail_h", 160); update_option("thumbnail_crop", 1);

Contoh

Mari tambahkan ukuran thumbnail baru

Kami mendaftarkan ukuran thumbnail baru dengan menambahkan kode ini ke file template function.php:

If (function_exists("add_theme_support")) ( add_theme_support("post-thumbnails"); set_post_thumbnail_size(150, 150); // ukuran thumbnail postingan default ) if (function_exists("add_image_size")) ( add_image_size("category-thumb " , 300, 9999); // lebar 300 dan tanpa batas tinggi add_image_size("homepage-thumb", 220, 180, true);

Pangkas ($parameter pangkas)

#1 - salah (penskalaan)

Baris ini akan memberitahu WP bahwa ketika mengunggah file baru, ia perlu membuat salinan yang lebih kecil. Dalam hal ini, thumbnail akan disesuaikan agar sesuai dengan lebar atau tinggi, tergantung sisi mana yang paling cocok, dan sisi sebaliknya akan diperkecil secara proporsional dan kemungkinan besar tidak akan lebih besar dari ukuran yang ditentukan. Misal kita punya gambar asli berukuran 2500x1800 piksel, kita membuat miniaturnya berukuran 220x180 piksel. Gambar akan diperkecil menjadi 250x180 px, mis. tingginya akan menjadi 180, seperti yang kami tunjukkan, tetapi lebarnya akan lebih tinggi dari yang ditentukan 250 dan bukan 220. Dalam hal ini, gambar tidak dipotong dan salinan yang diperkecil mempertahankan seluruh proporsinya.

Add_image_size("jempol-beranda", 220, 180);

Jika Anda menyetel parameter keempat ke true, thumbnail akan diperkecil dan dipotong agar pas dimensi yang ditentukan. Misal kita punya gambar asli berukuran 2500x1800 piksel, kita membuat miniaturnya berukuran 220x180 piksel. Dokumen asli akan dikurangi menjadi tinggi 180xp (maka lebarnya akan sama dengan 250px), dan lebarnya akan dipangkas di bagian tepinya sebesar 15px dan sebagai hasilnya kita akan mendapatkan salinan yang diperkecil: 220x180 piksel:

Add_image_size("jempol-beranda", 220, 180, benar);

#3 - pengurangan pada sisi yang diinginkan

Untuk memperkecil gambar di salah satu sisi yang kita perlukan, kita perlu menentukan nilai yang besar untuk sisi yang berlawanan. Misal kita punya gambar 2500x1800, kita perlu mendapatkan miniatur 500x1800, lalu kita tentukan seperti ini:

Add_image_size("jempol-beranda", 500, 9999);

#4 - Array(x, y) (memotong dengan indikasi posisi)

Sejak versi 3.9, posisi pemotongan dapat ditentukan. Mari kita tambahkan ukuran thumbnail, yang akan berukuran 220x220 piksel dan merupakan fragmen dari aslinya, yang akan diambil dari sudut kiri atas (kiri, atas):

Add_image_size("ukuran khusus", 220, 220, array("kiri", "atas"));

X_position dapat berupa: "kiri" "tengah" atau "kanan".
Y_position dapat berupa: "atas", "tengah" atau "bawah".

Menggunakan ukuran baru

Kami telah mendaftarkan 3 ukuran berbeda dari yang dasar: post-thumbnail, kategori-thumb, homepage-thumb. Untuk sekarang menggunakan ukuran ini (menampilkan gambar di template), Anda dapat menggunakan fungsi berikut:

Gambar unggulan

Untuk menggunakan ukuran baru saat menampilkan gambar yang ditetapkan sebagai “Gambar Unggulan” dari sebuah postingan, Anda perlu menggunakan fungsi the_post_thumbnail() di file template:

If (has_post_thumbnail()) ( the_post_thumbnail("category-thumb"); // kategori-thumb - nama ukuran)

Ukuran baru dalam pemilihan ukuran saat menyisipkan gambar (panel admin)

Untuk menambahkan ukuran baru ke pilihan ukuran saat memasukkan gambar ke dalam postingan, Anda perlu menggunakan kait filter image_size_names_choose, di mana Anda perlu menambahkan ukuran dan menentukan nama yang jelas untuknya:

Add_filter("ukuran_gambar_nama_pilih", "ukuran_kustom_saya"); function my_custom_sizes($sizes) ( return array_merge($sizes, array("category-thumb" => "Ukuran saya",)); )

Untuk file media utama (PHP/Templat)

Anda juga dapat menampilkan gambar (berdasarkan ukuran) langsung dari perpustakaan WordPress berdasarkan ID gambar. Untuk melakukan ini, gunakan fungsi wp_get_attachment_image() :

// Diasumsikan bahwa Anda memiliki gambar dengan ID 42 di perpustakaan Anda... echo wp_get_attachment_image(42, "category-thumb");

Jika kita hanya perlu mendapatkan URL gambarnya dan bukan tag yang sudah jadi , lalu gunakan fungsi wp_get_attachment_image_src().

Plugin

Regenerasi Thumbnail - Plugin ini memungkinkan Anda membuat dimensi baru untuk setiap gambar yang diunggah. Berguna ketika Anda telah mengubah atau menambahkan ukuran thumbnail baru (melalui Pengaturan > Media) saat Anda sudah mengunduh gambar di perpustakaan Anda. Atau saat Anda mengubah ukuran "Gambar Unggulan" dari sebuah postingan.

Paksa Regenerasi Thumbnail - menghapus ukuran yang dibuat sebelumnya dan membuat yang baru berdasarkan pengaturan saat ini.

Pembuatan ulang gambar mini AJAX - memungkinkan Anda membuat ulang gambar mini. Berguna jika Anda menggunakan fungsi add_image_size() saat gambar sudah dimuat. (Ini adalah plugin yang lambat, tetapi tidak mengalami kesalahan memori yang tidak dialokasikan.)

1. Ukuran Gambar Sederhana - memungkinkan Anda membuat ukuran thumbnail baru langsung dari panel Media. Dia juga bisa membuat ulang miniatur. Ini menambahkan ukuran baru ke pilihan postingan sehingga Anda dapat memasukkan ukuran baru ke dalam postingan. Anda dapat memilih ukuran mana yang ingin Anda buat ulang dan untuk jenis postingan apa Anda perlu melakukan ini.

Arti memperbesar suatu bagian suatu gambar

Tentunya Anda pernah melihat skrip serupa dipasang di situs web toko online besar, ketika saat melihat suatu produk Anda dapat menggerakkan mouse ke atas gambar dan pada saat yang sama bagian persisnya di mana kursor mouse berada akan diperbesar. saat ini. Ini sangat berguna ketika Anda perlu mempelajari suatu produk secara detail, misalnya peralatan Rumah Tangga, ponsel, jam tangan, perhiasan, apa saja. Pada saat yang sama, jendela pop-up yang tidak perlu tidak akan terbuka, yang cukup nyaman dan sekarang Anda akan mengerti alasannya.

Maksud dari cara memperbesar suatu bagian gambar dengan mengarahkan kursor mouse adalah ukuran detail gambar dapat melebihi resolusi layar pengguna, misalnya resolusi layar laptop tempat situs dilihat adalah 1280x800, dan ukuran detail gambar 1920x900. Yang jelas tidak akan muat seluruhnya di layar, jadi perbesar saja metode klasik menggunakan jendela drop-down tidak cocok di sini. Anda perlu memperkecil gambar sesuai ukuran layar pengguna, atau menskalakannya (lebih baik tidak melakukan ini), atau menggunakan trik dan memperbesar hanya sebagian gambar. Dalam hal ini, situs akan terlihat bagus pada monitor besar dan kecil, tetapi ukurannya gambar detail akan cukup besar bagi pengguna untuk mempelajarinya secara detail.

Keuntungan dan Kerugian

Seperti yang kami sebutkan sebelumnya, keuntungan utama dari skrip untuk memperbesar bukan keseluruhan gambar, tetapi hanya sebagian saja, yang dikembangkan oleh staf studio kami, adalah independensinya dari resolusi layar pengguna, namun ada keuntungan lain yang dapat disorot:

• kemudahan instalasi;
• fleksibilitas penyesuaian;
• ukuran JavaScript minimum;
• markup HTML sederhana;
• kompatibel dengan jQuery versi apa pun;
• kompatibilitas lintas browser;
• cocok untuk resolusi yang berbeda layar;
• lebih baik daripada analog yang canggih;
• bebas;
• penjelasan rinci tentang prinsip pengoperasian dan kode sumber yang mudah dibaca.

Seperti yang Anda lihat, ada banyak keuntungan dan jelas. Ya, tentu saja, Anda dapat mengunduh skrip serupa atau mencurinya dari beberapa skrip toko online besar. Metode ini, omong-omong, disebut Cloud Zoom, yang sebenarnya berbayar dan terlalu canggih. Sekarang skrip seperti itu tersebar luas dan digunakan di banyak situs, tetapi Anda harus menghabiskan banyak waktu untuk memahami dan mengintegrasikan skrip serupa ke situs Anda. Pada artikel ini, kami akan menjelaskan secara rinci pengoperasian skrip kami, dan mengingat kodenya hanya terdiri dari beberapa baris, maka Anda akan dapat memahami inti masalahnya hanya dalam beberapa menit.

Jika kita berbicara tentang kekurangan, maka hanya satu hal yang terlintas dalam pikiran, dan menyebutnya sebagai kekurangan bisa jadi berlebihan. Faktanya adalah gambar yang diperbesar dimuat terlebih dahulu di lapisan tersembunyi, bahkan sebelum pengguna mengklik di mana pun. Kita hanya memerlukan ini karena ketika kursor mouse berada di atas gambar, kita memerlukan fragmen yang diperbesar agar segera muncul, dan untuk ini kita harus menggunakan pramuat. Namun tidak ada yang salah dengan hal ini, karena biasanya hanya akan ada satu gambar seperti itu di halaman, dan ukurannya tidak terlalu besar (200-300 KB dengan resolusi 1800x1100 seperti pada contoh kita) sehingga perlu dikhawatirkan. lalu lintas Internet pengguna.

Perkembangannya detail, dari A sampai Z

Nah, sekarang kita telah menguraikan secara singkat inti dari metode ini, dan juga menyebutkan kelebihan dan kekurangannya, sekarang saatnya untuk mulai berbisnis dan mulai menerapkannya. Saya ingin segera mencatat bahwa tidak ada yang rumit dalam skrip ini dan kami berharap algoritmanya akan jelas bagi Anda untuk pertama kalinya.

markup HTML

Seperti biasa, kita mulai dengan markup HTML halaman. Ini sangat sederhana dan hanya berisi beberapa baris kode:

Semuanya di sini dasar. Wadah pertama dengan kelas pramuat, seperti namanya, bertanggung jawab untuk memuat gambar besar terlebih dahulu. Kami telah membahas mengapa hal ini perlu sedikit lebih awal. Di dalam wadah ini Anda menempatkan gambar yang akan digunakan saat diperbesar. Beberapa poin penting dan tidak boleh dilewatkan:

• coba tempatkan wadah ini setinggi mungkin di DOM (dalam kode halaman) - semakin tinggi, semakin cepat skrip siap bekerja;
• menyembunyikan wadah pramuat dari mata pengguna, bergerak melampaui area layar yang terlihat ( tampilan: tidak ada ini tidak akan berhasil).

Berikutnya adalah wadah yang berisi preview. Kami memberinya kelas dapat diperbesar, yang, seperti yang Anda duga, berarti gambar dapat diperbesar. Gambar di dalamnya ditampilkan secara default. Ada beberapa juga di sini poin-poin penting yang tidak boleh diabaikan:

• ukuran wadah harus ditentukan secara eksplisit (lebar dan tinggi sama dengan dimensi pratinjau);
• wadah tidak boleh berisi bilah gulir, dan apa pun yang tidak muat di dalamnya tidak boleh ditampilkan (properti overflow CSS);
• saat mengarahkan kursor, Anda juga dapat mengubah kursor mouse ke kursor non-standar atau, seperti pada contoh, ke salah satu kursor standar yang sesuai (dalam bentuk pemandangan).

Poin pentingnya di sini adalah menambahkan atribut khusus ke gambar kecil:

• data-pratinjau-url(jalur menuju gambar kecil);
• data-img-url(jalur ke gambar detail).

Atribut-atribut ini bisa disebut sesuka Anda, bukan itu intinya. Yang utama adalah mengandung yang absolut atau tautan relatif ke gambar yang sesuai. Mengapa menduplikasi jalur ke gambar kecil, Anda bertanya, padahal sudah ditunjukkan dalam tag gambar. Jangan khawatir, Anda akan memahaminya nanti.

gaya CSS

CSSnya terlihat cukup sederhana dan memenuhi semua persyaratan yang disebutkan sebelumnya:

Pramuat ( posisi: absolut; z-index: -1; atas: -5000px; kiri: -5000px; ) .zoomable ( kursor: crosshair; lebar: 600px; tinggi: 368px; overflow: tersembunyi; margin: 0 otomatis; )

Pramuat gambar detail

Seperti yang kami sebutkan sebelumnya, pramuat Kami membutuhkan gambar yang besar sehingga ketika pengguna mengarahkan kursor mouse ke gambar pratinjau, skrip kami benar-benar siap untuk bekerja dan tidak ada penundaan. Berikut adalah dua alasan utama mengapa memuat gambar detail terlebih dahulu dalam hal ini sepenuhnya dibenarkan:

• gambar detailnya harus di-cache terlebih dahulu oleh browser sehingga, jika perlu, dapat langsung ditampilkan di layar;
• Agar skrip berfungsi, Anda perlu menghitung koefisien - rasio ukuran gambar detail dengan ukuran pratinjau (lebih lanjut tentang ini nanti).

fungsi JavaScript

Sekarang semuanya sudah siap dan kita beralih ke bagian yang paling menarik - JavaScript, berkat semua ini akan berhasil.

Jadi, mari kita mulai dan segera bawa seluruh skrip kerja, agar mudah untuk disalin, lalu kita akan melihatnya secara detail di beberapa bagian:

$(window).load(function() ( $(".zoomable").hover(function() ( $(".zoomable img").stop().animate((opacity: 0), 0, function( ) ( $(".zoomable img").attr((src: $(".zoomable img").attr("data-img-url"))); )).animate((opasitas: 1), 300 ); ), fungsi() ( $(".gambar yang dapat diperbesar").stop().animate((opasitas: 0), 0, fungsi() ( $(".gambar yang dapat diperbesar").attr((src: $ (".zoomable img").attr("data-preview-url"))).css((margin: "0 0"));animate((opacity: 1), 300 )); ".preload img").width() / $(".zoomable img").width(); $(".zoomable").mousemove(function(e) ( var pX = e.pageX - $(ini) .offset().kiri; var pY = e.halamanY - $(ini).offset().top; var iX = pX * c - pX; ".zoomable img").css((margin: "-" + iY + "px -" + iX + "px"));

Pertama-tama, Anda harus memperhatikan fakta itu fungsi ini dipanggil bukan setelah DOM siap, tetapi setelahnya beban penuh halaman:

$(fungsi() ( console.log("DOM sudah siap"); )); $(window).load(function() ( console.log("Halaman sudah siap"); ));

Intinya standarnya $(fungsi()()); ini tidak akan berhasil untuk kita di sini, karena jika struktur dokumen sudah siap, bukan berarti semua isinya sudah dimuat file multimedia. Dan karena sangat penting bagi kami untuk mendapatkan dimensi gambar detail bahkan sebelum skrip mulai berjalan, keputusan ini sepenuhnya dapat dibenarkan.

Jadi, pertama-tama, kita menangani event mouseover pada gambar kita menggunakan fungsi standar jQuery - melayang() .

$(".zoomable").hover(fungsi() ( ), fungsi() ( ));

Jika kursor mouse berada di atas wadah dapat diperbesar, kami menyembunyikan gambar tersebut untuk sementara dan mengganti atributnya secara diam-diam src(sumber), lalu menampilkannya dengan lancar di layar. Dalam hal ini, tidak akan ada lompatan yang tidak menyenangkan dan semuanya akan berjalan lancar.

Jika mouse tidak berada di atas wadah dapat diperbesar, kami melakukan operasi yang sama, hanya sekarang kami mengembalikan semuanya ke tempatnya seperti semula. Tahap ini adalah bagian paling sederhana dari skrip kita dan tidak seorang pun akan kesulitan memahaminya, jadi mari kita lanjutkan.

Var c = $(".preload img").width() / $(".zoomable img").width();

Baris kode ini menghitung koefisien yang diperlukan untuk skrip kita - rasio ukuran gambar kecil dan besar. Hal ini diperlukan untuk melakukan penskalaan yang akurat, bergantung pada lokasi kursor mouse pengguna saat ini.

Berikutnya adalah bagian terakhir dan terpenting dari skrip kita, yang bertanggung jawab untuk memindahkan gambar besar di lapisan yang dapat diskalakan. Hal ini menciptakan efek seolah-olah kita sedang menggerakkan kaca pembesar imajiner yang tidak terlihat dan pecahan yang diperlukan akan ditampilkan di jendela.

Pertama-tama, kita perlu menangkap peristiwa pergerakan kursor mouse, dan untuk membuat skrip bekerja lebih mudah, kita tidak akan melakukan ini untuk keseluruhan dokumen, tetapi hanya untuk wadahnya. dapat diperbesar. Lagi pula, kami tidak tertarik pada koordinat mouse di luar lapisan target.

$(".zoomable").mousemove(fungsi(e) ( ));

Sekarang kita perlu menghitung koordinat kursor mouse relatif terhadap sudut kiri atas layar. Namun kita tertarik pada lokasi kursor relatif terhadap elemen, dan bukan asal koordinat, jadi kita harus segera mengurangi jarak sudut kiri atas wadah dari koordinat tersebut. dapat diperbesar dari asal:

Var pX = e.pageX - $(ini).offset().kiri; var pY = e.halamanY - $(ini).offset().top;

Yang tersisa bagi kita hanyalah menghitung dan mengganti nilai lekukan ( margin-atas Dan margin-kiri) untuk gambar detail, untuk mengetahui seberapa banyak harus dipindahkan untuk mencapai efek memperbesar bagian gambar. Karena lapisan dapat diperbesar kita punya ukuran tetap, dan segala sesuatu yang melampaui batasnya tidak ditampilkan, maka efek yang diinginkan akan diperoleh dengan menggunakan indentasi negatif:

Var iX = pX * c - pX; var iY = pY * c - pY; $(".gambar yang dapat diperbesar").css((margin: "-" + iY + "px -" + iX + "px"));

Contoh naskah

Sebagai contoh, kami telah memilih gambar yang pembesarannya mungkin menarik bagi banyak orang. Toh Anda pasti setuju kalau semua orang tertarik membaca apa yang tertulis di label botol sampanye :)

P.S. Komentar pada artikel dan distribusi skrip ini dipersilakan.

Pada artikel ini kita akan melihat dasar-dasar bekerja dengannya Gambar mini Wordpress. Mari pelajari cara mengaktifkan dukungan thumbnail dengan tema Wordpress, menambahkan ukuran gambar khusus, dan menggunakan thumbnail di dalamnya Templat WordPress. Semua ini akan membuat bekerja dengan grafik menjadi lebih mudah dengan mengotomatiskan proses pembuatan dan tampilan gambar di situs.

Versi cetak

Menambahkan Dukungan Gambar Kecil ke WordPress

Untuk dapat mengatur gambar sebagai thumbnail untuk halaman WordPress, Anda perlu mengaktifkan dukungan thumbnail di template Anda. Untuk melakukan ini, tambahkan kode berikut ke file function.php tema Anda.

Jika (fungsi_ada("add_theme_support")) (
add_theme_support("post-thumbnail");
}

Setelah ini, saat membuat halaman, kolom kanan akan ditampilkan blok baru"Rekam Gambar Kecil"

Untuk mengatur thumbnail postingan, cukup klik tautannya dan pilih gambar yang diinginkan, lalu klik “Setel Gambar Kecil”. Dalam hal ini, Anda dapat memilih gambar dari pustaka file umum atau mengunggahnya secara terpisah menggunakan pengunggah standar.

Setelah menambahkan thumbnail, gambar yang Anda pilih akan ditampilkan di blok yang sesuai.

Jika blok untuk menambahkan thumbnail tidak muncul di halaman untuk menambahkan/mengedit entri, buka item “Pengaturan Layar” di sebelah kanan sudut atas di samping tombol “Bantuan” dan centang kotak “Posting Gambar Kecil”.

Jika ini tidak membantu, periksa apakah fungsi aktivasi thumbnail telah ditambahkan dengan benar.

Fitur Gambar Kecil di WordPress

Untuk menampilkan thumbnail di tema WordPress, gunakan fungsi khusus the_post_thumbnail(). Ini digunakan di dalam loop WordPress dan dapat mengambil dua parameter – ukuran thumbnail dan serangkaian atribut.

The_post_thumbnail($ukuran, $attr);

• $size – nama thumbnail (thumbnail standar, sedang, besar, penuh) atau array yang berisi lebar dan tinggi gambar, misalnya array(64, 64). Anda juga dapat memberikan nilai pada nama thumbnail dengan ukuran sewenang-wenang yang dibuat menggunakan fungsi add_image_size().
• $attr – susunan atribut. Misalnya, untuk menyetel kelas pada suatu gambar, cukup tulis array('kelas' => 'kelas jempol'). Karena parameter lain sangat jarang digunakan, kami tidak akan mempertimbangkannya. Anda dapat membaca lebih lanjut tentang semua arti dalam kode WordPress.

Kode untuk menampilkan thumbnail dengan ukuran berbeda

The_post_thumbnail(); // Parameter dilewatkan -> "post-thumbnail"
the_post_thumbnail("gambar mini"); // Ukuran default: maks 150 piksel x 150 piksel
the_post_thumbnail("sedang"); // Ukuran default: maks 300 piksel x 300 piksel
the_post_thumbnail("besar"); // Ukuran default: maks 640 piksel x 640 piksel
the_post_thumbnail("penuh"); // ukuran asli file yang diunggah
the_post_thumbnail(array(100.100)); // Ukuran khusus (100px x 100px)

Contoh kode siap pakai untuk menampilkan thumbnail di template WordPress

Sebagai contoh, mari kita lihat kode yang menampilkan link thumbnail gambar besar. Ini sangat berguna jika situs Anda menggunakan gambar pop-up. Karena menulis kode secara terpisah cukup merepotkan, akan ada komentar beserta penjelasan di samping setiap baris.

if (has_post_thumbnail()) ( /* Memeriksa thumbnail yang dilampirkan pada postingan */
$large_image_url = wp_get_attachment_image_src(get_post_thumbnail_id(), "besar"); /* Mendapatkan link ke gambar berukuran besar */
gema ""; /* Membuat tautan ke gambar besar menggunakan kelas CSS dan atribut Judul */
the_post_thumbnail("thumbnail", array("class" => "single-thumb")); /* Menampilkan thumbnail dengan kelas satu jempol */
gema ""; /* Menambahkan tag penutup untuk link */
) else ( /* Jika postingan tidak memiliki thumbnail */ ?>
" judul="!}" >
/images/noimage.jpg" width="180" height="180" alt="Tidak ada gambar" /> !}

Mengubah ukuran thumbnail

Secara default, ukuran thumbnail standar dapat diubah langsung melalui panel administratif situs di bagian Pengaturan - File media. Ini termasuk thumbnail, thumbnail sedang dan besar.

Selain itu, Anda dapat mengubah/mengatur ukuran keluaran thumbnail postingan dengan fungsi the_post_thumbnail() menggunakan fungsi set_post_thumbnail_size(), yang harus ditambahkan ke file function.php:

Set_post_thumbnail_size($lebar, $tinggi, $potong);

• $width – lebar thumbnail dalam piksel (default: 0).
• $height – tinggi thumbnail dalam piksel. (standarnya 0).
• $crop – memotong atau memperkecil gambar. benar - bagian gambar dengan dimensi yang ditentukan akan diambil, salah - gambar akan diperkecil secara proporsional, dan semua kelebihan akan dipotong (default: salah).

Menambahkan thumbnail dengan ukuran khusus

Jika gambar mini standar tidak cukup untuk Anda, jika perlu, Anda juga dapat membuat gambar mini dalam jumlah berapa pun dengan ukuran sewenang-wenang. Untuk melakukan ini, gunakan fungsi berikut, yang perlu Anda tambahkan ke file fungsi.php tema WordPress Anda.

Add_image_size($nama, $lebar, $tinggi, $potong);

• $name – nama thumbnail.
• $width – lebar thumbnail dalam piksel.
• $height – tinggi thumbnail dalam piksel.
• $crop – memotong (benar) atau memperkecil (salah) gambar (salah secara default).

Contoh:

Jika (fungsi_ada("tambahkan_ukuran_gambar")) (
add_image_size("ibu jari saya", 180, 210); //Lebar 180 dan tinggi 210
}

Dalam hal ini, saat Anda mengupload gambar, WordPress juga akan membuat file gambar lain dengan ukuran maksimal lebar 180 px dan tinggi 210 px. Pemasangan selalu dilakukan pada sisi yang lebih besar. Misalnya, jika gambar asli berukuran 500x1000 piksel, maka thumbnail akan berukuran 105x210 piksel.

Menggunakan Thumbnail Khusus

Menggunakan thumbnail berukuran khusus tidak berbeda dengan menggunakan thumbnail standar. Perbedaannya hanya pada nama miniaturnya saja.

The_post_thumbnail("ibu jari saya");

Kode di atas akan menampilkan thumbnail jempol saya yang dibuat menggunakan kode tepat di atas. Thumbnail dengan nama lain ditampilkan dengan cara yang sama.

Ini menyimpulkan artikel ini. Selamat mencoba dan sukses dalam membuat website!

Hari ini saya ingin melihat cara memperbesar gambar di CSS. Hal ini dapat dilakukan misalnya dengan menunjuknya, dan peningkatannya sendiri dapat terjadi secara halus atau tajam. Dan semua ini dapat dilakukan dengan berbagai cara.

Peningkatan tajam yang sederhana

Untuk mengubah tampilan gambar saat mengarahkan kursor ke atasnya, kita akan menggunakan kelas semu hover. Caranya cukup dengan mengubah lebar gambar. Saat Anda mengubah lebarnya, otomatis tingginya juga berubah. Misalnya lebar gambar virtual kita adalah 320 piksel. Mari kita perbesar sedikit:

Gambar: arahkan kursor (lebar: 380 piksel; )

Dengan pendekatan ini, ketinggiannya juga bertambah, tetapi semua ini terjadi secara tiba-tiba. Anda juga dapat mengatur parameter kedua - tinggi, tetapi kemudian Anda dapat mengganggu proporsi gambar.

Peningkatan halus karena transformasi

Sekarang kita akan melihat metode yang sangat berbeda. Pertama, pengubahan ukuran akan terjadi dengan lancar. Kedua, alih-alih mengubah lebar, kita akan menggunakan transformasi - ini adalah inovasi CSS3.

Untuk mengaktifkan transisi yang mulus, Anda perlu menambahkan properti transisi ke gambar itu sendiri (bukan gambar yang diarahkan). Itu harus menunjukkan waktu di mana transisi harus dilakukan. Anda juga dapat menambahkan parameter lain, tetapi saya tidak akan membahasnya secara detail hari ini.

Gambar( transisi: 0,4 detik; )

Kami memberi tahu browser bahwa perubahan gaya untuk elemen dengan tag img tidak boleh terjadi secara tiba-tiba, namun harus dilakukan dalam jangka waktu 4 persepuluh detik. Hebat, yang tersisa hanyalah melakukan transformasi itu sendiri ketika mengarahkan kursor ke gambar:

Gambar:hover( transform: skala(1.15, 1.15); )

Pembesaran elemen dilakukan dengan menggunakan properti transformasi dan nilai skalanya (bertambah secara horizontal, vertikal). Jadi, jika ingin memperbesar gambar secara proporsional, kedua nilainya harus sama. Tetapkan nilainya berdasarkan fakta bahwa 1 adalah ukuran gambar normal.

Oleh karena itu, pada entri di atas, saat mengarahkan kursor, kami memperbesar gambar sebesar 15% di setiap sisi dan ini terjadi dengan lancar.

Jadi untuk mengubah ukuran Anda dapat menggunakan resize atau transform. Kedua cara ini mempunyai perbedaan. Jika Anda mengubah ukuran menggunakan lebar, gambar akan memperbesar dan memindahkan semua konten yang ada di dekatnya. Hal ini tidak terjadi dalam kasus transformasi.

Mengubah ukuran di satu sisi saja

Jika Anda perlu memperbesar gambar dalam CSS saat mengarahkan kursor hanya ke satu sisi, ini juga paling mudah dilakukan dengan menggunakan transformasi. Tulis saja seperti ini:

Gambar:hover( transformasi: scaleX(1.2); )

Artinya, setelah kata kunci skala kami secara eksplisit menunjukkan koordinat - X atau Y.