Adding overlay on images uploaded via page/post editor

  • Resolved DesignLoud

    (@designloud)


    11 years, 1 month ago

    Hi all, I am working on a re-design of a website and had this cool feature worked out in photoshop and trying to see if there is a way to apply this to any images that are uploaded through the page/post editor. Im sure there is a way and I am just not wrapping my head around it but I currently have these images on the site hard coded in the template with a couple of divs and classes to display the corner effect applied to the images. I thought there would be a way to add it to the selectors using a background image and just use :before and :after but I could not get that working either. Is there a way to accomplish this effect either in CSS or through php to insert a div and class to that div before and after an image that is uploaded by the admin?

    The effect (hard-coded version) and test link can be found by clicking here I am sure there is a way as I have seen this on other sites, like I said I just cant wrap my head around how to do it.. 🙁

    Thanks for the help

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter DesignLoud

    (@designloud)

    11 years, 1 month ago

    so I am able to do this with the pseudo class like this:

    .post_content p a:before {
    content: url("http://my-domain.com/wp-content/themes/my-theme/images/top-right.png") ;
    position: absolute;
    right: 25px;
    top: 26px;
}

    But how can I add a class to the anchor tag surrounding each image uploaded and inserted into post by the admin?

    Thread Starter DesignLoud

    (@designloud)

    11 years, 1 month ago

    Got it… Thanks

    Found solution here (JQuery solution since I already use lightbox and sass js) http://www.island94.org/2011/01/adding-class-to-wordpress-linked-images/

    Thread Starter DesignLoud

    (@designloud)

    11 years, 1 month ago

    So I thought I had this fixed 100% but it seems to be broken on Firefox, looks great in Chrome.. Is there something I am doing/not doing with my CSS to achieve this? If you look at this link then you will see what I mean.. Not sure why it breaks in FF, havent even checked safari or IE

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 1 month ago

    Resolve some validation errors before you expect to see a cross-browser-compatible website. Only after then should you be looking at why the CSS is causing it.

    Thread Starter DesignLoud

    (@designloud)

    11 years, 1 month ago

    Hey Andrew, thanks for the feedback.. The validator is usually the last step I take to close up any loose ends. So your telling me that you think those errors could be what is causing the break in FF because I dont see how that would effect one browser and not all. I could be wrong but I wanted your opinion if you think I should address that now and see if I get a fix or just wait until the site is done and get it verified with W3c?

    Thanks

    Thread Starter DesignLoud

    (@designloud)

    11 years, 1 month ago

    Just wanted to put this out there, fixed the errors and the problem still persists..

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Adding overlay on images uploaded via page/post editor’ is closed to new replies.

Tags