Wrong usage of php in a javascript "if"?

Question

I'm trying to automatically switch my background image in wordpress depending on the visitors screen size. If he/she has a big screen, he/she gets the big version of the image. If the screen is small, he/she gets the smaller version. (Just for loading time reduction. The image will be resized to fill the screen afterwards, but that's already working.)

What isn't working is the check wether or not the smaller version even exists. If it doesn't exist, the script should fall back to the bigger version and just use that image. I get a background image, but it's only the big one (wordpress field name "BG_value". The url of the small image is stored in "BG_value-medium").

The images DO exist and the paths passed through the wordpress fields are fine, too, so that is NOT the problem. :/

But, without further ado, I present you the code (from my header.php from wordpress).

<body>
<!-- Wordpress Loop -->
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <script type="text/javascript">
        if (($(window).width() < 1340) && (<?php 
                                                if(file_exists(bloginfo('template_url').get_post_meta($post->ID, 'BG_value-medium', $single = true))){
                                                    echo "true";
                                                }else{
                                                    echo "false"; } ?> )){
            <?php $bgimg = get_post_meta($post->ID, 'BG_value-medium', $single = true); ?>
        } else {
            <?php $bgimg = get_post_meta($post->ID, 'BG_value', $single = true); ?>
        }
        </script>
    <div id="bgimage"> <img class="stretch" src="<?php bloginfo('template_url'); ?><?php echo $bgimg; ?>" alt="" /> </div>
<?php endwhile; endif; ?>

I'm sorry if this looks a bit messy, I've been working on this for the last few hours, changing it over and over again.

Any ideas what's going wrong here? Check out the page

+1 For explaining what you want to do, what you've tried, and linking to an example. Excellent question, although the misconception is somewhat cliché! — phihag
– phihag, Commented Jan 2, 2012 at 18:33

Corubba · Accepted Answer · 2012-01-02 18:43:25Z

4

You have a big logical error in this. You want to set the bg image with an javascript function, but you never try to set it with javascript, only with an php echo. Take a look at the sourcecode of this javascript snippet in your browser, and you will see what i mean.

You should store the image-pathes in javascript variables inside the then and else, and use them to set the bg image.

Untested:

<script type="text/javascript">
    if (($(window).width() < 1340) && (<?php if(file_exists(bloginfo('template_url').get_post_meta($post->ID, 'BG_value-medium', $single = true)))){
                                                echo "true";
                                             }else{
                                                echo "false"; } ?> )){
        var bgimage="<?php echo get_post_meta($post->ID, 'BG_value-medium', $single = true); ?>";
    } else {
        var bgimage="<?php echo get_post_meta($post->ID, 'BG_value', $single = true); ?>";
    }

    document.getElementById("bgimageimg").src=bgimage;
</script>

<div id="bgimage"><img id="bgimageimg" class="stretch" src="" alt="" /></div>

edited Jan 2, 2012 at 18:43

answered Jan 2, 2012 at 18:35

Corubba

2,24325 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mariusz Sakowski Over a year ago

op: I'd advise you to render page in browser and see generated sources (ctrl-u in most browsers). You should immediately spot the mistake that BloodyWorld mentions.

Christian Geese Over a year ago

Aw christ, I didn't even get what you meant until I checked the sourcecode. Obviously, I have a lot to learn. I was trying to set a php var through javascript and later on echo it out as a path. I'll try to learn from your code tomorrow and let you know how it went.

PeeHaa · Accepted Answer · 2012-01-02 19:02:17Z

2

I've tried to clean up that mess to see what is happening. The following is untested, but if something doesn't work you can now atleast see why it doesn't work.

<?php

if (have_posts()) {
    while (have_posts()) {
        the_post();

        echo '<script type="text/javascript">';

        $url = bloginfo('template_url');
        $img = get_post_meta($post->ID, 'BG_value-medium', $single = true);
        $file_exists = 'false';
        if (file_exists($url.$img)) {
            $file_exists = 'true';
        }

        echo 'var bgimg = '.get_post_meta($post->ID, 'BG_value', $single = true).';';
        echo 'if ($(window).width() < 1340 && '.$file_exists.') {';
        echo '  bgimg = '.get_post_meta($post->ID, 'BG_value-medium', $single = true).';';
        echo '}';

        echo '$("#bgimage").attr("src", bgimg);';

        echo '</script>';
    }
}

?>

edited Jan 2, 2012 at 19:02

answered Jan 2, 2012 at 18:49

PeeHaa

73.1k60 gold badges195 silver badges264 bronze badges

7 Comments

Christian Geese Over a year ago

Very sexy! (Late) New years resolution: Clean code at all times.

Corubba Over a year ago

The only thing is, in this case the bg-image will be set with every post you have. The hole javscript thing should be outside of the while(). To set it once per page should be enough ;)

PeeHaa Over a year ago

@BloodyWorld I think you are are right about that. Well at least it wouldn't be hard now to make the needed changes to it. Also this would be way more maintainable this way. I'm also wondering what the_post(); does. Perhaps display the post? Well OP can fix that himself :)

Corubba Over a year ago

Ya, it outputs the post. Wordpress use a lot of these 'echo-in-function' thing. Thats why i dont like it.

PeeHaa Over a year ago

@BloodyWorld k does every post has a bgimg or is there only one on the page? I'm not sure because the image has an id which should be unique on the page, but on the other hand you do: get_post_meta($post->ID, 'BG_value-medium', $single = true); so it looks like you are retrieving an image for every post.

|

Collectives™ on Stack Overflow

Wrong usage of php in a javascript "if"?

2 Answers 2

2 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related