0

In wordpress we have option to assign "Image CSS class" to any image. My requirement is how can we write a CSS class that will change the image shown below

Original Image

enter image description here

Image after CSS Class (Notice the lower corner)

enter image description here

As I post puzzles on my website so this is important.

  • are you looking for: (a) how to hook the class into the available list of classes shown when uploading and managing an image, or (b) the actual css to apply the desired behavior? – Anson W Han Dec 17 '17 at 18:41
  • Hi, either way it will help me. I want to know how this can be achieved by CSS. I believe later same css we can use to apply in the image css class. – Avinash Patel Dec 18 '17 at 4:56
0

CSS Approach:

For a purely triangular corner in css, see this blog post Code a Simple Folded Corner Effect With CSS or this Folded Corner example on Codepen You can then add the rotated "Answer" text as an absolutely positioned div with the css transform: rotate property.

However, if you absolutely have to the curled corner effect, your best bet is to overlay the original image with an absolutely positioned div with css background image of the curled corner on a transparent canvas.


Attributing the class to the image (or it's containing element/post)

Wordpress's media manager automatically assigns classes to the images uploaded and inserted into a post. There are multiple approaches to assigning a "class" to target the image(s).

  1. If your corner effect applies to all the images on a particular post type,

    • you can simply target the images with css such as: .post-type-class img
    • alternatively, you can add a hook to the theme.
  2. Create a custom image size (which will automatically be assigned a class with similar name). This approach will add the image size as an option in the media management screen when a user elects to insert an image into the post. See this well written/documented blog post: Adding and Using WordPress Custom Image Sizes

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.