Responsive class to all the images in the content

Clash Royale CLAN TAG#URR8PPP
I have used this function to add a responsive class to all the images in content but this breaks the html structure of the website. This wraps the content with :<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"><body> the content goes here (output from the_content();) </body></html>
function add_responsive_class($content)
$content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
if (!empty($content))
$document = new DOMDocument();
libxml_use_internal_errors(true);
$document->loadHTML(utf8_decode($content));
$imgs = $document->getElementsByTagName('img');
foreach ($imgs as $img)
$classes = $img->getAttribute('class');
$img->setAttribute('class', $classes . ' img-fluid');
$html = $document->saveHTML();
return $html;
add_filter('the_content', 'add_responsive_class');
add_filter('acf_the_content', 'add_responsive_class');
Can i know why? any alternative solution for this?
theme-development images the-content
add a comment |
I have used this function to add a responsive class to all the images in content but this breaks the html structure of the website. This wraps the content with :<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"><body> the content goes here (output from the_content();) </body></html>
function add_responsive_class($content)
$content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
if (!empty($content))
$document = new DOMDocument();
libxml_use_internal_errors(true);
$document->loadHTML(utf8_decode($content));
$imgs = $document->getElementsByTagName('img');
foreach ($imgs as $img)
$classes = $img->getAttribute('class');
$img->setAttribute('class', $classes . ' img-fluid');
$html = $document->saveHTML();
return $html;
add_filter('the_content', 'add_responsive_class');
add_filter('acf_the_content', 'add_responsive_class');
Can i know why? any alternative solution for this?
theme-development images the-content
add a comment |
I have used this function to add a responsive class to all the images in content but this breaks the html structure of the website. This wraps the content with :<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"><body> the content goes here (output from the_content();) </body></html>
function add_responsive_class($content)
$content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
if (!empty($content))
$document = new DOMDocument();
libxml_use_internal_errors(true);
$document->loadHTML(utf8_decode($content));
$imgs = $document->getElementsByTagName('img');
foreach ($imgs as $img)
$classes = $img->getAttribute('class');
$img->setAttribute('class', $classes . ' img-fluid');
$html = $document->saveHTML();
return $html;
add_filter('the_content', 'add_responsive_class');
add_filter('acf_the_content', 'add_responsive_class');
Can i know why? any alternative solution for this?
theme-development images the-content
I have used this function to add a responsive class to all the images in content but this breaks the html structure of the website. This wraps the content with :<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"><body> the content goes here (output from the_content();) </body></html>
function add_responsive_class($content)
$content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
if (!empty($content))
$document = new DOMDocument();
libxml_use_internal_errors(true);
$document->loadHTML(utf8_decode($content));
$imgs = $document->getElementsByTagName('img');
foreach ($imgs as $img)
$classes = $img->getAttribute('class');
$img->setAttribute('class', $classes . ' img-fluid');
$html = $document->saveHTML();
return $html;
add_filter('the_content', 'add_responsive_class');
add_filter('acf_the_content', 'add_responsive_class');
Can i know why? any alternative solution for this?
theme-development images the-content
theme-development images the-content
asked Dec 22 '18 at 20:22
Latheesh V M Villa
3351117
3351117
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Parsing and modifying HTML properly using the standard PHP library is quite a pain. There are many gotchas. Here's a well documented example that will add the img-fluid class to all images in the content.
To ensure that the doctype and HTML tags are not added to the HTML fragment a solution from this StackOverflow answer is used:
$dom->loadHTML( $content ), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD );
Note that there are other ways of doing this which are discussed in the SO post I linked to, but this soltion has worked well for me.
The code I've posted below expands on this solution to deal with utf8 characters as well.
/**
* Adds img-fluid class to images in content.
* Fire late to affect gallery images.
*/
add_filter( 'the_content', 'add_responsive_class', 9999 );
add_filter( 'acf_the_content', 'add_responsive_class', 9999 );
function add_responsive_class( $content ) LIBXML_HTML_NODEFDTD );
// Restore previous state of libxml_use_internal_errors() now that we're done.
libxml_use_internal_errors( $libxml_previous_state );
// Create an instance of DOMXpath.
$xpath = new DOMXpath( $dom );
// Get images.
$imgs = $xpath->query( "//img" );
// Add additional classes to images.
foreach ( $imgs as $img )
$existing_class = $img->getAttribute( 'class' );
$img->setAttribute( 'class', "$existing_class img-fluid" );
// Save and return updated HTML.
$new_content = $dom->saveHTML();
return $new_content;
1
Thank you :). works perfectly
– Latheesh V M Villa
Dec 22 '18 at 21:29
You got it, @LatheeshVMVilla!
– Dave Romsey
Dec 22 '18 at 21:31
1
Hi @LatheeshVMVilla, I have not reproduced the warning and have tested (and double tested) this code. Did you copy the code I posted exactly? It sounds like you're having trouble with the line$dom->loadHTML( mb_convert_encoding( $content, 'HTML-ENTITIES', 'UTF-8' ), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD );specifically the bitwise or operation applied to the configuration constants (which should both be integers per the docs) at the end of the line:LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD.
– Dave Romsey
Dec 26 '18 at 16:29
1
i came to know why this happended..it's because of php version ..in one hosting the php version was like 5.x some thing and in another one it was 7.x. the code works fine in 7.x
– Latheesh V M Villa
Dec 26 '18 at 19:19
1
Hi, I think 5.5:https://stackoverflow.com/questions/40911718/domdocumentloadhtml-expects-parameter-2-to-be-long-string-given-when-trying---- is it possible to provide a fallback? is it usually done?
– Latheesh V M Villa
Dec 26 '18 at 19:44
|
show 3 more comments
Your Answer
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "110"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fwordpress.stackexchange.com%2fquestions%2f323705%2fresponsive-class-to-all-the-images-in-the-content%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Parsing and modifying HTML properly using the standard PHP library is quite a pain. There are many gotchas. Here's a well documented example that will add the img-fluid class to all images in the content.
To ensure that the doctype and HTML tags are not added to the HTML fragment a solution from this StackOverflow answer is used:
$dom->loadHTML( $content ), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD );
Note that there are other ways of doing this which are discussed in the SO post I linked to, but this soltion has worked well for me.
The code I've posted below expands on this solution to deal with utf8 characters as well.
/**
* Adds img-fluid class to images in content.
* Fire late to affect gallery images.
*/
add_filter( 'the_content', 'add_responsive_class', 9999 );
add_filter( 'acf_the_content', 'add_responsive_class', 9999 );
function add_responsive_class( $content ) LIBXML_HTML_NODEFDTD );
// Restore previous state of libxml_use_internal_errors() now that we're done.
libxml_use_internal_errors( $libxml_previous_state );
// Create an instance of DOMXpath.
$xpath = new DOMXpath( $dom );
// Get images.
$imgs = $xpath->query( "//img" );
// Add additional classes to images.
foreach ( $imgs as $img )
$existing_class = $img->getAttribute( 'class' );
$img->setAttribute( 'class', "$existing_class img-fluid" );
// Save and return updated HTML.
$new_content = $dom->saveHTML();
return $new_content;
1
Thank you :). works perfectly
– Latheesh V M Villa
Dec 22 '18 at 21:29
You got it, @LatheeshVMVilla!
– Dave Romsey
Dec 22 '18 at 21:31
1
Hi @LatheeshVMVilla, I have not reproduced the warning and have tested (and double tested) this code. Did you copy the code I posted exactly? It sounds like you're having trouble with the line$dom->loadHTML( mb_convert_encoding( $content, 'HTML-ENTITIES', 'UTF-8' ), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD );specifically the bitwise or operation applied to the configuration constants (which should both be integers per the docs) at the end of the line:LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD.
– Dave Romsey
Dec 26 '18 at 16:29
1
i came to know why this happended..it's because of php version ..in one hosting the php version was like 5.x some thing and in another one it was 7.x. the code works fine in 7.x
– Latheesh V M Villa
Dec 26 '18 at 19:19
1
Hi, I think 5.5:https://stackoverflow.com/questions/40911718/domdocumentloadhtml-expects-parameter-2-to-be-long-string-given-when-trying---- is it possible to provide a fallback? is it usually done?
– Latheesh V M Villa
Dec 26 '18 at 19:44
|
show 3 more comments
Parsing and modifying HTML properly using the standard PHP library is quite a pain. There are many gotchas. Here's a well documented example that will add the img-fluid class to all images in the content.
To ensure that the doctype and HTML tags are not added to the HTML fragment a solution from this StackOverflow answer is used:
$dom->loadHTML( $content ), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD );
Note that there are other ways of doing this which are discussed in the SO post I linked to, but this soltion has worked well for me.
The code I've posted below expands on this solution to deal with utf8 characters as well.
/**
* Adds img-fluid class to images in content.
* Fire late to affect gallery images.
*/
add_filter( 'the_content', 'add_responsive_class', 9999 );
add_filter( 'acf_the_content', 'add_responsive_class', 9999 );
function add_responsive_class( $content ) LIBXML_HTML_NODEFDTD );
// Restore previous state of libxml_use_internal_errors() now that we're done.
libxml_use_internal_errors( $libxml_previous_state );
// Create an instance of DOMXpath.
$xpath = new DOMXpath( $dom );
// Get images.
$imgs = $xpath->query( "//img" );
// Add additional classes to images.
foreach ( $imgs as $img )
$existing_class = $img->getAttribute( 'class' );
$img->setAttribute( 'class', "$existing_class img-fluid" );
// Save and return updated HTML.
$new_content = $dom->saveHTML();
return $new_content;
1
Thank you :). works perfectly
– Latheesh V M Villa
Dec 22 '18 at 21:29
You got it, @LatheeshVMVilla!
– Dave Romsey
Dec 22 '18 at 21:31
1
Hi @LatheeshVMVilla, I have not reproduced the warning and have tested (and double tested) this code. Did you copy the code I posted exactly? It sounds like you're having trouble with the line$dom->loadHTML( mb_convert_encoding( $content, 'HTML-ENTITIES', 'UTF-8' ), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD );specifically the bitwise or operation applied to the configuration constants (which should both be integers per the docs) at the end of the line:LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD.
– Dave Romsey
Dec 26 '18 at 16:29
1
i came to know why this happended..it's because of php version ..in one hosting the php version was like 5.x some thing and in another one it was 7.x. the code works fine in 7.x
– Latheesh V M Villa
Dec 26 '18 at 19:19
1
Hi, I think 5.5:https://stackoverflow.com/questions/40911718/domdocumentloadhtml-expects-parameter-2-to-be-long-string-given-when-trying---- is it possible to provide a fallback? is it usually done?
– Latheesh V M Villa
Dec 26 '18 at 19:44
|
show 3 more comments
Parsing and modifying HTML properly using the standard PHP library is quite a pain. There are many gotchas. Here's a well documented example that will add the img-fluid class to all images in the content.
To ensure that the doctype and HTML tags are not added to the HTML fragment a solution from this StackOverflow answer is used:
$dom->loadHTML( $content ), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD );
Note that there are other ways of doing this which are discussed in the SO post I linked to, but this soltion has worked well for me.
The code I've posted below expands on this solution to deal with utf8 characters as well.
/**
* Adds img-fluid class to images in content.
* Fire late to affect gallery images.
*/
add_filter( 'the_content', 'add_responsive_class', 9999 );
add_filter( 'acf_the_content', 'add_responsive_class', 9999 );
function add_responsive_class( $content ) LIBXML_HTML_NODEFDTD );
// Restore previous state of libxml_use_internal_errors() now that we're done.
libxml_use_internal_errors( $libxml_previous_state );
// Create an instance of DOMXpath.
$xpath = new DOMXpath( $dom );
// Get images.
$imgs = $xpath->query( "//img" );
// Add additional classes to images.
foreach ( $imgs as $img )
$existing_class = $img->getAttribute( 'class' );
$img->setAttribute( 'class', "$existing_class img-fluid" );
// Save and return updated HTML.
$new_content = $dom->saveHTML();
return $new_content;
Parsing and modifying HTML properly using the standard PHP library is quite a pain. There are many gotchas. Here's a well documented example that will add the img-fluid class to all images in the content.
To ensure that the doctype and HTML tags are not added to the HTML fragment a solution from this StackOverflow answer is used:
$dom->loadHTML( $content ), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD );
Note that there are other ways of doing this which are discussed in the SO post I linked to, but this soltion has worked well for me.
The code I've posted below expands on this solution to deal with utf8 characters as well.
/**
* Adds img-fluid class to images in content.
* Fire late to affect gallery images.
*/
add_filter( 'the_content', 'add_responsive_class', 9999 );
add_filter( 'acf_the_content', 'add_responsive_class', 9999 );
function add_responsive_class( $content ) LIBXML_HTML_NODEFDTD );
// Restore previous state of libxml_use_internal_errors() now that we're done.
libxml_use_internal_errors( $libxml_previous_state );
// Create an instance of DOMXpath.
$xpath = new DOMXpath( $dom );
// Get images.
$imgs = $xpath->query( "//img" );
// Add additional classes to images.
foreach ( $imgs as $img )
$existing_class = $img->getAttribute( 'class' );
$img->setAttribute( 'class', "$existing_class img-fluid" );
// Save and return updated HTML.
$new_content = $dom->saveHTML();
return $new_content;
answered Dec 22 '18 at 21:18
Dave Romsey
12.7k83653
12.7k83653
1
Thank you :). works perfectly
– Latheesh V M Villa
Dec 22 '18 at 21:29
You got it, @LatheeshVMVilla!
– Dave Romsey
Dec 22 '18 at 21:31
1
Hi @LatheeshVMVilla, I have not reproduced the warning and have tested (and double tested) this code. Did you copy the code I posted exactly? It sounds like you're having trouble with the line$dom->loadHTML( mb_convert_encoding( $content, 'HTML-ENTITIES', 'UTF-8' ), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD );specifically the bitwise or operation applied to the configuration constants (which should both be integers per the docs) at the end of the line:LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD.
– Dave Romsey
Dec 26 '18 at 16:29
1
i came to know why this happended..it's because of php version ..in one hosting the php version was like 5.x some thing and in another one it was 7.x. the code works fine in 7.x
– Latheesh V M Villa
Dec 26 '18 at 19:19
1
Hi, I think 5.5:https://stackoverflow.com/questions/40911718/domdocumentloadhtml-expects-parameter-2-to-be-long-string-given-when-trying---- is it possible to provide a fallback? is it usually done?
– Latheesh V M Villa
Dec 26 '18 at 19:44
|
show 3 more comments
1
Thank you :). works perfectly
– Latheesh V M Villa
Dec 22 '18 at 21:29
You got it, @LatheeshVMVilla!
– Dave Romsey
Dec 22 '18 at 21:31
1
Hi @LatheeshVMVilla, I have not reproduced the warning and have tested (and double tested) this code. Did you copy the code I posted exactly? It sounds like you're having trouble with the line$dom->loadHTML( mb_convert_encoding( $content, 'HTML-ENTITIES', 'UTF-8' ), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD );specifically the bitwise or operation applied to the configuration constants (which should both be integers per the docs) at the end of the line:LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD.
– Dave Romsey
Dec 26 '18 at 16:29
1
i came to know why this happended..it's because of php version ..in one hosting the php version was like 5.x some thing and in another one it was 7.x. the code works fine in 7.x
– Latheesh V M Villa
Dec 26 '18 at 19:19
1
Hi, I think 5.5:https://stackoverflow.com/questions/40911718/domdocumentloadhtml-expects-parameter-2-to-be-long-string-given-when-trying---- is it possible to provide a fallback? is it usually done?
– Latheesh V M Villa
Dec 26 '18 at 19:44
1
1
Thank you :). works perfectly
– Latheesh V M Villa
Dec 22 '18 at 21:29
Thank you :). works perfectly
– Latheesh V M Villa
Dec 22 '18 at 21:29
You got it, @LatheeshVMVilla!
– Dave Romsey
Dec 22 '18 at 21:31
You got it, @LatheeshVMVilla!
– Dave Romsey
Dec 22 '18 at 21:31
1
1
Hi @LatheeshVMVilla, I have not reproduced the warning and have tested (and double tested) this code. Did you copy the code I posted exactly? It sounds like you're having trouble with the line
$dom->loadHTML( mb_convert_encoding( $content, 'HTML-ENTITIES', 'UTF-8' ), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD ); specifically the bitwise or operation applied to the configuration constants (which should both be integers per the docs) at the end of the line: LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD.– Dave Romsey
Dec 26 '18 at 16:29
Hi @LatheeshVMVilla, I have not reproduced the warning and have tested (and double tested) this code. Did you copy the code I posted exactly? It sounds like you're having trouble with the line
$dom->loadHTML( mb_convert_encoding( $content, 'HTML-ENTITIES', 'UTF-8' ), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD ); specifically the bitwise or operation applied to the configuration constants (which should both be integers per the docs) at the end of the line: LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD.– Dave Romsey
Dec 26 '18 at 16:29
1
1
i came to know why this happended..it's because of php version ..in one hosting the php version was like 5.x some thing and in another one it was 7.x. the code works fine in 7.x
– Latheesh V M Villa
Dec 26 '18 at 19:19
i came to know why this happended..it's because of php version ..in one hosting the php version was like 5.x some thing and in another one it was 7.x. the code works fine in 7.x
– Latheesh V M Villa
Dec 26 '18 at 19:19
1
1
Hi, I think 5.5:
https://stackoverflow.com/questions/40911718/domdocumentloadhtml-expects-parameter-2-to-be-long-string-given-when-trying ---- is it possible to provide a fallback? is it usually done?– Latheesh V M Villa
Dec 26 '18 at 19:44
Hi, I think 5.5:
https://stackoverflow.com/questions/40911718/domdocumentloadhtml-expects-parameter-2-to-be-long-string-given-when-trying ---- is it possible to provide a fallback? is it usually done?– Latheesh V M Villa
Dec 26 '18 at 19:44
|
show 3 more comments
Thanks for contributing an answer to WordPress Development Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fwordpress.stackexchange.com%2fquestions%2f323705%2fresponsive-class-to-all-the-images-in-the-content%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown