如何顯示嵌入到我自己的wordpress視覺作曲元素中的圖像？我需要通過php代碼的方式

Question

我創建了自己的元素，併成功實現了他的視覺作曲家。我創建了他的菜單，現在我需要幫助代碼修復/檢查，因爲

我無法弄清楚如何讓圖片顯示。他不滿我需要的地方。

我的元素是一個幻燈片，每個幻燈片上有5個幻燈片是徽標（img）內容（文本）簽名（文本）。

我知道圖片可以自動添加，但我想再次解決這個問題。

php語言對我來說是全新的，所以我使用教程來創建元素，然後我找到了調整這個代碼，這將允許我將圖像添加到我的幻燈片。

但我不知道如何來確定顯示圖像，我認爲同樣的任期由純文本將被用來識別圖像

http://www.wpelixir.com

的地方https://gist.github.com

我嘗試這樣做兩件事情：

<div><img class="reference_content_img" src="' . $image1 . '" alt=""> </div> 
<div><img class="reference_content_img" src="" alt="">' . $image1 . '</div> 

當我通過我的視覺作曲家菜單上傳圖片，並沒有顯示的圖像，並在瀏覽器中檢查代碼只是一些數字（像這樣5546）

這裏是我的程序（own-element.php）：

  <?php 
/* 
* Element Description: VC Info Box 
*/ 

// Element Class 
class vcReferences extends WPBakeryShortCode { 

    // Element Init 
    function __construct() { 
     add_action('init', array($this, 'vc_references_mapping')); 
     add_shortcode('vc_references', array($this, 'vc_references_html')); 
    } 

