While testing a shopping site I created, I encountered an issue with changing the banners at the top of the page based on the category the user is viewing.
This site is hosted on a server on my localhost, not using wordpress by the way.
<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 attempted to use PHP for making the banner section responsive like this:
<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 understand that my approach was not very efficient, but it was the best I could come up with and unfortunately, it did not work.
What changes do I need to make in the PHP code to switch the banner images for different categories? Is there a way to achieve this without relying on PHP?