ปกติจะมีการเพิ่มรูปให้อัตโนมัติขนาด 150×150 300×300 1024×1024 และ รูป original
- Thumbnail (150 x 150 px)
- Medium (300px height and width)
- Large (1024px height and width)
- Full size (the images’ original resolution)
โดยตั้งค่าได้ที่ Dashboard>setting>media แต่มีบางธีม เพิ่มรูปให้มากกว่านั้น อาจมี 10 ขนาด ซึ่งมักเขียนคำสั่งอยู่ใน fuctions.php หรือ บางธีม อยู่ที่โฟลเดอร์อื่น เช่น Renden (renden\admin\main\options\00.theme-setup.php) ธีมตัวนี้ตะมีหลายธีมเพิ่มเติม เช่น Renden-x Renden-business ซึ่งใช้ไฟล์หลักของ Renden และ มีปัญหาเมื่ออัพโหลด รูปหน้าแรก มันจะครอป รูปขนาดที่ตั้งมา แล้วแสดงผลที่ควบคุมขนาดรูปได้ยาก ต้องไปแก้ที่ไฟล์นั้น
ใน Readme.txt มีบอกไว้
ให้ไปแก้ที่
00.theme-setup.php และ 02.homepage.php
ตอนนี้ได้ เราอาจเปลี่ยนชื่อ เพื่อสะดวกในการทำงาน จาก column3-1/3 ซึ่งเป็น 4 รูปที่จะใส่เข้าไปที่หน้าแรก เป็น HOME4grid
ส่วนขนาดอื่นๆ อาจแสดงผลในหน้าอื่นๆ ลองหาดู
= 1.2.7
- Updated: Post share icons now display correctly on single post pages.
- Updated: Image dimensions for column3-1/3 size changed to be 380px x 127px.
https://developer.wordpress.org/reference/functions/add_image_size/
True คือ crop อัตโมัติ ถ้าไม่ต้องการก็ลบ
False (default): box-resize - (resize image against the constraining dimension)
True: hard-crop - crop the image exactly to the specified dimensions
add_image_size( 'category-thumb', 300 ); // 300 pixels wide (and unlimited height)
add_image_size( 'homepage-thumb', 220, 180, true ); // (cropped)
https://www.wpbeginner.com/wp-tutorials/how-to-create-additional-image-sizes-in-wordpress/
add_image_size( 'sidebar-thumb', 120, 120, true ); // Hard Crop Mode
add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode
add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode
https://wordpress.stackexchange.com/questions/39798/thumbnail-cropping-with-add-image-size
https://wordpress.stackexchange.com/questions/315685/add-image-size-is-scaling-even-though-crop-is-set-to-true
https://maheshwaghmare.com/adding-image-sizes-with-add_image_size-in-wordpress/
https://hostingwiki.org/add_image_size/
web https://kinsta.com/blog/photography-website/
ตัวอย่างการสร้าง
https://wpshout.com/wordpress-custom-image-sizes/
การเพิ่ม Thumbnails (Featured Image) ในหลายๆ ขนาด เพื่อนำมาใช้ในหลายๆ ตำแหน่ง
คำสั่ง function seed_setup คือ การสร้างฟังก์ชั่นที่ชื่อว่า seed_setup ขึ้นมาใช้งานลเปลี่ยนชื่ออื่นได้
คำสั่ง add_theme_support คือ คำสั่งพื้นฐานในการเปิดการใช้งาน thumbnails
คำสั่ง set_post_thumbnail_size คือ คำสั่งรูปขนาดพื็นฐานของ thumbnails
คำสั่ง add_image_size คือ คำสั่งเพิ่มขนาดหรือสัดส่วนของ thumbnails ที่แตกต่างจากรูปพื้นฐาน
คำสั่ง add_action คือ คำสั่งที่นำฟังก์ชั่นที่เราสร้างไปแทรกไว้ที่ after_setup_theme
ใน functions.php
function seed_setup() {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 600, 400, TRUE );
add_image_size( 'square', 600, 600, TRUE );
add_image_size( 'mini', 50, 50, TRUE );
}
add_action( 'after_setup_theme', 'seed_setup' );
ในตำแหน่งที่ต้องการให้รูป thumbnails ไปแสดง
<?php
//แสดงผลตามขนาดพื้นฐาน
the_post_thumbnail();
//แสดงผลตามขนาด square
the_post_thumbnail('square');
//แสดงผลตามขนาด mini
the_post_thumbnail('mini');
?>
https://beanthemes.com/add-thumbnails-function/
Featured Image ในฝั่ง Developer เรียกว่า The Post Thumbnail
กำหนดคำสั่งให้ธีมสนับสนุนฟังก์ชันนี้ได้ด้วยการเพิ่มคำสั่งนี้ลงไปในไฟล์ functions.php
add_theme_support( 'post-thumbnails' );
ขนาดความกว้าง x สูง ของรูป จะถูกกำหนดให้ตามที่เราตั้งค่าไว้ในเมนู Setting > Media > Thumbnail Size (เดิม 150x150 , 300x300 ,...)
หากต้องการจะให้ธีมรองรับ Post Thumbnail หลายๆขนาด
สร้าง Multiple Post thumbnail Size Support โดยการเขียนฟังก์ชั่น add_image_size เพิ่มใน functions.php
add_image_size( 'small-post-thumbnail', 200, 200 ); //ชื่อว่า small-post-thumbnail กว้าง 200 สูง 200
add_image_size( 'single-post-thumbnail', 690, 180 ); //ชื่อว่า single-post-thumbnail กว้าง 690 สูง 180 ไม่ crop
add_image_size( 'medium-post-thumbnail', 300 ); //ชื่อว่า medium-post-thumbnail กว้าง 300px สูงอัตโนมัติตาม ratio
add_image_size( 'home-post-thumbnail', 400, 400,true ); //ชื่อว่า home-post-thumbnail กว้าง 400 สูง 400 และครอปรูปให้ได้สัดส่วนนี้ นับจากศูนย์กลางรูป
เมื่อเราจะนำตัว Post Thumbnail มาแสดงในธีม ใช้คำสั่ง
the_post_thumbnail(‘ชื่อที่เราตั้งไว้สำหรับแต่ละตัว’); เช่น
<?php the_post_thumbnail('home-post-thumbnail'); ?>
ก็จะได้ภาพ Thumbnail ขนาด 400x400px ที่ถูกครอปมาแสดงในหน้าเว็บ
buksohn.com/featured-image-คืออะไรใน-wordpress.html
ถ้าไม่เปลี่ยนค่ามาตรฐาน สามารถเพิ่ม “ชนิดของขนาดรูป” อันใหม่ได้
add_image_size( 'featured', 900, 500, true );
เวลาจะใช้ ไปไฟล์ที่ต้องการ แล้วเปลี่ยนจาก the_post_thumbnail() เป็น the_post_thumbnail(‘featured’)
http://www.thaiseoboard.com/index.php/topic,358354.msg4930188.html#msg4930188
https://developer.wordpress.org/reference/functions/remove_image_size/
remove_image_size
โดย $name คือ ชื่อของรูปที่เราต้องการลบออกไป // แต่ชื่อรูปที่เราไม่สามารถลบขนาดออกไปได้คือ thumb, thumbnail, medium, large, post-thumbnail หรือชื่อรูปที่เป็นมาตรฐานของ WordPress เอง
บางทีดึง post ที่เราต้องการมาโชว์พร้อมรูป featured image แล้ว plugin ดันใช้ขนาดที่ไม่ตรงกับที่เราต้องการใช้งาน เราก็มา remove_image_size() ขนาดรูปใน plugin ตัวนี้ แล้วก็ add_image_size() เข้าไปใหม่ในชื่อเดิม
functions.php และใส่ code
<?php
add_action('after_setup_theme', 'change_plugin_image_size');
function change_plugin_image_size() {
remove_image_size('plugin-image');
add_image_size('plugin-image', 300, 150, true);
}
?>