    // Element Mapping 
    public function vc_references_mapping() { 


     // Stop all if VC is not enabled 
     if (!defined('WPB_VC_VERSION')) { 
       return; 
     } 

     // Map the block with vc_map() 
     vc_map( 

      array(
       'name' => __('VC References', 'text-domain'), 
       'base' => 'vc_references', 
       'description' => __('References block', 'text-domain'), 
       'category' => __('My Elements', 'text-domain'), 
       'icon' => get_template_directory_uri() .'/assets/images/references-block-img.png', 
       'params' => array( 

        array(
         'type' => 'textfield', 
         'holder' => 'h3', 
         'class' => 'title-class', 
         'heading' => __('Title', 'text-domain'), 
         'param_name' => 'title', 
         'value' => __('Default value', 'text-domain'), 
         'description' => __('Enter name of your section', 'text-domain'), 
         'admin_label' => false, 
         'weight' => 0, 
         'group' => 'General', 
        ), 
         /* 
         * First content block 
         */ 

        array(
         'type' => 'attach_image', 
         'holder'=> 'div', 
         'class' => '', 
         'heading' => __('Image', 'text-domain'), 
         'param_name' => 'image1', 
         'value' => __('Default Value', 'text-domain'), 
         'description' => __('Picture of a person', 'text-domain'), 
         'admin_level' => false, 
         'wight' => 0, 
         'group' => 'Slide 1', 
         ), 

        array(
         'type' => 'textarea', 
         'holder' => 'div', 
         'class' => 'text-class', 
         'heading' => __('Content', 'text-domain'), 
         'param_name' => 'content1', 
         'value' => __('Default value', 'text-domain'), 
         'description' => __('Text you need to show', 'text-domain'), 
         'admin_label' => false, 
         'weight' => 0, 
         'group' => 'Slide 1', 
        ), 

        array(
         'type' => 'textfield', 
         'holder' => 'div', 
         'class' => 'text-class', 
         'heading' => __('Autor', 'text-domain'), 
         'param_name' => 'autor1', 
         'value' => __('Default value', 'text-domain'), 
         'description' => __('Autor´s name', 'text-domain'), 
         'admin_label' => false, 
         'weight' => 0, 
         'group' => 'Slide 1', 
        ), 

        array(
         'type' => 'textfield', 
         'holder' => 'div', 
         'class' => 'text-class', 
         'heading' => __('Company', 'text-domain'), 
         'param_name' => 'company1', 
         'value' => __('Default value', 'text-domain'), 
         'description' => __('Name of company', 'text-domain'), 
         'admin_label' => false, 
         'weight' => 0, 
         'group' => 'Slide 1', 
        ), 

         /* 
         * Second content block 
         */ 

        array(
         'type' => 'attach_image', 
         'holder'=> 'div', 
         'class' => '', 
         'heading' => __('Image', 'text-domain'), 
         'param_name' => 'image2', 
         'value' => __('Default Value', 'text-domain'), 
         'description' => __('Picture of a person', 'text-domain'), 
         'admin_level' => false, 
         'wight' => 0, 
         'group' => 'Slide 2', 
         ), 

        array(
         'type' => 'textarea', 
         'holder' => 'div', 
         'class' => 'text-class', 
         'heading' => __('Content', 'text-domain'), 
         'param_name' => 'content2', 
         'value' => __('Default value', 'text-domain'), 
         'description' => __('Text you need to show', 'text-domain'), 
         'admin_label' => false, 
         'weight' => 0, 
         'group' => 'Slide 2', 
        ), 

        array(
         'type' => 'textfield', 
         'holder' => 'div', 
         'class' => 'text-class', 
         'heading' => __('Autor', 'text-domain'), 
         'param_name' => 'autor2', 
         'value' => __('Default value', 'text-domain'), 
         'description' => __('Autor´s name', 'text-domain'), 
         'admin_label' => false, 
         'weight' => 0, 
         'group' => 'Slide 2', 
        ), 

        array(
         'type' => 'textfield', 
         'holder' => 'div', 
         'class' => 'text-class', 
         'heading' => __('Company', 'text-domain'), 
         'param_name' => 'company2', 
         'value' => __('Default value', 'text-domain'), 
         'description' => __('Name of company', 'text-domain'), 
         'admin_label' => false, 
         'weight' => 0, 
         'group' => 'Slide 2', 
        ), 

         /* 
         * Third content block 
         */ 

        array(
         'type' => 'attach_image', 
         'holder'=> 'div', 
         'class' => '', 
         'heading' => __('Image', 'text-domain'), 
         'param_name' => 'image3', 
         'value' => __('Default Value', 'text-domain'), 
         'description' => __('Picture of a person', 'text-domain'), 
         'admin_level' => false, 
         'wight' => 0, 
         'group' => 'Slide 3', 
         ), 

        array(
         'type' => 'textarea', 
         'holder' => 'div', 
         'class' => 'text-class', 
         'heading' => __('Content', 'text-domain'), 
         'param_name' => 'content3', 
         'value' => __('Default value', 'text-domain'), 
         'description' => __('Text you need to show', 'text-domain'), 
         'admin_label' => false, 
         'weight' => 0, 
         'group' => 'Slide 3', 
        ), 

        array(
         'type' => 'textfield', 
         'holder' => 'div', 
         'class' => 'text-class', 
         'heading' => __('Autor', 'text-domain'), 
         'param_name' => 'autor3', 
         'value' => __('Default value', 'text-domain'), 
         'description' => __('Autor´s name', 'text-domain'), 
         'admin_label' => false, 
         'weight' => 0, 
         'group' => 'Slide 3', 
        ), 

        array(
         'type' => 'textfield', 
         'holder' => 'div', 
         'class' => 'text-class', 
         'heading' => __('Company', 'text-domain'), 
         'param_name' => 'company3', 
         'value' => __('Default value', 'text-domain'), 
         'description' => __('Name of company', 'text-domain'), 
         'admin_label' => false, 
         'weight' => 0, 
         'group' => 'Slide 3', 
        ), 

         /* 
         * Fourth content block 
         */ 

        array(
         'type' => 'attach_image', 
         'holder'=> 'div', 
         'class' => '', 
         'heading' => __('Image', 'text-domain'), 
         'param_name' => 'image4', 
         'value' => __('Default Value', 'text-domain'), 
         'description' => __('Picture of a person', 'text-domain'), 
         'admin_level' => false, 
         'wight' => 0, 
         'group' => 'Slide 4', 
         ), 

        array(
         'type' => 'textarea', 
         'holder' => 'div', 
         'class' => 'text-class', 
         'heading' => __('Content', 'text-domain'), 
         'param_name' => 'content4', 
         'value' => __('Default value', 'text-domain'), 
         'description' => __('Text you need to show', 'text-domain'), 
         'admin_label' => false, 
         'weight' => 0, 
         'group' => 'Slide 4', 
        ), 

        array(
         'type' => 'textfield', 
         'holder' => 'div', 
         'class' => 'text-class', 
         'heading' => __('Autor', 'text-domain'), 
         'param_name' => 'autor4', 
         'value' => __('Default value', 'text-domain'), 
         'description' => __('Autor´s name', 'text-domain'), 
         'admin_label' => false, 
         'weight' => 0, 
         'group' => 'Slide 4', 
        ), 

        array(
         'type' => 'textfield', 
         'holder' => 'div', 
         'class' => 'text-class', 
         'heading' => __('Company', 'text-domain'), 
         'param_name' => 'company4', 
         'value' => __('Default value', 'text-domain'), 
         'description' => __('Name of company', 'text-domain'), 
         'admin_label' => false, 
         'weight' => 0, 
         'group' => 'Slide 4', 
        ), 

         /* 
         * Fifth content block 
         */ 

        array(
         'type' => 'attach_image', 
         'holder'=> 'div', 
         'class' => '', 
         'heading' => __('Image', 'text-domain'), 
         'param_name' => 'image5', 
         'value' => __('Default Value', 'text-domain'), 
         'description' => __('Picture of a person', 'text-domain'), 
         'admin_level' => false, 
         'wight' => 0, 
         'group' => 'Slide 5', 
         ), 

        array(
         'type' => 'textarea', 
         'holder' => 'div', 
         'class' => 'text-class', 
         'heading' => __('Content', 'text-domain'), 
         'param_name' => 'content5', 
         'value' => __('Default value', 'text-domain'), 
         'description' => __('Text you need to show', 'text-domain'), 
         'admin_label' => false, 
         'weight' => 0, 
         'group' => 'Slide 5', 
        ), 

        array(
         'type' => 'textfield', 
         'holder' => 'div', 
         'class' => 'text-class', 
         'heading' => __('Autor', 'text-domain'), 
         'param_name' => 'autor5', 
         'value' => __('Default value', 'text-domain'), 
         'description' => __('Autor´s name', 'text-domain'), 
         'admin_label' => false, 
         'weight' => 0, 
         'group' => 'Slide 5', 
        ), 

        array(
         'type' => 'textfield', 
         'holder' => 'div', 
         'class' => 'text-class', 
         'heading' => __('Company', 'text-domain'), 
         'param_name' => 'company5', 
         'value' => __('Default value', 'text-domain'), 
         'description' => __('Name of company', 'text-domain'), 
         'admin_label' => false, 
         'weight' => 0, 
         'group' => 'Slide 5', 
        )                                
       ) 
      ) 
     );         

    } 


