1

I'm trying to display images using CSS so that I can switch which image is being displayed depending on what stylesheet is selected. It works fine sometimes, others not. Can you help me figure out why?

I first use php to echo out the HTML based on the page id: 

if($host == 'comparison.php?page=1.1.9') 
        {
            echo "<div class='image8'></div>​";
        }
        if($host == 'comparison.php?page=1.1.10') 
        {
            echo "<div class='image9'></div>​";
        }

In the CSS, I identify the class, and tell it to display the image:

div.image8 {
   content:url(homilies/1.1.9.jpg);
   width: 100%;
}

div.image9 {
   content:url(homilies/1.1.10.jpg);
   width: 100%;
}

1.1.10 works perfectly, and the image changes when I select another stylesheet. 1.1.9 does not work at all, and when I inspect the element, the 'div.image8' doesn't even show up. What could be going on here? It works in other places too, I can't figure out the pattern.

D.C
  • 53
  • 6
  • What do you get if you var_dump($host) ? – adelindev May 17 '17 at 01:33
  • @boovad When I put it right after the echo, I get ​`string(72) "comparison.php?page=1.1.9"` – D.C May 17 '17 at 01:42
  • 1
    Just curious... Why are you doing your checks on $host when you have $_GET['page'] available to you? You could set `$page=$_GET['page'];` Then you can simplify your code to `if ($page=='1.1.9') echo '
    ';` Might not resolve your issue, but it will help make your code easier to debug. I also recommend using a switch case. It looks like you actually have more than those two images to display.     – Cagey215 May 17 '17 at 05:03
  • @Cagey215 Thanks for the suggestions - my code is looking cleaner already. Still no dice on the images loading though. In terms of a switch case, would it look something like this? `switch ($page) { case "1.1.1": echo "
    "; break; case "1.1.2": echo "
    "; break; case "1.1.3": echo "
    "; break; }`     – D.C May 17 '17 at 22:47
  • @D.C, I have some time right now to recreate your code on a single page and see if I catch anything. I'll post my result as an answer below. – Cagey215 May 18 '17 at 02:51
  • 1
    Note that `content` should be used with the `::before` or `::after` pseudo-classes (http://stackoverflow.com/questions/17907833/content-url-does-not-display-image-on-firefox-browser). E.g: https://jsfiddle.net/as9gy8z4/2/ – Jon P May 18 '17 at 04:37

2 Answers2

0

Ok D.C, I'm in a good mood and like I mentioned in a comment above, I created a quick, down and dirty, one page code to test your situation. Everything worked great for me, but I did learn a few things too. I have no idea how 1.1.10 worked perfectly for you but not 1.1.9 because from what I can tell neither should work. Tested in Firefox v53.0.2.

  1. Using content:url('some_image'); never showed the image for me.
  2. Had to use background-image: url('some_image'); for an image to appear.
  3. The DIV needed a non-breaking space (&nbsp;) between the DIV tags for the DIV to show the image. In other words, you can't have a background image if there is no content in the DIV. So maybe you just need to add a non-breaking space between your DIV tags to make it work?

That's about it. Now for a working example. You can and should modify it to fit your needs. For example link the style sheet instead of internal like I did. I just wanted to make a quick one page of code to test if everything will work.

<?php
//Use a PHP ternary operator to check if the GET variable is set in the URL.
$page=isset($_GET['page'])?$_GET['page']:'';
switch ($page) {
  case '1.1.9':
    $img_class='image8';
    break;
  case '1.1.10':
    $img_class='image9';
    break;
  case '1.1.11':
    $img_class='image10';
    break;
  default:
    $img_class='image0';
    break;
}
?>
<!DOCTYPE HTML>
  <html>
  <head>
    <title>Image By Get Var</title>
    <style>
      /*Everything between the STYLE tags would actually be in your style sheet instead of internal to your page.*/
      html, body {
        height: 100%;
        background: #ccc;
        padding: 10px;
      }
      #img_container {
        margin-top: 20px;
        background-repeat: no-repeat;
        background-size: contain;
        height: 50%;
        width: 50%;
      }
      /* You can use the static images below to test this code, but should replace with your images using a relative path.*/
      /* Used tinypic.com for demo images since it allows free hotlinking. */
      div.image0 {
        background-image: url('http://i50.tinypic.com/j9blw9.jpg');
      }
      div.image8 {
        background-image: url('http://i42.tinypic.com/5n52ex.jpg');
      }
      div.image9 {
        background-image: url('http://i60.tinypic.com/316ozv5.jpg');
      }
      div.image10 {
        background-image: url('http://i43.tinypic.com/2eg5j7s.jpg');
      }
    </style>
  </head>
  <body>
    <p>The form only exists so that a GET variable can be sent to the page to test PHP setting CSS based on the GET variable.</p>
    <form method="get">
      <input type="radio" name="page" value="1.1.9"> 1.1.9<br>
      <input type="radio" name="page" value="1.1.10"> 1.1.10<br>
      <input type="radio" name="page" value="1.1.11"> 1.1.11<br>
      <input type="submit" value="Submit">
    </form>
    <form>
      <input type="submit" value="Reset To Default">
    </form>
    <?php
    /* The div container has a non-breaking space so that the div will exist to have a background */
    echo '
      <div id="img_container" class="'.$img_class.'">&nbsp;</div>
    ';
    ?>
  </body>
</html>

I hope that helps. If 1.1.9 still does not work when you replace the image in my example with the relative path to your image, then you should make sure that the image is located in the path that you have specified.

Good luck!

Cagey215
  • 159
  • 1
  • 1
  • 8
  • You are a saint. I'll update once I've tested it out. – D.C May 19 '17 at 17:17
  • Still no luck. I'll start fresh and try to figure out what on earth could be going on here. – D.C May 19 '17 at 23:47
  • So you first ran my code on it's own to see how it works. Then you replaced the sample images with a relative path to your images and 1.1.9.jpg still did not work? If so, then it sounds like 1.1.9.jpg does not exist. Keep in mind it could be case sensitive. So if the filename is actually 1.1.9.JPG, then you need to specify the case. Did you verify the file is in the homilies directory? – Cagey215 May 20 '17 at 03:20
  • Yes, my first test was to make sure the image was on the server, in the right directory, and not corrupted somehow. It's so strange. 1.1.1, 1.1.10, 1.1.11, and 1.1.12 are the only images that work across 30 odd page id's. There doesn't seem to be a pattern. I used text comparison tools to make absolutely sure the code is uniform across these images, and I'm left scratching my head. I think the next step for me is to test your method again, this time in a sterile environment. It's possible that some other code is messing me up. – D.C May 20 '17 at 04:47
  • @ Cagey215 If you'd like, I can pm you the actual project, it might make things more clear. This is my first stab at web development, so I might be missing something incredibly obvious. – D.C May 20 '17 at 05:14
0

Found the solution, for anyone interested: after using a CSS validator, I found that there were invisible characters mucking things up. Lesson learned.

D.C
  • 53
  • 6