How to retrieve images from Azure Blob storage and display on website with PHP

Question

I have an Azure Blob storage account and a folder with many images inside of it. I would like for the images to be displayed on the website. The path to the blob is https://example.blob.core.windows.net/example-media/facebook/ The first file below is index.php and the file below it is gallery.php .

The screenshot show how I wish the image would display I will be grateful for any help and/or recommendations.

<?php 

    $docRoot = $_SERVER['DOCUMENT_ROOT']; //Set document root
    require_once "$docRoot/includes/config.php"; //Get global config file
    require_once "$docRoot/includes/checklogin.php";
    require_once "$docRoot/includes/gallery.php";

    $path = "$docRoot" . "facebook/images";
    $uri = 'images';

    $page_name = "Facebook Image Gallery"; //Page name variable for use in title tag, etc.

    //
    // Let's reset the title to include the pagename, if it has one 
    // Shorthand PHP can be hard to read, this is an if (?), else(:)
    //
    $page_name != "" ? $site_title = $site_title." | ".$page_name : $site_title = $site_title;

?>

<!DOCTYPE html>
<html lang="en">

    <?php 
        $docRoot = $_SERVER['DOCUMENT_ROOT'];
        include "$docRoot/includes/header2.php";
    ?>        
    <div class="event-top">
        <h1>Facebook Image Gallery</h1>
        <p>Grab the list of thumbnail images to scroll, or click the forward/back arrow on the right/left of each image to navigate the gallery. Right-click and "Save Image as" to download.</p>
    </div>
    <div class="campaign-bottom container-fluid"> <!-- lower piece -->
        <div class="fotorama" data-auto="false"></div>
    </div>
    <div class="clearfix"></div>

    <script type="text/javascript">
            $(function() {

                var $window = $(window),
                    $body = $('body'),
                    pixelRatio = window.devicePixelRatio || 1,
                    width = Math.min(760 * pixelRatio, 1280),
                    ratio = 1.5,
                    thumbHeight = 56,
                    thumbWidth = thumbHeight * ratio;

                var data = <?= json_encode(galleryContent($path, $uri)) ?>;

                $('.fotorama').fotorama({
                    data: data,
                    clicktransition: 'dissolve',
                    width: '100%',
                    ratio: ratio,
                    hash: true,
                    maxheight: '100%',
                    nav: 'thumbs',
                    margin: 2,
                    shuffle: true,
                    thumbmargin: 2,
                    thumbwidth: thumbWidth,
                    thumbheight: thumbHeight,
                    allowfullscreen: 'native',
                    navposition: 'top',
                    keyboard: {
                        space: true
                    },
                    shadows: false,
                    fit: 'cover'
                });
                });
</script>

    <?php 
        $docRoot = $_SERVER['DOCUMENT_ROOT'];
        include "$docRoot/includes/footer2.php";
    ?>
    </body>
</html>

<?php

/*function isNullOrWhitespace($str)
{
    return ($str === null || (strlen(trim($str)) == 0)) ? TRUE : FALSE;
}*/

function galleryContent($path, $uri, $getFolders = false)
{
        $list = [];
        $parts = scandir($path);

        //Look for extension matches and push
        foreach ($parts as $name) {

            //Clean up path
            $fullPath = realpath($path . DIRECTORY_SEPARATOR . $name);
            $isDirectory = is_dir($fullPath);
            $match = null;

            if (($getFolders == $isDirectory) && ($isDirectory
                ? ($name[0] != '.')
                : (preg_match(GALLERY_REGEX, $name, $match) === 1)))

                $list[] = [
                    'name' => $name,
                    'path' => $fullPath,
                    //Convert similar extension to single representation (add double tiff?)
                    'type' => $isDirectory ? 'directory' : str_replace(['jpeg', 'tiff'], ['jpg', 'tif'], $match[2]),
                    'img' => $uri . '/' . $name,
                    //'shortname' => $isDirectory ? $name : $match[1],
                    /*'video' => (!$isDirectory && is_file(
                        realpath($path . DIRECTORY_SEPARATOR . $match[1] . '.' . GALLERY_VIDEO_TYPE)
                    )) ? ($uri . '/' . $match[1] . '.' . GALLERY_VIDEO_TYPE) : null*/
                    'video' => (!$isDirectory && is_file(
                        realpath($path . DIRECTORY_SEPARATOR . $match[1] . '.' . 'mp4')
                    )) ? ($uri . '/' . $match[1] . '.' . 'mp4') : null
                ];
        }

        return $list;
}

?>

Answer 1

You may use Microsoft Azure Storage PHP Client Libraries to access your Azure Storage service.

You can use the SDK to generate an URL with SAS of your image. Then directly put the URL to <img src="the_url_with_SAS_of your_image"> , in this way, your image should be able to show on your page.

Here is a sample for generating a link with SAS .

If you do not care about security, you can set your image blob to be public. In this way, you can directly access it without SAS.

How to retrieve images from Azure Blob storage and display on website with PHP

Question

1 answers

solution1
2 2020-03-17 02:14:58

How to retrieve images from Azure Blob storage and display on website with PHP

Question

1 answers

solution1 2 2020-03-17 02:14:58

solution1
2 2020-03-17 02:14:58