Theme Hybrid

Hybrid Core adding inline style (width) to figure elements?

6 Replies ·

  1. Justin,

    Can you confirm that Hybrid Core is converting the default markup for images with captions, to use the <figure> element? And that it is also adding an inline style for width? If so, I’d like to remove the inline width. (I love the markup change, though :-))

    Here’s the markup that I’m seeing when inserting an image with a caption:

    <figure id="attachment_1029" style="width: 1200px;" class="wp-caption alignnone">
    <img class="size-full wp-image-1029" src="http://localhost/wp-content/uploads/2013/03/image-alignment-1200x40021.jpg" alt="Image Alignment 1200x4002" width="1200" height="400">
    <figcaption class="wp-caption-text">Massive image comment for your eyeballs.</figcaption>
</figure>

    Is Hybrid Core grabbing the true width of the image and inserting an inline style based on that?

  2. Justin Tadlock

    As of HC 3.0, the framework no longer filters the caption because this is now built into WordPress. You can remove it with this filter though:

    `
    add_filter( ‘img_caption_shortcode_width’, ‘__return_zero’ );
    `

    The inline style is needed though to handle the variable width of the image.

  3. Dave

    Thanks. I actually didn’t get that to work, but you made a good point about needing a width of some kind. I didn’t realize that removing it (or setting width: auto;) would jack up longer captions on relatively smaller images.

    I ended up using the cleaner caption extension that you used on the Stargazer theme. max-width works perfectly while also keeping the images responsive.

    And just FYI… I LOVE your approach to code. And really appreciate all that you do for the WP community.

  4. Justin Tadlock

    I actually didn’t realize that core set `width` instead of `max-width`. If I had realized that, I might not have removed Cleaner Caption.

    I might need to re-add something because I remember `max-width` being a better option in some cases.

  5. Dave

    I would agree that max-width is the way to go.

    It might help if I provide a little context to my surrounding code…

    I applied this base CSS to all images & figures:

    img, figure {
  max-width: 100%;
  height: auto;
}

    With the above styles applied, as long as you don’t apply a margin to the <figure> element, the image is still responsive, even when using core’s native inline width on the <figure>.

    My problem is the way I’ve chosen to setup the spacing for my .entry-content div. Because I want certain elements to fill up 100% of the browser on smaller screens, I have no left/right margin or padding on .entry-content. Instead, I’m using a left/right margin on selected elements within .entry-content, at certain breakpoints:

    @media (min-width: 37.5em) {
  .entry-content p,
  .entry-content figure,
  ...etc {
    margin-left: 6%;
    margin-right: 6%;
  }
}

    The addition of a left or right margin on the <figure> element, combined with an inline width, allows the image to overflow the .entry-content div. But using max-width keeps the image contained.

    If I can help out in any way, test certain scenarios, etc., please let me know.

  6. Justin Tadlock

    Thanks for letting me know. That’ll give me a testing scenario.

    I may just re-add the Cleaner Caption extension.

  7. Justin Tadlock

    Thanks for letting me know. That’ll give me a testing scenario.

    I may just re-add the Cleaner Caption extension.