WordPress.org

Ready to get started?Download WordPress

Forums

images side by side in div (14 posts)

  1. vyww
    Member
    Posted 10 months ago #

    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:

    <?php
    
    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.

  2. philipcarter99
    Member
    Posted 10 months ago #

    Hi ,please make css file seperate and call to ur php code or else put it in html code..

    [signature moderated]

  3. vyww
    Member
    Posted 10 months ago #

    Sorry I'm not too sure how to do that, could you tell me the steps? Thank you!

  4. Andrew Nevins
    Volunteer Moderator
    Posted 10 months ago #

    it doesn't work even though I changed the selector to images.

    What doesn't work:
    Your <div> doesn't get wrapped?
    You have a PHP error?
    Your CSS isn't working?

  5. vyww
    Member
    Posted 10 months ago #

    The <p class="halfeach"> is not applied to the images.

  6. Andrew Nevins
    Volunteer Moderator
    Posted 10 months ago #

    Let's see your site in case you don't need this HTML.

  7. vyww
    Member
    Posted 10 months ago #

    There's a test post here. Thank you!

  8. Andrew Nevins
    Volunteer Moderator
    Posted 10 months ago #

    Is this something like what you want http://awesomescreenshot.com/0551dgje12 ?

  9. vyww
    Member
    Posted 10 months ago #

    Yep that'd be great!

  10. Andrew Nevins
    Volunteer Moderator
    Posted 10 months ago #

    Do you have header.php in your Child Theme?

  11. vyww
    Member
    Posted 10 months ago #

    Yeah I do

  12. Andrew Nevins
    Volunteer Moderator
    Posted 10 months ago #

    Do you know which template file that webpage uses?

  13. vyww
    Member
    Posted 10 months ago #

    I'm afraid I have no idea, but my header.php is here.

  14. vyww
    Member
    Posted 10 months ago #

    Hi, sorry to trouble you again, but what would you suggest regarding the header.php?

Reply

You must log in to post.

About this Topic