title: Change Thumbnail Image depending on category
body: <p>I was making this shopping site as a test, but have come across a problem when trying to change the banners at the tops of the page based on the category the user is viewing</p>
  <p>This is for a site being run off a seerver on my localhost, not wordpress btw</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="item"&gt;
    &lt;div class="image"&gt;
      &lt;img src="assets/images/banners/cat-banner-1.jpg" alt="" class="img-responsive"&gt;
    &lt;/div&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="caption vertical-top text-left"&gt;
        &lt;div class="big-text"&gt;
          &lt;br /&gt;
        &lt;/div&gt;
  
        &lt;?php $sql=mysqli_query($con,"select categoryName  from category where id='$cid'");
  while($row=mysqli_fetch_array($sql))
  {
      ?&gt;
  
        &lt;div class="excerpt hidden-sm hidden-md"&gt;
          &lt;?php echo htmlentities($row['categoryName']);?&gt;
        &lt;/div&gt;
        &lt;?php } ?&gt;
  
      &lt;/div&gt;
      &lt;!-- /.caption --&gt;
    &lt;/div&gt;
    &lt;!-- /.container-fluid --&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I tried using PHP to make the banner section responsive like so:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="image"&gt;
  
  &lt;?php if (is_category( 'Entertainment' )) : ?&gt;&lt;img class="round_corners hover-shadow" src="assets/images/banners/cat-banner-1.jpg"/&gt;&lt;?php endif;?&gt;
  
  &lt;?php if (is_category( 'Science' )) : ?&gt;&lt;img class="round_corners hover-shadow" src="assets/images/banners/cat-banner-2.jpg"/&gt;&lt;?php endif;?&gt;
  
  &lt;?php if (is_category( 'Lifestyle' )) : ?&gt;&lt;img class="round_corners hover-shadow" src="assets/images/banners/cat-banner-3.jpg"/&gt;&lt;?php endif;?&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I realize this was a sloppy way to do it, but was all I could come up with and it still did not work.</p>
  <p>What would I have to do to the PHP in order to make the site change banner images for different categories? Is there a way I could also do it perhaps without using PHP?</p>