    // Element HTML 
    public function vc_references_html($atts) { 
     $attributes = vc_map_get_attributes($this->getShortCode(), $atts); 

     extract(
     shortcode_atts(
      array(
       'title' => '', 

       'image1' => '', 
       'content1' => '', 
       'autor1' => '', 
       'company1' => '', 

       'image2' => '', 
       'content2' => '', 
       'autor2' => '', 
       'company2' => '', 

       'image3' => '', 
       'content3' => '', 
       'autor3' => '', 
       'company3' => '', 

       'image4' => '', 
       'content4' => '', 
       'autor4' => '', 
       'company4' => '', 

       'image5' => '', 
       'content5' => '', 
       'autor5' => '', 
       'company5' => '', 
       ), 
       $atts 
      ) 
     ); 
     $imageData1 = wp_get_attachment_image_src($image1, 'medium'); 
     $imageData2 = wp_get_attachment_image_src($image2, 'medium'); 
     $imageData3 = wp_get_attachment_image_src($image3, 'medium'); 
     $imageData4 = wp_get_attachment_image_src($image4, 'medium'); 
     $imageData5 = wp_get_attachment_image_src($image5, 'medium'); 

     // Fill $html var with data 
     $html = '   
     <div class="reference_keyboard_arrow" id="reference_keyboard_arrow_l"><img src="http://jirischaffer.cz/wp-content/uploads/2017/08/keyboard_arrow.png" onclick="reference_plusSlide(-1)" alt="Doleva" width="50px" height="50px"></div> 
       <div class="reference_keyboard_arrow" id="reference_keyboard_arrow_r"><img src="http://jirischaffer.cz/wp-content/uploads/2017/08/keyboard_arrow.png" onclick="reference_plusSlide(1)" alt="Doprava" width="50px" height="50px"></div> 
       <div class="reference_wrap reference_section_center reference_font_setting"> 

       <div class="reference_title_row reference_font_setting_title">' . $title . '</div> 

       <div class="reference_content_slider_row"> 
        <div class="reference_slide_content reference_animation_R" id="reference_slide_0"> 
        <div class="reference_content_img"><img class="reference_style_image" src="' .$imageData1[0]. '" alt=""></div> 
         <p class="reference_font_text_array reference_text_array">' . $content1 . '</p> 
         <p class="reference_font_sign">' . $autor1 . ' <br> ' . $company1 . '</p> 
        </div> 
        <div class="reference_slide_content reference_animation_R" id="reference_slide_1"> 
        <div class="reference_content_img"><img src="' .$imageData2[0]. '" alt=""></div> 
         <p class="reference_font_text_array reference_text_array">' . $content2 . '</p> 
         <p class="reference_font_sign">' . $autor2 . ' <br> ' . $company2 . '</p> 
        </div> 
        <div class="reference_slide_content reference_animation_R" id="reference_slide_2"> 
        <div class="reference_content_img"><img src="' .$imageData3[0]. '" alt=""></div> 
         <p class="reference_font_text_array reference_text_array">' . $content3 . '</p> 
         <p class="reference_font_sign">' . $autor3 . ' <br> ' . $company3 . '</p> 
        </div> 
        <div class="reference_slide_content reference_animation_R" id="reference_slide_3"> 
        <div class="reference_content_img"><img src="' .$imageData4[0]. '" alt=""></div> 
         <p class="reference_font_text_array reference_text_array">' . $content4 . '</p> 
         <p class="reference_font_sign">' . $autor4 . ' <br> ' . $company4 . '</p> 
        </div> 
        <div class="reference_slide_content reference_animation_R" id="reference_slide_4"> 
        <div class="reference_content_img"><img src="' .$imageData5[0]. '" alt=""></div> 
         <p class="reference_font_text_array reference_text_array">' . $content5 . '</p> 
         <p class="reference_font_sign">' . $autor5 . ' <br> ' . $company5 . '</p> 
        </div> 
       </div> 

       <div class="reference_slick_dots_row"> 
        <div class="reference_dot reference_blue" id="reference_dot1" onclick="activeSlide(1)"></div> 
        <div class="reference_dot" id="reference_dot2" onclick="reference_activeSlide(2)"></div> 
        <div class="reference_dot" id="reference_dot3" onclick="reference_activeSlide(3)"></div> 
        <div class="reference_dot" id="reference_dot4" onclick="reference_activeSlide(4)"></div> 
        <div class="reference_dot" id="reference_dot5" onclick="reference_activeSlide(5)"></div> 
       </div> 
       </div> 
     <script> 
     var myIndex = 0; 
     reference_dot_move(); 
     </script> 
     ';  

     return $html; 

    } 

} // End Element Class 

// Element Class Init 
new vcReferences(); 
?> 

編輯：代碼更新

Answer 1

好首先你需要映射你的東西：

$attributes = vc_map_get_attributes($this->getShortCode(), $atts);

，然後你可以從$attributes -array

你還需要載入圖片類似這樣的訪問您的變量： wp_get_attachment_image_src($attributes['image1'], $size)這反過來會給你一個陣列。

在PHP 5上。4或更高版本你可以這樣做：

<div><img class="reference_content_img" src="' .wp_get_attachment_image_src($attributes['image1'], 'medium')[0]. '" alt=""> </div>

編輯：

右下public function vc_references_html($atts) {

刪除您PARAM提取和除

<div><img class="reference_content_img" src="' .wp_get_attachment_image_src($attributes['image1'], 'medium')[0]. '" alt=""> </div>

你寫

$data = wp_get_attachment_image_src($attributes['image1'], 'medium'); 
<div><img class="reference_content_img" src="' .$data[0]. '" alt=""></div> 

---

刪除此：

extract(
     shortcode_atts(
      array(
       'title' => '', 

       //'image1' => '', 
       'content1' => '', 
       'autor1' => '', 
       'company1' => '', 

       //'image2' => '', 
       'content2' => '', 
       'autor2' => '', 
       'company2' => '', 

       //'image3' => '', 
       'content3' => '', 
       'autor3' => '', 
       'company3' => '', 

       //'image4' => '', 
       'content4' => '', 
       'autor4' => '', 
       'company4' => '', 

       //'image5' => '', 
       'content5' => '', 
       'autor5' => '', 
       'company5' => '', 
      ), 
      $atts 
     ) 
    ); 

你做了這一切與$attributes = vc_map_get_attributes($this->getShortCode(), $atts);

你的所有數據，然後存儲在$attributes變量中。

我認爲你根本不知道你在做什麼，因爲你在那個extract 所有的值設置爲''您不必PHP 5.4或更高版本，所以你不能做wp_get_attachment_image_src($attributes['image1'], 'medium')[0]

其餘您代碼也出錯了。

做這樣的：

<div class="reference_content_slider_row"> 
      <div class="reference_slide_content reference_animation_R" id="reference_slide_0"> 
      <div class="reference_content_img"><img src="' .$data[0]. '" alt=""></div> 
       <p class="reference_font_text_array reference_text_array">' . $attributes['content1'] . '</p> 
       <p class="reference_font_sign">' . $attributes['autor1'] . ' <br> ' . $attributes['company1'] . '</p> 
      </div>