Support » Themes and Templates » images side by side in div

  • Hello! I have been using the code from here but ever since I needed to wrap my images in a div, it doesn’t work even though I changed the selector to images. Had to wrap images in a div to style it to have different width from the text.

    This is what I have in my functions to wrap my images in a div:

    function breezer_addDivToImage( $content ) {
       // A regular expression of what to look for.
       $pattern = '/(<img([^>]*)>)/i';
       // What to replace it with. $1 refers to the content in the first 'capture group', in parentheses above
       $replacement = '<div class="image">$1</div>';
       // run preg_replace() on the $content
       $content = preg_replace( $pattern, $replacement, $content );
       // return the processed content
       return $content;
    add_filter( 'the_content', 'breezer_addDivToImage' );

    And this is the CSS regarding it:

    #image {
        	margin: 0px auto 24px !important;
        	float: left !important;
    	display: block;
    #image:after { clear: both; }
    #image:before, .halfeach:after { content: ""; display: table; }
    p #image img { width: 49%; margin: 0; }
    p #image a:first-child img { float: left; }
    p #image a:last-child img { float: right; }

    I have an example post here.

Viewing 13 replies - 1 through 13 (of 13 total)
Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘images side by side in div’ is closed to new replies.