douyoufan7881
2017-08-17 14:49
浏览 49
已采纳

如何在我自己的wordpress视觉作曲元素中显示嵌入的图像? 我需要通过PHP代码

I create my own element and i successfully implement him into visual composer. I created his menu and now i need help with code repair/check because

i can not figure out how to let the picture display on. And displey him where I need.

My element is a slider with 5 slides on each slide is logo(img) content(text) signature(text).

I know the pictures could be added automatically, but I would like to solve this problem another time.

The php language is completely new for me so i used tutorial for creating elements and then i find adjustment of this code which will allow me to add an image to my slides.

But I do not understand how to determine where the image is displayed, I assumed that the same term as the plain text would be used to identify the place for image

http://www.wpelixir.com

https://gist.github.com

I tried this two things:

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

When i upload image via my menu in visual composer, the images were not displayed and in browser inspect code were only some numbers ( something like this 5546 )

Here is my procedure (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();
?>

EDIT: Code updated

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

1条回答 默认 最新

  • dscbxou1900343 2017-08-17 15:00
    最佳回答

    Ok first you need to map your stuff:

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

    and then you can access your variables from the $attributes-array

    you also need to load your image like this: wp_get_attachment_image_src($attributes['image1'], $size) this in return will give you an array.

    On PHP 5.4 or higher you can just do this:

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

    Edit:

    Right under public function vc_references_html( $atts ) {

    Delete your param extraction and except

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

    you write

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

    Delete this:

      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
            )
        );
    

    you do all of that with $attributes = vc_map_get_attributes($this->getShortCode(), $atts);

    All your data is then stored within the $attributes variable.

    I assume you have no idea what you're doing because you set all your values to '' in that extract You dont have PHP 5.4 or higher installed so you can't do wp_get_attachment_image_src($attributes['image1'], 'medium')[0]

    the rest of your code also got wrong.

    do it like this:

      <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>
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题