Responsive class to all the images in the content

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP












1














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?










share|improve this question


























    1














    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?










    share|improve this question
























      1












      1








      1







      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?










      share|improve this question













      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






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Dec 22 '18 at 20:22









      Latheesh V M Villa

      3351117




      3351117




















          1 Answer
          1






          active

          oldest

          votes


















          2














          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;






          share|improve this answer
















          • 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










          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
          );



          );













          draft saved

          draft discarded


















          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









          2














          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;






          share|improve this answer
















          • 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















          2














          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;






          share|improve this answer
















          • 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













          2












          2








          2






          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;






          share|improve this answer












          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;







          share|improve this answer












          share|improve this answer



          share|improve this answer










          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












          • 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

















          draft saved

          draft discarded
















































          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.




          draft saved


          draft discarded














          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





















































          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






          Popular posts from this blog

          Peggy Mitchell

          Palaiologos

          The Forum (Inglewood, California)