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