[Waiting for user confirmation] wp-image id missing when inserting images through media

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Our next available supporter will answer your ticket in about 2.51 hours from now. Thank you for your understanding.

You are not logged in. You can view support threads, but not post.
If you are already logged in, please refresh your browser.

This topic contains 5 replies, has 2 voices, and was last updated by  Luo Yang 5 days ago. The support staff assigned to this topic is Luo Yang.

Viewing 6 posts - 1 through 6 (of 6 total)
Author
Posts
#578393

I am trying to: include the wp-image-(ID) as a class when adding an image via the editor media button

Link to a page where the issue can be seen: http://virtual-reality.org.za

I expected to see: <img src="http://virtual-reality.org.za/wp-content/uploads/2017/10/augmented-reality.jpg&quot; alt="Augmented Reality" class="size-full img-responsive wp-image-19">
Instead, I got: <img src="http://virtual-reality.org.za/wp-content/uploads/2017/10/augmented-reality.jpg&quot; alt="Augmented Reality" class="size-full img-responsive">

The problem is basically with the build in responsive images with wordpress - in order for the function to work I need the wp-image-(id) I think it is the attachment id...

How can I get the wp-image(id) added so that my images are reponsive

#578440

Luo Yang
Forum moderator

Supporter languages: English (English ) Chinese (Simplified) (简体中文 )

Supporter Timezone: Asia/Hong_Kong (GMT+08:00)

Dear Gerald,

Which one is the "editor media button" you mentioned above? can you take a screenshot for it?
I can see your website is using bootstrap framework, according to bootstap document, you need only "img-responsive" CSS class:
https://www.w3schools.com/Bootstrap/bootstrap_ref_css_images.asp

If you need to add some other custom CSS class, you will need to edit the HTML codes manually.

#578499

Hi - I think you completely misunderstood my question or did not read it properly.

Here is more information on responsive images - it has nothing to do with bootstrap https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/

  • When you insert a new post into wordpress, or when you edit an existing post in wordpress you can add images to your post - the button to do that is called the "ADD MEDIA" Button
  • When you insert a image into the post via this button it generates code like this: <img src="http://virtual-reality.org.za/wp-content/uploads/2017/10/augmented-reality.jpg&quot; alt="Augmented Reality" class="size-full img-responsive">
  • inside this code is a Class currently it says class="size-full img-responsive"
  • For it to work correctly it needs to say class="size-full img-responsive wp-image-19"
  • Please note that wp-image-(Attachment number) is added to the correct output
  • How do I attach a class with the wp-image-(attachment-id) to the HTML of the image every-time I insert an image.

I am using a Layouts template for this page, I insert a Visual Editor, and then I add the image from the Add MEDIA button.

My suspicion is that something is strpping the wp-image-(attachment-id) from the image tag, how do I get it back?

#578612

A ugly hack I think to resolve the issue would be

\layouts\classes-auto\wpddl.framework.class

function get_image_responsive_class() {
return apply_filters( 'ddl-get_image_responsive_class', 'img-responsive test' );
}
If somehow I could to this

\layouts\classes-auto\wpddl.framework.class

function get_image_responsive_class() {
return apply_filters( 'ddl-get_image_responsive_class', 'img-responsive test wp-image-(id)' );
}

Get the image id to be inserted like above...

#578630

Ok this is kinda weird... after struggling a lot with the issue - it seems that if I use the TEXT editor to insert the image via the ADD Media button it adds the class wp-image(id) automatically - but if I use add media in the HTML editor it does not attach the wp-image(id) class to it...

#578893

Luo Yang
Forum moderator

Supporter languages: English (English ) Chinese (Simplified) (简体中文 )

Supporter Timezone: Asia/Hong_Kong (GMT+08:00)

I assume we are talking about the "Add Media" button of wordpress built-in editor feature, here is the detail steps I tried, please correct me if there is anything missing
1) Create a post/page,
2) click "Visual" tab, click "Add Media" button, insert a image into the content
3) Click "Text" tab, I can see there is CSS class "wp-image-XXX" in the HTML code, for example:

<img class="alignnone size-full wp-image-463" src="http://localhost/wp-content/uploads/2017/05/Piyush-Shrivastava-wpcf_190x190.jpg" alt="" width="190" height="190" />

4) I have already tried it in "Text" tab, and it works fine, there is CSS class "wp-image-XXX" in the HTML code

It might be a compatibility problem of your website, I suggest you check this in your website:
deactivate other plugins and switch to wordpress default theme, and test again

Viewing 6 posts - 1 through 6 (of 6 total)

You are not logged in. You can view support threads, but not post.
If you are already logged in, please refresh your browser.