1 Topic by Marcus Phoenix

  • Marcus Phoenix
  • Member
  • Offline

Topic: Edit image inside tags? (img attribute values)

Hello, I use htmLawed on WordPress posts and works great. 

include_once ( TEMPLATEPATH . '/htmLawed.php' ); // 
function clean_the_content( $content )
{
    $szPostContent = $content;
    $szRemoveFilter = array( "~<font[^>]*>~", "~</font>~", "~<div[^>]*>~", "~</div>~", "~<span[^>]*>~", "~</span>~", "~<table[^>]*>~", "~</table>~", "~<script[^>]*>~", "~</script>~", "~<SCRIPT[^>]*>~", "~</SCRIPT>~");
    $szPostContent = preg_replace( $szRemoveFilter, '' , $szPostContent);
    $szPostContent = htmLawed($szPostContent);
    return $szPostContent;
}
add_filter('the_content', 'clean_the_content');

My main problem is that I need to edit inside image tag, is that possible?

For example: this is by default: 

<img class="aligncenter size-full wp-image-33089" src="https://www.domain.com/image1.jpg?w=474&amp;h=474" alt="" width="474" height="474" />

And I need it to be:

<img class="aligncenter" src="https://www.domain.com/image1.jpg" width="100%" />

So my question is, can I add custom function or something that it would change the class, width and if possible remove everything after jpg questionmark (.jpg?w=...)

If it is possible, how to apply it to clean_the_content function?

2 Reply by patnaik

  • patnaik
  • Administrator
  • Offline

Re: Edit image inside tags? (img attribute values)

It is possible to have the feature by using htmLawed's hook_tag parameter. The parameter's value is the name of a custom function that you have to define (include). This function receives two arguments – an element's name and any attribute name-value pairs – and is called whenever htmLawed encounters an HTML tag (<element...>). Below is some example indicative code to achieve some of the functionality that you are seeking:

include('... /imgClean.php');
$config = array(... 'hook_tag' => 'imgClean' ...);
$out = htmLawed($in, $config ...);

////// imgClean.php
<?php
function imgClean($element, $attr_array=0){

  //// If element is 'img', clean up.
  
  // Remove any height attribute; set width to '100%', class to 'aligncenter',
  // and remove URL query string for 'src' if it points to a Jpeg 
  
  if($element = 'img' and is_array($attr_array)){
    if(array_key_exists('class', $attr_array)){
      $attr_array['class'] = 'aligncenter' ;
    }
    if(array_key_exists('height', $attr_array)){
      unset($attr_array['height']);
    }
    if(array_key_exists('width', $attr_array)){
      $attr_array['width'] = '100%';
    }
    if(array_key_exists('src', $attr_array)){
      $attr_array['src'] = preg_replace('`\.(jpg|jpeg)\?.+`i', '.\\1', $attr_array['src']);
    }
  }
  
  //// Return
  
  // If second argument is not received, it means a closing tag is being handled
  
  if(is_numeric($attr_array)){
    return "</$element>";
  }

  // Prepare and return tag (element with any attribute string)
  
  $attr_string = '';
  foreach($attr_array as $k=>$v){
    $attr_string .= " {$k}=\"{$v}\"";
  }

  static $empty_elements = array('area', 'br', 'col', 'command', 'embed', 'hr', 'img', 'input', 'isindex', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr');

  return "<{$element}{$attr_string}". (in_array($element, $empty_elements) ? ' /' : ''). '>';
}

3 Reply by Marcus Phoenix

  • Marcus Phoenix
  • Member
  • Offline

Re: Edit image inside tags? (img attribute values)

Thank you so much. Unfortunately it was too difficult for me to get it working. Would it be possible to hire you to write me the complete wordpress function?

Please e-mail me or leave me your own.