如何使用高級自定義字段更改WordPress中縮略圖的大小？

Question

我只是試圖在我的高級自定義字段庫中使用background-image的中等縮略圖大小。我對wordpress相當陌生，並從概念上理解我需要做什麼，但是我無法找到正確的語法來實現已爲我的循環和圖像創建的「add_image_size」函數。

這似乎應該工作，但添加「中等」和「大小」屬性是禁止圖像出現。 （請不是當我切出$image_thumbnail的圖片顯示，因爲他們應該）

  <div class="container gallery-section"> 
       <?php foreach(get_field('gallery_image') as $gallery_image) { ?> 
       <?php 
       $image = $gallery_image['gallery_picture']; 
       $image_thumbnail = $image['gallery_picture']['sizes']['medium']; 
       ?> 
       <div class="gallery-image"> 

        <a href="<?php echo $image; ?>" style="background-image:url('<?php echo $image_thumbnail; ?>');" class="fancybox" rel="gallery"></a> 
       </div> 
       <?php } ?> 
      </div>  

這裏是我的functions.php

if (function_exists('add_theme_support')) 
{ 
    // Add Menu Support 
    add_theme_support('menus'); 

    // Add Thumbnail Theme Support 
    add_theme_support('post-thumbnails'); 
    add_image_size('large', 700, '', true); // Large Thumbnail 
    add_image_size('medium', 250, '', true); // Medium Thumbnail 
    add_image_size('small', 120, '', true); // Small Thumbnail 
    add_image_size('custom-size', 700, 200, true); // Custom Thumbnail Size call using the_post_thumbnail('custom-size'); 

} 

*****編輯*****

<div class="container gallery-section"> 
    <?php 
    $gallery_field = get_field('gallery_image'); // the field name that you set for the gallery field 
    foreach($gallery_field as $gallery_image) { 
    $image = $gallery_image['gallery_picture']; // url for the image that you upload same sizes.. 
    $image_thumbnail = $image['sizes']['medium']; // url for the medium size 
         ?> 
    <div class="gallery-image"> 
    <a href="<?php echo $image; ?>" style="background-image:url('<?php echo $image_thumbnail; ?>');" class="fancybox" rel="gallery"></a> 
    </div> 
    <?php } ?> 
</div> 

Answer 1

我將圖片url切換到oject url並使用此代碼。

<?php while(have_rows('gallery_image')) { the_row(); ?> 
<?php $image = get_sub_field('gallery_picture'); ?> 
<div class="gallery-image"> 
    <a href="<?php echo $image['url']; ?>" style="background-image:url('<?php echo $image['sizes']['medium']; ?>');" class="fancybox" rel="gallery"></a> 
</div> 
<?php } ?> 

Answer 2

你有這個循環的問題，並從數組中獲得結果。

它應該是這樣的：

<div class="container gallery-section"> 
    <?php 
    $gallery_field = get_field('gallery_image'); // the field name that you set for the gallery field 
    //print_r($gallery_field); you can see the array structure. 
    foreach($gallery_field as $gallery_image) { 
     $image = $gallery_image['url']; // url for the image that you upload same sizes.. 
     $image_thumbnail = $gallery_image['sizes']['medium']; // url for the medium size 
     ?> 
     <div class="gallery-image"> 
      <a href="<?php echo $image; ?>" style="background-image:url('<?php echo $image_thumbnail; ?>');" class="fancybox" rel="gallery"></a> 
     </div> 
    <?php } ?> 
</div> 

一件事，你可以設置大小medium，並從設置 - large>如果你想媒體。

我會把它分成幾塊，以便你能理解。

在ACF admin中，您創建一個新的畫廊字段，並且您給他打電話gallery_image。
現在讓你使用模板此字段：

$gallery_field = get_field('gallery_image'); 

此字段回報你，你上傳到這個領域中的一些頁面，後期的所有圖像的數組。

數組是這樣的：

Array 
(
    [0] => Array 
     (
      [id] => 199 
      [alt] => 
      [title] => _YON7864 
      [caption] => 
      [description] => 
      [mime_type] => image/jpeg 
      [url] => http://localhost/dev/wp-content/uploads/2014/10/YON7864.jpg 
      [width] => 1772 
      [height] => 1177 
      [sizes] => Array 
       (
        [thumbnail] => http://localhost/dev/wp-content/uploads/2014/10/YON7864-150x150.jpg 
        [thumbnail-width] => 150 
        [thumbnail-height] => 150 
        [medium] => http://localhost/dev/wp-content/uploads/2014/10/YON7864-250x166.jpg 
        [medium-width] => 250 
        [medium-height] => 166 
        [large] => http://localhost/dev/wp-content/uploads/2014/10/YON7864-700x464.jpg 
        [large-width] => 700 
        [large-height] => 464 
        [small] => http://localhost/dev/wp-content/uploads/2014/10/YON7864-120x79.jpg 
        [small-width] => 120 
        [small-height] => 79 
        [custom-size] => http://localhost/dev/wp-content/uploads/2014/10/YON7864-700x200.jpg 
        [custom-size-width] => 700 
        [custom-size-height] => 200 
       ) 

     ) 
) 

我們得到所有運行陣列上的循環圖像。

foreach($gallery_field as $gallery_image) { 
    //inside the loop 
} 

$image_gallery現在是用於單個圖像的陣列，並且它在循環中運行。

而在循環內部，您將獲得所需的url和一些圖像大小的url。

要獲得以實際大小上傳的圖像的url，您需要使用數組中顯示的密鑰['url']。

要得到你需要得到數組鍵['sizes']內的其他圖像大小的URL，然後選擇你喜歡['medium']或['large']

它的大小應該是這樣的。

foreach($gallery_field as $gallery_image) { 
    // $gallery_image is our array for each image 
    $image = $gallery_image['url']; // to get the url we need to use ['url'] 
    $image_thumbnail = $gallery_image['sizes']['medium']; // to get the medium size image url we need to use ['sizes']['medium'] 
}