在wordpress中检索具有特定大小的自定义字段图像

问题描述:

I am using Custom MetaBoxes 2 to create an images uploader field.

Here is the code for the metabox:

$meta_boxes['home_page_slider'] = array(
        'id'           => 'home_page_slider',
        'title'        => __( 'Home Page Slider', 'cmb2' ),
        'object_types' => array( 'page', ), // Post type
        'context'      => 'normal',
        'priority'     => 'high',
        'show_names'   => true, // Show field names on the left
        'show_on'      => array( 'id' => array( 5, ) ), // Specific post IDs to display this metabox
        'fields'       => array(
            array(
                'name'         => __( 'Slider Images', 'cmb2' ),
                'desc'         => __( 'Upload or add multiple images/attachments.', 'cmb2' ),
                'id'           => $prefix . 'slider-images',
                'type'         => 'file_list',
                'preview_size' => array( 100, 100 ), // Default: array( 50, 50 )
            ),
        )
    );

How can I retrieve the images uploaded to this field, but with a specific size (for example "Full") , and display those images on the front-end on the following HTML markup?

<ul class="slides">
  <li>
    <img src="images/awn1.jpg" />
  </li>
  <li>
    <img src="images/awn2.jpg" />
  </li>
  <li>
    <img src="images/awn3.jpg" />
  </li>
</ul>

我正在使用自定义MetaBoxes 2 以创建图像上传器字段。 p>

以下是元数据箱的代码: p>

  $  meta_boxes ['home_page_slider'] = array(
'id'=&gt;'home_page_slider',
'title'=&gt; __('主页滑块','cmb2'),
'object_types'=&gt;  array('page',),//帖子类型
'上下文'=&gt;'普通',
'优先''&gt;'高',
'show_names'=&gt; true,//显示字段 左边的名字
'show_on'=&gt;数组('id'=&gt;数组(5,)),//显示此元数据的特定帖子ID 
'fields'=&gt;数组(
 array(  
'名称'=&gt; __('滑块图片','cmb2'),
'desc'=&gt; __('上传或添加多个图片/附件。','cmb2'),
'id  '=&gt; $前缀。'slider-image  s',
'type'=&gt;  'file_list',\''preview_size'=&gt;  array(100,100),//默认值:array(50,50)
),
)
); 
  code>  pre> 
 
 

如何检索 图像上传到此字段,但具有特定大小(例如“完整”),并在前端的下方HTML标记上显示这些图像? p>

 &lt; ul class =”slides“&gt; 
&lt; li&gt; 
&lt; img src =”images / awn1.jpg“/&gt; 
&lt; / li&gt; 
  &lt; li&gt; 
&lt; img src =“images / awn2.jpg”/&gt; 
&lt; / li&gt; 
&lt; li&gt; 
&lt; img src =“images / awn3.jpg”/&gt  ; 
&lt; / li&gt; 
&lt; / ul&gt; 
  code>  pre> 
  div>

This code will do the trick:

<ul class="slides">
<?php

    $images = get_post_meta( 5, 'slider-images', true);

            if ( $images ) {
              foreach ( $images as $attachment_id => $img_full_url ) {

               $full = wp_get_attachment_link($attachment_id, 'full');

                echo "<li>";
                echo $full;
                echo "</li>";

              }
            }
?>
</ul>
  • change the prefix with the same one of your repeatable group prefix;
  • '5' is the id of your post, or just leave it like 'get_the_ID();' to get the id automatic;
  • 'full' is the image size name, maybe at your side it is different as you can use the default wp thumbnail size which is 'thumbnail' or others sizes like 'full, medium, large'.

Enjoy it and please rate my answer if you find it helpful.

Thank you. Best, EF.

Check the docs at https://github.com/WebDevStudios/Custom-Metaboxes-and-Fields-for-WordPress/wiki/Field-Types#file, there is an example showing exactly what you want.

array(
    'name' => 'Test File',
    'desc' => 'Upload an image or enter an URL.',
    'id' => $prefix . 'test_image',
    'type' => 'file',
    'allow' => array( 'url', 'attachment' ) // limit to just attachments with array( 'attachment' )
),

$image = wp_get_attachment_image( get_post_meta( get_the_ID(), 'test_image_id', 1 ), 'medium' );

where get_the_ID is the ID of the post you upload your images to