Support » Plugins » Add 'Image CSS Class" to containing figure tag

  • Hi Guys

    When adding an image there is an option in the ‘Advanced Options’ to add an ‘Image CSS Class’ which by default is added to the image. Is there any way to move this class to the containing figure tag which the image is placed in to when a caption is added…

    <figure class="wp-caption alignnone MY_CSS_CLASS" style="width: 300px">
    	<img class="none test" width="300" height="200" alt="sample" src="image.jpg">
    	<figcaption class="wp-caption-text">A sample caption</figcaption>
    </figure>

    Any help would be much appreciated!

    Regards
    Ciarán

Viewing 4 replies - 1 through 4 (of 4 total)
  • Yes, this is exactly my question! The whole mobile styling breaks down because the figure also needs to be adjusted, not just the image.

    So, after wracking my brain on this one for a bit, I figured out a way of applying a different style to the caption based on a given image style. You have to use an adjacent sibling selector in CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

    So let’s say you have a custom image size called size-mega-big and you want the caption to look a specific way. This is the markup that WordPress spits out for an image with a caption:

    <figure id="attachment_49" style="width: 1300px" class="wp-caption alignnone">
      <img class="wp-image-49 size-mega-big" src="http://website.org/wp-content/uploads/giraffe-image-1300x720.jpg" alt="Image caption that is great." width="1300" height="720">
      <figcaption class="wp-caption-text">Image caption that is great.</figcaption>
    </figure>

    You could write CSS that looks like this, which targets the caption after the image with the class .size-mega-big:

    .wp-caption img.size-mega-big + figcaption.wp-caption-text
      color: red;
      font-size: large;
    }

    Hope this helps!

    • This reply was modified 4 years, 1 month ago by Benji Mauer.
    • This reply was modified 4 years, 1 month ago by Benji Mauer.
    • This reply was modified 4 years, 1 month ago by Benji Mauer.

    Hi telephag, thanks for all your effort. However, it is the figure tag I need to style, not the enclosing figcaption.

    Ah, I see. In that case, check out this StackOverflow answer: http://wordpress.stackexchange.com/a/231697. Seems like basically what you’re looking for. For my purposes, I mainly needed to style the caption based on a combination of image size and alignment. Where I got hung up was programmatically getting the image size of the image and applying it to the containing figure… The adjacent sibling selector was enough of a solution for me. But, if you can find out how to pull out the Advanced CSS information, you should be able to put that into the function in the StackOverflow answer. Another option would be to use jQuery to pull the class of the image and apply it to its parent figure. Unfortunately there aren’t parent selectors in CSS. Good luck!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Add 'Image CSS Class" to containing figure tag’ is closed to new replies.