loading image based on breakpoint
Hey Ray
In this code
<div class="row miniHeroLayer">
<div class="coffee-span-12 miniHeroContainer">
<div class="container miniHero">
<?php if ("".($PageContents->getColumnVal("SampleMenu")) ."" != "") { ?>
<div class="container miniHeroLink"> <a class="link-text miniHeroLink" href="images/hero/<?php echo($PageContents->getColumnVal("SampleMenu")); ?>" target="_blank">Click to see sample menu<br>
</a> </div>
<?php } ?>
<div class="container miniHeroContainer mobile">
<div class="responsive-picture miniHero">
<picture> <img alt="" src="./images/misc/yoga.jpg" width="400" height="268"> </picture>
</div>
</div>
<div class="container miniHeroContainer">
<div class="responsive-picture miniHero">
<picture><img alt="" src="./images/hero/<?php echo($PageContents->getColumnVal("MiniHero1")); ?>" width="400" height="268"> </picture>
</div>
<div class="responsive-picture miniHero">
<picture><img alt="" src="./images/hero/<?php echo($PageContents->getColumnVal("MiniHero2")); ?>" width="400" height="268"> </picture>
</div>
<div class="responsive-picture miniHero">
<picture><img alt="" src="./images/hero/<?php echo($PageContents->getColumnVal("MiniHero3")); ?>" width="400" height="268"> </picture>
</div>
</div>
</div>
</div>
</div>
I have 3 images that get shown in a desktop environment. They are provided by the RS
<?php
$PageContents = new WA_MySQLi_RS("PageContents",$DBConnection,1);
$PageContents->setQuery("SELECT * FROM page_contents WHERE page_contents.PageContentsID = 1004");
$PageContents->execute();?>
What I am trying to do is modify it for a mobile environment so that on of those 3 images get loaded at random into this section of the code above:
<div class="container miniHeroContainer mobile">
<div class="responsive-picture miniHero">
<picture> <img alt="" src="./images/misc/yoga.jpg" width="400" height="268"> </picture>
</div>
</div>
how would I go about doing that please?
Cheers
