WordPress.org

Ready to get started?Download WordPress

Forums

Modifying value in CSS using custom fields (6 posts)

  1. Shaemous
    Member
    Posted 3 years ago #

    Bascially, here is my problem:

    I have a background image that is loaded through a wordpress php field in the admin panel, which determines the value of an array in my stylesheet. I want a way to change that background image named "img.bg" in my CSS through a custom field in one of my pages. I basically want that background image to change per page. I understand that I need to modify the value of "img.bg", but the rest is hard for me to grasp due to my limited knowledge of PHP.

    Theme used : Big Picture 1.2 by Eugene Okoronkwo

    Any help would be appreciated

  2. Shaemous
    Member
    Posted 3 years ago #

    This is the code found in the page.php

    <!-- BACKGROUND IMAGE -->
    <?php $post_id = $post->ID; ?>
    <?php $image_url = get_post_meta( $post_id, 'image', true); ?>  
    
    <?php if ($image_url) :?>
    
    	<img class="bg" src="<?php echo $image_url ; ?>" alt="" />
    
    <?php else : ?>
    
    	<?php if ( has_post_thumbnail() ) : ?>
    		<?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID),'Full'); ?>
    		<img class="bg" src="<?php echo $src[0] ; ?>" alt="" />
    	<?php else : ?>
    		<img class="bg" src="<?php echo $bpt_background_url; ?>" alt="" />
    	<?php endif; ?>
    
    <?php endif; ?>
    <!-- END BACKGROUND IMAGE -->

    and this is the reference in the style sheet

    /* Full screen scaling BG Image min-height:100%;min-width:1024px;width:100%;height:fixed;*/
    
    img.bg{position:fixed;top:0;left:0;z-index:-1;}
    @media screen and (max-width: 1024px){
    	img.bg{left:50%;margin-left:-512px;}
    }

    How can I change the "bg" class value on page load, through custom fields, as to change its src image?

  3. alchymyth
    Forum Moderator
    Posted 3 years ago #

    if you simply want to have a different image on some of the pages, have you tried to enter a (new) image url into the custom field 'image' in your page?

  4. Shaemous
    Member
    Posted 3 years ago #

    No I have not, but it does work in its effect on my background image.

    So I've used the custom field "image" with this as value:

    <img class="bg" src="http://basketballgatineau.cactustest.com/wp-content/themes/big_picture/images/backgrounds/IMG_7455web.jpg" alt="" />

    However, all I get from my page is a black background with " alt="" /> in the top left corner.

    Any clue as why that is?

  5. alchymyth
    Forum Moderator
    Posted 3 years ago #

    you must not put the img tag into the cudtom field - just the image url; in your example, the custom field should only contain:

    http://basketballgatineau.cactustest.com/wp-content/themes/big_picture/images/backgrounds/IMG_7455web.jpg

  6. Devin Price
    Member
    Posted 3 years ago #

Topic Closed

This topic has been closed to new replies.

About this Topic