<div id= "detailcontent" style="margin-top:10vh;height:40vw;">
    <?php
        if($url){
    ?>
    <img class='alert alert-info fade show' id="detailurlimage" src="https://mymakeabl-data.s3.ap-northeast-1.amazonaws.com/<?php echo $url; ?>"/>
    <img class='alert alert-info fade show' id="detailqr" src="https://mymakeabl-data.s3.ap-northeast-1.amazonaws.com/<?php echo $qrurl; ?>"/>
    <?php
        }
    ?>
</div>
<div class="col-md-12 detailbottom">
    <h1 style="position:relative;margin-top:5vh;">Open app to scan QR & link to my album</h1>
</div>
<div class="col-md-12 detailbottom" tyle="margin-top:5vh">
    <a href="javascript:history.back()">
        <div class="mycontent" style="margin-top:0vh">
            <h1 style="color: white;">Back</h1>
        </div>
    </a>
</div>
<div class="col-md-12 detailbottom" style="margin-top:5vh">
    <a href="<?php echo base_url('');?>">
        <div class="mycontent" style="margin-top:0vh">
            <h1 style="color: white;">Home</h1>
        </div>
    </a>
</div>
</div>

<script>
    getMeta("https://mymakeabl-data.s3.ap-northeast-1.amazonaws.com/<?php echo $url; ?>");
    function getMeta(url){   
        var img = new Image();
        img.onload = function(){
            watermark( this.width, this.height );
        };
        img.src = url;
    }
    function watermark(currentwidth,currentheight){
        if(currentheight/currentwidth>0.75){
            document.getElementById("detailurlimage").style.height = 60+ "vw";
        }
        else{
            document.getElementById("detailurlimage").style.width = 93+ "vw";
        }
    }
</script>
























