WordPress.org

Forums

Referencing images in post for styling (9 posts)

  1. jerylyn
    Member
    Posted 1 year ago #

    Howdy -

    Currently I am trying to use CSS to make a div overlay appear on rollover for each image inside of a post. I seem to be able to target the ENTIRE #content div, ALL of the images inside of the post at once, but can't seem to narrow it down to strictly images within the post, one at a time.

    Basically, I need to wrap a DIV around the post image tag class alone so that each image that is uploaded into a post will live inside of this DIV like what you see here on this codepen: http://codepen.io/ianfarb/pen/ikeAf
    Can someone point me in the right direction as to where this file(s) might live? I'm using Base theme by Web designer wall

    Thank you

  2. jerylyn
    Member
    Posted 1 year ago #

    Hello again -

    Any thoughts on this? Thinking it could be found in the wp-includes folder maybe? I poked around the functions.wp-scripts.php file but didn't see anything related to post images.

    Any help would be greatly appreciated.

  3. salsaturation
    Member
    Posted 1 year ago #

    Hi jerylyn

    <p>You can use image_send_to_editor filter to achieve what you want</p> like the following example http://wordpress.stackexchange.com/questions/20998/automatically-wrap-post-image-in-div

  4. jerylyn
    Member
    Posted 1 year ago #

    Salsaturation - Thank you, that is precisely what I meant!

    In reference to the stackexchange link, user onetrickpony mentioned targeting existing image/posts, "by using the regex function below," would you have any idea which function they are referring to? I'll need to target all existing image inside of a post so if you have any suggestions to do so, I'd love to try them out.

    Thank you

  5. salsaturation
    Member
    Posted 1 year ago #

    great that worked... please share your code snippet as it might be useful to someone else.

    I would suggest you first try a image regenerator plugin like https://wordpress.org/plugins/ajax-thumbnail-rebuild/ and see if that actually resolves the issue

  6. jerylyn
    Member
    Posted 1 year ago #

    Well, on second thought maybe that wasn't exactly what I meant... image_send_to_editor is definitely where I need to put the extra DIV - but how?

    Right now I have:

    if( is_admin() ) {
    
        add_filter( 'image_send_to_editor', 'wp_image_wrap_init', 10, 8 );
        function wp_image_wrap_init( $html, $id, $caption, $title, $align, $url, $size, $alt ) {
            return '<div id="overlay"><div id="wp-image-wrap-'. $id .'" class="wp-image-wrap">'. $html .'</div></div>';
        }
    
    }

    Sorry if my syntax is off, I struggle with backend code but I certainly try!

  7. jerylyn
    Member
    Posted 1 year ago #

    Gonna bring this back one more time in hopes someone might know what I'm trying to accomplish... What you see here on this tumblr when you rollover an image is what I want to achieve only in wordpress world which requires me to add an extra div into image_send_to_editor filter for CSS styling purposes.

    Anyone's help would be wonderfully appreciated!

    Thanks again.

  8. salsaturation
    Member
    Posted 1 year ago #

    Sorry meant to revisit this but just havent had time to... Will have a look later unless someone beats me to it

  9. jerylyn
    Member
    Posted 1 year ago #

    Ah, thanks, salsaturation - I appreciate it!

Topic Closed

This topic has been closed to new replies.

About this Topic