'Change Thumbnail Image depending on category

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

This is for a site being run off a seerver on my localhost, not wordpress btw

<div class="item">
  <div class="image">
    <img src="assets/images/banners/cat-banner-1.jpg" alt="" class="img-responsive">
  </div>
  <div class="container-fluid">
    <div class="caption vertical-top text-left">
      <div class="big-text">
        <br />
      </div>

      <?php $sql=mysqli_query($con,"select categoryName  from category where id='$cid'");
while($row=mysqli_fetch_array($sql))
{
    ?>

      <div class="excerpt hidden-sm hidden-md">
        <?php echo htmlentities($row['categoryName']);?>
      </div>
      <?php } ?>

    </div>
    <!-- /.caption -->
  </div>
  <!-- /.container-fluid -->
</div>

I tried using PHP to make the banner section responsive like so:

<div class="image">

<?php if (is_category( 'Entertainment' )) : ?><img class="round_corners hover-shadow" src="assets/images/banners/cat-banner-1.jpg"/><?php endif;?>

<?php if (is_category( 'Science' )) : ?><img class="round_corners hover-shadow" src="assets/images/banners/cat-banner-2.jpg"/><?php endif;?>

<?php if (is_category( 'Lifestyle' )) : ?><img class="round_corners hover-shadow" src="assets/images/banners/cat-banner-3.jpg"/><?php endif;?>
  </div>

I realize this was a sloppy way to do it, but was all I could come up with and it still did not work.

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?

javascriptphphtmljquerycss


Solution 1:[1]

php

<?php 

if $is_category == 'Entertainment' {

<img class="round_corners hover-shadow" src="assets/images/banners/cat-banner-1.jpg"/>

}else if{ $is_category =='Science' {

<img class="round_corners hover-shadow" src="assets/images/banners/cat-banner-2.jpg"/>

}else{ $is_category =='Lifestyle' {

<img class="round_corners hover-shadow" src="assets/images/banners/cat-banner-3.jpg"/>

}

?>

css

.round_corners { 
some format 
}
.hover-shadow {
some format
}

html

echo $is_category

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Vets

Related Questions