Custom Field help for inserting linked images above posts

  • Hey, everybody, what’s UP!?

    Ok, this is my sites posts page: https://www.defossesdesign.com/blog/posts

    I found a page in the forums with kinda what I need, but not quite there, and I stink at PHP, so I was hoping someone could do me a quick favor.

    OK, so I make a custom field named imgover, and put the image http location (without quotes, cuz they are there already, see code below) in the Value, and it magically appears (see 4th post down).

    <?php while (have_posts()) : the_post(); ?>

    This next string is what I added. I left in the 2 strings above and below to show you all where it sits in my index.php file.

    <img src=”<?php $key=”overimg”; echo get_post_meta($post->ID, $key, true); ?>” />

    <div class=”titleAndMeta”>

    But it’s not QUITE what I want, because

    1. I need to be able to make it a link to another site, if I want
    2. I need to be able to tweek it’s position with CSS

    So I’m thinking, maybe surround it with <div class="overimg">that string</div> to make it CSS tweakable? Yes?

    And what about making the whole image a link, if needed?

    OK, that’s it, any help would be great, thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter geezerd

    (@geezerd)

    …nevermiiiind….

    I figured it out almost immediately after leaving the question, hahah.

    I just changed it to:

    <div class="overimg"><?php $key="overimg"; echo get_post_meta($post->ID, $key, true); ?></div>

    Put .overimg {some margins and other formatting stuff} in the CSS

    And in the Custom Field value for overimg I put all the link stuff: <a href="https://blah.com"><img src="https://blah.jpg" /></a>

    Wah-lah!

    So, if anyone wants to know how to do it, there it is!

    Thread Starter geezerd

    (@geezerd)

    Use this for the CSS, seams to work better:

    .overimg {display:inline;}
.overimg img {display:inline; padding:25px 0 25px 22px;}

    Leave the “display:inline” in there. I dunno why, but if the .overimg div doesn’t have it, it does some wacky stuff, though it didn’t actually affect the layout, and was only noticeable if you also had a border on the .overimg div, which you’ll never want.

    Thread Starter geezerd

    (@geezerd)

    Actually, to continue talking to myself, haha, this works best:

    All you need in your CSS is this:
    .overimg, .overimg img {display:inline;}

    Then use THIS as the Value in the custom field:

    <a href="https://blah.com"><img src="https://blah.jpg" style="padding:whatever you need for this particular image; border:maybe; other styling?;"/></a>

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Custom Field help for inserting linked images above posts’ is closed to new replies.