Working With Visual Composer VC_Single_Image

Question

I am working on a wordpress site that has this short code,

[vc_single_image image="7004" css_animation="right-to-left" border_color="grey" img_link_target="_self" img_size="300px"]

I need to replicate that short code a few times but I can not figure out where the four digit number referencing the image comes from.

I tried changing the 7004 to a image name and even tried the absolute path to the image. Nothing shows up when I do this not even a broken image.

What is that number and how can I add a different image to this short code?

Answer 1

It's not easy to trace trough the code behind [vc_single_image], because for start it uses the extract, that's not recommended in WordPress or PHP in general.

The image attribute value is stripped for non-integers into the $img_id variable.

With your setup, there's a call to wpb_getImageBySize( array( 'attach_id' => $img_id, ... ), that seems to be a wrapper that includes:

wp_get_attachment_image_src( $attach_id, 'large' );

So this image attribute is the image attachment ID (integer), just as Nathan Powell mentioned.

If we turn on the backend editor for the visual composer:

with the code you posted, then we should get this kind of view:

Click on the green pen and we should get the single image settings:

there it's easy to select the image attachment directly from the media library.

If we don't wan't the visual setup, we can get the image attachment ID from various links in the Media library. For example when we edit an attachment, the url is:

/wp-admin/post.php?post=7004&action=edit

or when we view the attachment details, the url is:

/wp-admin/upload.php?item=7004

Hope it helps!

Answer 2

Quick Solution

For someone facing the same problem, I have found a quick solution to find attachment id.

1. Open menu Media
2. Select media do you wanted to know what the ID
3. look at the URl, in my case http://localhost/.../wp-admin/upload.php?item=1826

4. Just using the item integer on your vc_single_image

   thanks to @birgire for the explanation

   [vc_single_image image="1826" img_size="full" alignment="center"]