Return to previous page

Simple image align - by Jonathan - on WordPress WooCommerce support

This topic has 13 replies, 2 voices, and was last updated 9 years, 2 months ago ago by Eva Kemp

Jonathan

Participant

January 24, 2015 at 11:16

When I insert a simple image using Visual Composer I don’t get options to align the image or change border type as displayed in the Visual Composer tutorial. The image always aligns to the left. Please see this video for reference.

https://wpbakery.atlassian.net/wiki/pages/viewpage.action?pageId=4030535

#36883 Copied

12 Answers

Eva Kemp

Support staff

January 24, 2015 at 15:13

Hello,

Please provide us with wp-admin panel credentials and a page link where you added single image element.

Thank you.
Regards,
Eva Kemp.

#36896 Copied

Jonathan

Participant

January 24, 2015 at 16:19

Hi. I posted something in the “Private content” area but I can’t see it after posting. Can you?

#36906 Copied

Eva Kemp

Support staff

January 24, 2015 at 16:23

Hello,

We didn’t receive an private message from you.
When you write some text in private content you need also write something in a public post for the private message to be posted.

Thank you.
Regards,
Eva Kemp.

#36908 Copied

Jonathan

Participant

January 24, 2015 at 16:27

Hi. I have posted something as per your previous message.

#36909 Copied

Eva Kemp

Support staff

January 24, 2015 at 17:24

Hello,

You need select alignment from “CSS Animation”.
Perhaps the video was made for older VC version and now it differs from the latest plugin version.

Thank you.
Regards,
Eva Kemp.

#36913 Copied

Jonathan

Participant

January 24, 2015 at 17:34

Hi.

No, that isn’t it. All that does is fade the image in to the exact same position. It does not position the static image in the centre of the block. I don’t want any animation. I want a static image that can be placed in the middle in the block. By default it is set to the left.

#36915 Copied

Eva Kemp

Support staff

January 24, 2015 at 17:38

Hello,

In this case the image can be moved via css code.
We would you provide you with it but we need to see your site.

Thank you.
Regards,
Eva Kemp.

#36918 Copied

Jonathan

Participant

January 24, 2015 at 17:43

If I reinstall the theme and don’t update Visual composer to the latest version of Visual Composer then the options are there like the video. So, it seems to be a visual composer issue. That is really strange that they would take away such a feature!!

#36920 Copied

Eva Kemp

Support staff

January 24, 2015 at 18:02

Hello,

Sorry, but that was their decision.
Is your issue resolved now?

Thank you.
Regards,
Eva Kemp.

#36924 Copied

Jonathan

Participant

January 24, 2015 at 18:16

Well, not really because I still can’t centre align my image.

#36925 Copied

Jonathan

Participant

January 24, 2015 at 18:34

I think there is actually an issue with the bundled version of VC that comes with this theme. I installed the theme from scratch and the old version also doesn’t have this option. I went into one of my other themes I bought and it does have the option. So, it isn’t a VC issue itself, it seems to be the version bundled with the Royal theme.

#36927 Copied

Eva Kemp

Support staff

January 25, 2015 at 18:33

Hello,

You need replace the code in the file wp-content/themes/royal/framework/vc.php under the title ” ! Single Image” (from line 1591 to 1706) with this code:

vc_map( array(
	'name' => __( 'Single Image', 'js_composer' ),
	'base' => 'vc_single_image',
	'icon' => 'icon-wpb-single-image',
	'category' => __( 'Content', 'js_composer' ),
	'description' => __( 'Simple image with CSS animation', 'js_composer' ),
	'params' => array(
		array(
			'type' => 'textfield',
			'heading' => __( 'Widget title', 'js_composer' ),
			'param_name' => 'title',
			'description' => __( 'Enter text which will be used as widget title. Leave blank if no title is needed.', 'js_composer' )
		),
		array(
			'type' => 'attach_image',
			'heading' => __( 'Image', 'js_composer' ),
			'param_name' => 'image',
			'value' => '',
			'description' => __( 'Select image from media library.', 'js_composer' )
		),
		$add_css_animation,
		array(
			'type' => 'textfield',
			'heading' => __( 'Image size', 'js_composer' ),
			'param_name' => 'img_size',
			'description' => __( 'Enter image size. Example: "thumbnail", "medium", "large", "full" or other sizes defined by current theme. Alternatively enter image size in pixels: 200x100 (Width x Height). Leave empty to use "thumbnail" size.', 'js_composer' )
		),
		array(
			'type' => 'dropdown',
			'heading' => __( 'Image alignment', 'js_composer' ),
			'param_name' => 'alignment',
			'value' => array(
				__( 'Align left', 'js_composer' ) => '',
				__( 'Align right', 'js_composer' ) => 'right',
				__( 'Align center', 'js_composer' ) => 'center'
			),
			'description' => __( 'Select image alignment.', 'js_composer' )
		),
		array(
			'type' => 'dropdown',
			'heading' => __( 'Image style', 'js_composer' ),
			'param_name' => 'style',
			'value' => getVcShared( 'single image styles' )
		),
		array(
			'type' => 'dropdown',
			'heading' => __( 'Border color', 'js_composer' ),
			'param_name' => 'border_color',
			'value' => getVcShared( 'colors' ),
			'std' => 'grey',
			'dependency' => array(
				'element' => 'style',
				'value' => array( 'vc_box_border', 'vc_box_border_circle', 'vc_box_outline', 'vc_box_outline_circle' )
			),
			'description' => __( 'Border color.', 'js_composer' ),
			'param_holder_class' => 'vc_colored-dropdown'
		),
		array(
			'type' => 'checkbox',
			'heading' => __( 'Link to large image?', 'js_composer' ),
			'param_name' => 'img_link_large',
			'description' => __( 'If selected, image will be linked to the larger image.', 'js_composer' ),
			'value' => array( __( 'Yes, please', 'js_composer' ) => 'yes' )
		),
		array(
			'type' => 'href',
			'heading' => __( 'Image link', 'js_composer' ),
			'param_name' => 'link',
			'description' => __( 'Enter URL if you want this image to have a link.', 'js_composer' ),
			'dependency' => array(
				'element' => 'img_link_large',
				'is_empty' => true,
				'callback' => 'wpb_single_image_img_link_dependency_callback'
			)
		),
		array(
			'type' => 'dropdown',
			'heading' => __( 'Link Target', 'js_composer' ),
			'param_name' => 'img_link_target',
			'value' => $target_arr,
			'dependency' => array(
				'element' => 'img_link',
				'not_empty' => true
			)
		),
		array(
			'type' => 'textfield',
			'heading' => __( 'Extra class name', 'js_composer' ),
			'param_name' => 'el_class',
			'description' => __( 'If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.', 'js_composer' )
		),
		array(
			'type' => 'css_editor',
			'heading' => __( 'Css', 'js_composer' ),
			'param_name' => 'css',
			// 'description' => __( 'If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.', 'js_composer' ),
			'group' => __( 'Design options', 'js_composer' )
		)
	)
) );

Please save the original file before making changes.

Thank you.
Regards,
Eva Kemp.

#36984 Copied