Jika Anda buka folder upload dari site WordPress, maka dapat dilihat, image yang kita upload otomatis dibuat dalam beberapa ukuran oleh WordPress.
Jika kita ingin menampilkan foto portrait pada halaman single-instructor.php dan foto landscape pada single-program.php. Kita dapat atur dengan meregistrasikan ukuran yang diingikan pada functions.php
function aftertheme(){
register_nav_menu('headerMenu', 'Header Menu');
register_nav_menu('FooterMenu1', 'Footer Menu 1');
register_nav_menu('FooterMenu2', 'Footer Menu 2');
add_theme_support('title-tag');
add_theme_support('post-thumbnails');
add_image_size('InstructorLnd', 400, 260, true);
add_image_size('InstructorPort', 300, 420, true);
}
add_action('after_setup_theme', 'aftertheme');
Perintah add_image_size memiliki parameter:
- Nama dari image size, bebas, silakan beri nama yang sesuai dengan keperluan.
- Width, lebar dari image.
- Height, tinggi dari image.
- Crop, default adalah false. Bila diisi true, maka image akan dicrop. Default posisi crop adalah center.
JIka Anda ingin mengatur cropping lebih detail dengan menggunakan array, silakan lihat disini.
Coba tambahkan instructor baru dengan featured image. Lalu lihat lagi isi dari folder upload. Kali ini kita memiliki tambahan 2 ukuran image.
Jika Anda perhatikan, image diupload sebelum custom image size didefinisikan tidak akan memiliki image dengan ukuran tersebeut. Kita akan gunakan plugin untuk otomatis meregenerate image lama agar memiliki ukuran custom.
Plugin yang digunakan adalah Regenerate Thumbnails by Alex Mills. Install dan activate plugin.
Akses plugin dari Menu Tools – Regenerate Thumbnails.
Tekan tombol Regenerate Thumbnails for The 3 Featured Images Only. Jika Anda buka folder upload, maka 2 custom image size sudah di generate oleh plugin.
Menggunakan Custom Image Size
Untuk menggunakan custom image size sangat mudah. Pada fungsi the_post_thumbnail(), kita isi dengan custom image size yang dideklarasikan pada functions.php.
Contoh, pada file single-instructor.php, kita akan gunakan image portrait, maka fungsi akan diisi paramert seperti berikut: the_post_thumbnail(‘InstructorPort‘);
<?php
get_header();
while(have_posts()){
the_post();
?>
<div class="page-banner">
<div class="page-banner__bg-image" style="background-image: url(<?php echo get_theme_file_uri('images/ocean.jpg') ?>);"></div>
<div class="page-banner__content container container--narrow">
<h1 class="page-banner__title"><?php the_title(); ?></h1>
<div class="page-banner__intro">
<p>JANGAN LUPA NANTI DIGANTI</p>
</div>
</div>
</div>
<div class="container container--narrow page-section">
<div class="generic-content">
<div class="row group">
<div class="one-third"><?php the_post_thumbnail('InstructorPort'); ?></div>
<div class="two-thirds"><?php the_content(); ?></div>
</div>
</div>
<?php
$relatedProg = get_field('related_program');
if ($relatedProg){
echo '<hr class="section-break">';
echo '<h2 class="headline headline--medium">Program Studi</h2>';
echo '<ul class="link-list min-list">';
foreach ($relatedProg as $prog){ ?>
<li><a href="<?php echo get_the_permalink($prog); ?>"><?php echo get_the_title($prog); ?></a></li>
<?php
}
echo '</ul>';
}
?>
</div>
<?php
}
get_footer();
?>
Lakukan hal yang sama untuk file single-program.php, kali ini parameter yang digunakan adalah ‘InstructorLnd’. Berikut isi dari single-program.php
<?php
get_header();
while(have_posts()){
the_post();
?>
<div class="page-banner">
<div class="page-banner__bg-image" style="background-image: url(<?php echo get_theme_file_uri('images/ocean.jpg') ?>);"></div>
<div class="page-banner__content container container--narrow">
<h1 class="page-banner__title"><?php the_title(); ?></h1>
<div class="page-banner__intro">
<p>JANGAN LUPA NANTI DIGANTI</p>
</div>
</div>
</div>
<div class="container container--narrow page-section">
<div class="metabox metabox--position-up metabox--with-home-link">
<p><a class="metabox__blog-home-link" href="<?php echo get_post_type_archive_link('program'); ?>"><i class="fa fa-home" aria-hidden="true"></i> Programs Home</a> <span class="metabox__main"><?php the_title(); ?></span></p>
</div>
<div class="generic-content"><?php the_content(); ?></div>
<?php
//menampilkan instructor
$relInstructor = new WP_Query(array(
'post_per_page' => -1,
'post_type' => 'instructor',
'orderby' => 'title',
'order' => 'ASC',
'meta_query' => array(
array(
'key' => 'related_program',
'compare' => 'LIKE',
'value' => '"' . get_the_ID() . '"'
)
)
));
if ($relInstructor->have_posts()){
echo '<hr class="section-break">';
echo '<h2 class="headline headline--medium">Related Instructor(s)</h2><br/>';
echo '<ul class="professor-cards">';
while($relInstructor->have_posts()){
$relInstructor->the_post();
?>
<li class="professor-card__list_item">
<a class="professor-card" href="<?php the_permalink();?>">
<img class="professor-card__image" src="<?php the_post_thumbnail_url('InstructorLnd');?>">
<span class="professor-card__name"><?php the_title();?></span>
</a>
</li>
<?php
}
echo '</ul>';
}
wp_reset_postdata();
//menampilkan event
$today = date('Ymd');
$relEvents = new WP_Query(array(
'post_per_page' => 2,
'post_type' => 'event',
'meta_key' => 'event_date',
'orderby' => 'meta_value_num',
'order' => 'ASC',
'meta_query' => array(
array(
'key' => 'event_date',
'compare' => '>=',
'value' => $today
),
array(
'key' => 'related_program',
'compare' => 'LIKE',
'value' => '"' . get_the_ID() . '"'
)
)
));
if ($relEvents->have_posts()){
echo '<hr class="section-break">';
echo '<h2 class="headline headline--medium">Upcoming event</h2><br/>';
while($relEvents->have_posts()){
$relEvents->the_post();
?>
<div class="event-summary">
<a class="event-summary__date t-center" href="<?php the_permalink();?>">
<span class="event-summary__month">
<?php
if (get_field('event_date') != NULL) {
$eventDate = DateTime::createFromFormat('d/m/Y', get_field('event_date'));
}else{
$eventDate = DateTime::createFromFormat('d/m/Y', '01/01/2020');;
}
echo $eventDate->format('M');
?>
</span>
<span class="event-summary__day"><?php echo $eventDate->format('d'); ?></span>
</a>
<div class="event-summary__content">
<h5 class="event-summary__title headline headline--tiny"><a href="<?php the_permalink();?>"><?php the_title();?></a></h5>
<p><?php
if (has_excerpt()){
echo get_the_excerpt();
}else{
echo wp_trim_words(get_the_content(), 15) ;
}
?> <a href="<?php the_permalink();?>" class="nu gray">Learn more</a></p>
</div>
</div>
<?php
}
}
?>
</div>
<?php
}
get_footer();
?>