Add meta image to a featured image.

Hi. I’m looking for a solution to add a meta-image on different post.
(small icon-image on the featured image on a post)

Let’s say I have a site with tutorials, some free, some paid some with video etc. And I want to add a meta-image on different content on the site.

Example from http://psd.tutsplus.com/:
http://imageshack.us/photo/my-images/4/helpyb.png/

Somebody out there who knows how to do this?

  • Philip John
    • DEV MAN’s Apprentice

    Hiya!

    Hmm, I believe you'd need to have a DIV element somewhere which would overlay on top of the image and show the 'meta image'

    However, I'm not much of a designer :slight_smile: so I'll ask the theme devs if they can provide any hints on this for ya.

    Phil

  • Ovidiu
    • Code Wrangler

    have a look at the source code of those pages:

    <div class="the_image_meta">
    <span class="image_meta videos">videos</span>
    </div>

    then they use some absolute positioning CSS...
    `
    #page .post .post_image .videos {
    background-attachment:initial;
    background-clip:initial;
    background-color:transparent;
    background-image:url(http://psd.tutsplus.com/wp-content/themes/tuts/images/theme/psdtuts/sprite.png);
    background-origin:initial;
    background-position:0 -450px;
    background-repeat:no-repeat no-repeat;
    }
    `

    firebug is your friend :wink:

  • Ovidiu
    • Code Wrangler

    see this line? #page .post .post_image .videos {

    basically you apply different css code to images per category => determine the category of the post then apply the corresponding css...
    not sure how this can be done on the front page, but it can be done with styling alone as far as I know.

    sorry if that sounds weird but English is not my native language so sometimes its hard to explain things...

    can I have a link to your page? its easier to explain with a first hand example.

  • Ovidiu
    • Code Wrangler

    ok, that link doesn't help much. it all depends on how you determine if a tutorial is free or not.

    lets say you make a category called free and one called paid

    then you might have to edit your theme so that the image or the element containing it or the one containing that one, has a distinct class, i.e. free or paid thus giving you the chance to code some css that styles it differently...

    currently it doesn't look as if your theme gives you enough info to do this, see screen shot (at least I can't recognize anything useful in there)

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.