Skip Navigation

[Resolved] wp-image id missing when inserting images through media

This support ticket is created 6 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.

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.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

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

This topic contains 5 replies, has 2 voices.

Last updated by Luo Yang 6 years, 5 months ago.

Assisted by: Luo Yang.

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: hidden link

I expected to see: <img src="hidden link" alt="Augmented Reality" class="size-full img-responsive wp-image-19">
Instead, I got: <img src="hidden link" 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

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:
hidden link

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

#578499
add-media.JPG

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="hidden link" 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

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="<em><u>hidden link</u></em>" 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

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.