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