在ACF中使用srcset作爲背景圖像

Question

我正在使用ACF來允許客戶端上傳將用作主頁上全屏幕背景的圖像。圖像將根據星期幾而有所不同。我爲背景圖像創建了自定義圖像大小，並且我有一個功能，可以查詢服務器在一週中的哪一天並找到相應的圖像。我無法使函數返回正確的圖像大小。

這裏是我的功能：

function my_custom_background() { 

$today = date('l'); 
$image = get_field (strtolower($today)); 
$size = 'auto'; // (thumbnail, medium, large, full or custom size) 
$backgroundImg = wp_get_attachment_image ($image, $size); 


?><style>body.page-id-5 {background-image: url('<?php echo $backgroundImg; ?>'); }</style><?php 
} 

add_action('wp_head', 'my_custom_background'); 

而且這裏是呈現：

background-image: url('<img width="1920" height="1258" src="http://dev.whydidibother.com/klwdp/jumpstart-full-screen-image-daily-change-site/wp-content/uploads/sites/6/2017/10/amazing-beautiful-breathtaking-clouds.jpg" class="attachment-auto size-auto" alt="" srcset="http://dev.whydidibother.com/klwdp/jumpstart-full-screen-image-daily-change-site/wp-content/uploads/sites/6/2017/10/amazing-beautiful-breathtaking-clouds.jpg 1920w, http://dev.whydidibother.com/klwdp/jumpstart-full-screen-image-daily-change-site/wp-content/uploads/sites/6/2017/10/amazing-beautiful-breathtaking-clouds-300x197.jpg 300w, http://dev.whydidibother.com/klwdp/jumpstart-full-screen-image-daily-change-site/wp-content/uploads/sites/6/2017/10/amazing-beautiful-breathtaking-clouds-768x503.jpg 768w, http://dev.whydidibother.com/klwdp/jumpstart-full-screen-image-daily-change-site/wp-content/uploads/sites/6/2017/10/amazing-beautiful-breathtaking-clouds-1024x671.jpg 1024w, http://dev.whydidibother.com/klwdp/jumpstart-full-screen-image-daily-change-site/wp-content/uploads/sites/6/2017/10/amazing-beautiful-breathtaking-clouds-1200x786.jpg 1200w, http://dev.whydidibother.com/klwdp/jumpstart-full-screen-image-daily-change-site/wp-content/uploads/sites/6/2017/10/amazing-beautiful-breathtaking-clouds-800x524.jpg 800w, http://dev.whydidibother.com/klwdp/jumpstart-full-screen-image-daily-change-site/wp-content/uploads/sites/6/2017/10/amazing-beautiful-breathtaking-clouds-500x328.jpg 500w" sizes="(max-width: 1920px) 100vw, 1920px" />'); 

感謝您的任何建議。

Answer 1

如果你看看Wordpress reference for wp_get_attachment_image，你會發現這個函數返回一個html元素。我建議設置你的ACF像場返回圖像對象（實際上返回一個數組），然後得到適當的大小，如下所示：

$image = get_field(strtolower($today)); 
echo $image['sizes']['large']; // thumbnail, medium, large, full or custom 

又見ACF文檔image field（節「自定義顯示器（ arrray）「）。