Image trong advanced custom fields WordPress

27/11/2014 by Nguyễn Mạnh Hiếu 0 Comments

Advanced custom fields là một plugin được sử dùng nhiều trong các trang website viết bằng WordPress. Với 2,619,072 lượt download cho thấy đây là một plugin đáng được quan tâm.

Hôm nay, có bạn viết code bị lỗi khi lấy  image bằng advanced custom fields plugin, với hướng dẫn này mình  hy vọng giúp được gì đó.

Các bạn thấy mục Return value có 3 lựa chọn: image object, image id, image URL .

image trong advance custom field plugin

 

1. Image object:

  • Sử dụng: Trả ra một object của hình ảnh bao gồm: url, title, alt,caption … để biết chi tiết các bạn dùng lệnh var_dump( $image );.
  • Ưu điểm: Image object giúp chúng ta dễ dàng chỉnh sửa thẻ  img trong html một cách dễ dàng.
  • Nhược điểm: các bạn phải điền đầy đủ từng thuộc tính trong thẻ  img.

VD:

 <?php
// lấy image object
$image = get_field('image');
// kiểm tra image có tồn tại không
if( !empty($image) ): ?>
//đưa từng thuộc tính vào thẻ img
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>"/> 
<?php endif; ?>

Lưu chỉ sử dụng $image[‘url’]; và $image[‘alt’]; khi chọn mục này, nếu các bạn chọn 2 lựa chọn bên dưới thì sẽ không ra kết quả.

2.  image id.

Sử dụng: Trả ra ID của hình ảnh lưu trong WordPress

Ưu điểm: kết hợp với function wp_get_attachment_image (); trả ra toàn bộ html của hình theo chuẩn WordPress, viết code ngắn gọn.

Nhược điểm: khó custome các thuộc tính

VD:

<?php
//Lấy id của image
$image = get_field('image');
//kích thước của hình theo chỉ định trong function.php
$size = 'full'; // (thumbnail, medium, large, full or custom size)
// kiểm tra image vì nếu image không tồn tại nhữn câu lệnh sau sẽ báo lỗi
if( $image ) {
//function xuất ra html của hình
echo wp_get_attachment_image( $image, $size );}
?>

3. image URL

Sử dụng: trả ra đường link url của hình, chỉ sử dụng khi viết css.

Ưu điểm: đơn giản.

Nhược điểm: Cái này mình khuyên các bạn hạn chế sử dụng vì nó chỉ trả ra url, sẽ không tốt cho seo.

<?php if( get_field('image') ): ?>
// trả ra url của hình ảnh
<img src="<?php the_field('image'); ?>" />
<?php endif; ?>

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz