Help using Custom Fields to dictate post background image

  • I am trying to make it so using Custom Fields, I can enter in a value that will dictate which background image file will be used (tiled) to fill the background of my post.

    For example Key = “Post Background” and Value=”brick”

    In my loop I was trying this:

    <?php while (have_posts()) : the_post();
    $post_back = get_post_meta($post->ID, ‘Post Background’, $single = true);

    and then below inside the <div> for the background I was trying this:

    <img src=”/site-images/<?php echo $post_back;?>.jpg”;/>

    This was calling up the image but I was unable to figure out how to tile it so it fills the entire <div> (repeat-x i.e.). But more importantly, this way makes the image part of the post and not as the actual background which is what I am trying to do. I of course am used to doing this with css.

    I am obviously new to php. Does anyone know how with Custom Fields, I could call up a background image and css properties on it?

    Thanks! Trimmode

    (Forgot to add that I am using WP 2.6)

Viewing 4 replies - 1 through 4 (of 4 total)
  • CodePoet

    (@design_dolphin)

    I haven’t got much into this myself, and some say it is bad for performance, but you could look into adding php into stylesheets.

    I have only recently starting working with custom fields. I can’t imagine another way of doing it, at this time, that would work.

    Could you define the repeat properties for the img as an inline style? However you would have css code all over your html document then. (I almost never work with inline css, so afraid can’t be of much help there.)

    Maybe you could do a: 

    <img class="image_properties" src="/site-images/<?php echo $post_back;?>.jpg";/>

    And then in your stylesheet set the .image_properties repeat property. Not sure that would work though.

    That is all I can think of.

    CodePoet

    (@design_dolphin)

    Please note: Subject to peer review

    I am not sure if this would work, but in theory it could work.
    Do not use if you don’t know what you are doing or on a production website.

    What also might be an option:

    div class="<?php echo $post_back;?>"> content </div>

and then in your css:

.background_image1 {}
.background_image2 {}

    Of course if there are a lot of pictures then you would have a lot of css work to do in the stylesheet.

    Maybe something like this would work: 

    <div style="background: url(path_to/<?php echo $post_back;?>.jpg);  background-repeat: repeat;" class="class_for_this_div"> content </div>

and then in your css:

.class_for_this_div {}

    Maybe with two keys you could do something like this to create a different styling for the div based on a “styling” key: 

    <div style="background: url(path_to/<?php echo $post_back;?>.jpg);  background-repeat: repeat;" class="<?php echo $class_for_this_div;?>"> content </div>

and then in your css:

.class_for_this_div1 {}
.class_for_this_div2 {}

    You could possibly place all the images in an image folder and use a php statement for the directory path. Then you could place the statement in the template without ever having to change the styling in the template file as long as the image directory and style sheet exist. Of course if you have a lot of posts on the page this will increase your php server calls, so you could cache the result to reduce that.

    I don’t know if you could use shorthand in the inline style attribute. I imagine you could, but like I said before I never use inline styles anymore.

    Thread Starter trimmode

    (@trimmode)

    @design_dolphin ~

    I am not sure if this would work, but in theory it could work.

    Thanks for all of your suggestions! Again, I am new to php coding so I need to digest your ideas and then try them out. I will post back what I got to work to settle your and anyone else’s curiosity.

    Thanks again for your time and ideas.

    Trimmode

    Thread Starter trimmode

    (@trimmode)

    @design_dolphin ~

    Sorry… I have been way busy with my real job and was unable to make the time to get your suggestion working. Well until today.

    It worked like a charm. You gave me several variations and currently I am just using the following which creates my div as well as defining the background using $post_back as my background image:

    <div id=”backgrnd” style=”background: url(/site-images/<?php echo $post_back;?>.jpg)”; background-repeat: repeat;>

    All of my images for the background have the same values (i.e. repeat) so I don’t need to add additional class information. But if I do, I am sure one of your suggestions will work.

    Thanks again.

    Trimmode

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Help using Custom Fields to dictate post background image’ is closed to new replies.