Image alignleft

  • terryrook

    (@terryrook)


    11 years ago

    I am trying to float an image to the left and wrap some text around the image so the text is horizontally aligned with the image. Now this is easily achieved with giving the image a class of: alignleft

    The image is then placed in a paragraph along with the first line of text which becomes an issue when viewing on smaller devices as I then want the text not to wrap including the first line. I have the following media query:

    img.alignleft {
	float:none !important;
	margin-right:0;
}

    This works great for all the text apart from the first line as it sits in the same paragraph as the image. The obvious solution is to wrap a div around the image so it removes the paragraph but as I want my client to be able to achieve this I am stuck as I have to add the div using code which is too tricky for the client.

    Any thoughts would really be appreciated?

Viewing 1 replies (of 1 total)
  • Thread Starter terryrook

    (@terryrook)

    I found this fix thanks to Suzanne Ahjira:

    Add this to the functions page. Then images are wrapped in a div not a paragraph:

    //Wraps images in div not a paragraph
function filter_ptags_on_images($content) {
  return preg_replace('/<p[^>]*>\\s*?(<a .*?><img.*?><\\/a>|<img.*?>)?\\s*<\/p>/', '<div class="image">$1</div>', $content);
}
add_filter('the_content', 'filter_ptags_on_images');
//End of Wraps images in div not a paragraph
Viewing 1 replies (of 1 total)
  • The topic ‘Image alignleft’ is closed to new replies.