通過ID獲取圖像源大小爲

Question

我正在WP網站上使用Google Analytics單擊事件的某些促銷/廣告滑塊。效果很好，現在我想在正確的分辨率上提供正確的圖像。

我使用picturefill來提供圖像。硬編碼時工作正常，所以我知道它的工作原理。當我嘗試使用由WP上傳的圖像獲取圖像源時沒有。我知道這是由於我的（缺乏）PHP技能。

什麼picturfill需求：

<span data-picture data-alt=""> 
    <span data-src="filename_default.jpg"></span> 
    <span data-src="filename_small.jpg" data-media="(min-width: 400px)"></span> 
    <span data-src="filename_medium.jpg" data-media="(min-width: 768px)"></span> 
    <span data-src="filename_big.jpg" data-media="(min-width: 1200px)"></span> 

    <!-- Fallback content for non-JS browsers. --> 
    <noscript> 
     <img src="external/imgs/small.jpg" alt=""> 
    </noscript> 
</span> 

我有URL或ID或存儲在圖像： $ attachment_id

我以爲這樣做：

<?php 
    $attachment_id = get_field('advimg'); 
    $large = "adv-pos-a-large"; 
    $default = "adv-pos-a-default"; 
    $small = "adv-pos-a-small"; 

?> 

的get_field（ 'advimg'）;來自ACF。

<span data-picture data-alt=""> 
    <span data-src="<?php wp_get_attachment_image_src($attachment_id, $default); ?>"></span> 
    <span data-src="<?php wp_get_attachment_image_src($attachment_id, $small); ?>" data-media="(min-width: 400px)"></span> 
    <span data-src="<?php wp_get_attachment_image_src($attachment_id, $default); ?>" data-media="(min-width: 768px)"></span> 
    <span data-src="<?php wp_get_attachment_image_src($attachment_id, $large); ?>" data-media="(min-width: 1200px)"></span> 

    <!-- Fallback content for non-JS browsers. --> 
    <noscript> 
     <img src="external/imgs/small.jpg" alt=""> 
    </noscript> 
</span> 

但它不工作。 Iv'e玩弄周圍：

wp_get_attachment_image_src wp_get_attachment_image_url wp_get_attachment_image_link

我必須具有周五，由於它無法正常工作和事情對我說，這並不難......我只是沒有看到它今天。

希望你們能在球場。

由於提前，

/保羅

編輯/最終代碼/ FIX

<?php 
    $attachment_id = get_field('advanced_custom_field_name_here'); 
    $small = wp_get_attachment_image_src($attachment_id, 'adv-pos-a-small'); 
    $default = wp_get_attachment_image_src($attachment_id, 'adv-pos-a-default'); 
    $large = wp_get_attachment_image_src($attachment_id, 'adv-pos-a-large'); 
?> 

<span data-picture data-alt="alt desc here"> 
    <span data-src="<?php echo $default[0]; ?>"></span> 
    <span data-src="<?php echo $small[0]; ?>" data-media="(min-width: 400px)"></span> 
    <span data-src="<?php echo $default[0]; ?>" data-media="(min-width: 768px)"></span> 
    <span data-src="<?php echo $large[0]; ?>" data-media="(min-width: 1200px)"></span> 

    <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> 
    <noscript> 
     <img src="<?php echo $default[0]; ?>" alt="alt desc here"> 
    </noscript> 
</span> 

Answer 1

wp_get_attachment_image_src是容易混淆的名字命名的。 （更好的名字是wp_get_attachment_image_atts）。它實際上返回一個包含圖像附件文件的圖像屬性「url」，「width」和「height」的數組。對於剛剛在圖片src，使用的第一個元素返回數組中：

$img_atts = wp_get_attachment_image_src($attachment_id, $default); 
$img_src = $img_atts[0]; 

此外，請確保您的ACF像場返回類型設置爲固定ID，以便$attachment_id = get_field('advimg');爲您提供您所期望的ID。