WordPress.org

Ready to get started?Download WordPress

Forums

WP Easy Columns
images in a grid (6 posts)

  1. goldieart
    Member
    Posted 10 months ago #

    I would like to set up a grid of images for a portfolio or ecommerce site, and thought wp columns would make that simple. Is this a good plugin for that? if so, how do I get rid of the gap between rows of images?
    is there css to affect this?
    thanks so much,
    goldie

    http://wordpress.org/plugins/easy-columns/

  2. Pat Friedl
    Member
    Plugin Author

    Posted 10 months ago #

    You could do this with Easy Columns. To get rid of the gap, just go to Settings > Easy Columns and edit the options to change the margins to "0px". However, that'll affect any column created with the plugin sitewide. It may be better to add some CSS to the site like:

    .gallery {
    margin: 0px !important;
    }

    Then when you create the columns, add that class to the column like so:

    [ezcol_1half class="gallery"]content here[ezcol_1half class="gallery"]

    I'm working on a newer version that'll let you bulk set classes to columns, as well as pick from several styles.

  3. goldieart
    Member
    Posted 10 months ago #

    Thank you for the response. I opened the page using it in firebug and see the dividing line as follows:

    <div class="ezcol-one-quarter">
    <div class="ezcol-one-quarter">
    <div class="ezcol-one-quarter ezcol-last">

    <div class="ezcol-divider"/>
    <p>

    </p>

    <div class="ezcol-one-quarter">
    <div class="ezcol-one-quarter">
    <div class="ezcol-one-quarter">
    <div class="ezcol-one-quarter ezcol-last">
    <div class="ezcol-divider"/>

    How can I access that HTML to remove the <p> or
    tags. I created a CSS rule to display:none for a <p> in the class .ezcol-divider. It worked but it seemed less elegant than removing it altogether.

  4. goldieart
    Member
    Posted 10 months ago #

    just add to the last post the br tag did not show up because I surrounded it by tags.
    the ezcol-divider class contains an opening p followed by a br followed by a closing p

  5. Pat Friedl
    Member
    Plugin Author

    Posted 10 months ago #

    It looks like you're hitting a carriage return/enter after you insert the columns, which is where WordPress automatically inserts the <p> tags. So that's not Easy Columns inserting that code. The shortcodes do automatically strip the autoP functionality to ensure that columnn content isn't wrapped in <p> tags.

    What you'll need to do is go into the html mode and remove them, or not hit the enter key when adding the columns.

  6. goldieart
    Member
    Posted 10 months ago #

    this is the code, I can't find a br tag or a p, but they show up in firebug:

    [ezcol_1quarter id="" class="" style=""] <img class="alignright size-thumbnail wp-image-230" alt="tomatoes_succhini-800x288" src="http://recipeportfolio:8888/wp-content/uploads/2013/08/tomatoes_succhini-800x288-150x150.jpg" width="150" height="150" />
    <h1 class="title">item with title</h1>
    [/ezcol_1quarter]

    [ezcol_1quarter id="" class="" style=""]<img class="alignright size-thumbnail wp-image-226" alt="strawberries" src="http://recipeportfolio:8888/wp-content/uploads/2013/08/strawberries-150x150.jpg" width="150" height="150" />[/ezcol_1quarter]

    [ezcol_1quarter id="" class="" style=""]<img class="alignright size-thumbnail wp-image-221" alt="pizza1" src="http://recipeportfolio:8888/wp-content/uploads/2013/08/pizza1-150x150.jpg" width="150" height="150" />[/ezcol_1quarter]

    [ezcol_1quarter_end id="" class="" style=""]<img class="alignright size-thumbnail wp-image-208" alt="lemons-300x199" src="http://recipeportfolio:8888/wp-content/uploads/2013/08/lemons-300x199-150x150.jpg" width="150" height="150" />[/ezcol_1quarter_end]

    <!--begin second row-->
    [ezcol_1quarter id="" class="" style=""] <img class="alignright size-thumbnail wp-image-230" alt="tomatoes_succhini-800x288" src="http://recipeportfolio:8888/wp-content/uploads/2013/08/tomatoes_succhini-800x288-150x150.jpg" width="150" height="150" /> [/ezcol_1quarter]

    [ezcol_1quarter id="" class="" style=""]<img class="alignright size-thumbnail wp-image-226" alt="strawberries" src="http://recipeportfolio:8888/wp-content/uploads/2013/08/strawberries-150x150.jpg" width="150" height="150" />[/ezcol_1quarter]

    [ezcol_1quarter id="" class="" style=""]<img class="alignright size-thumbnail wp-image-221" alt="pizza1" src="http://recipeportfolio:8888/wp-content/uploads/2013/08/pizza1-150x150.jpg" width="150" height="150" />[/ezcol_1quarter]

    [ezcol_1quarter_end id="" class="" style=""]<img class="alignright size-thumbnail wp-image-208" alt="lemons-300x199" src="http://recipeportfolio:8888/wp-content/uploads/2013/08/lemons-300x199-150x150.jpg" width="150" height="150" />[/ezcol_1quarter_end]

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.