title: How to retrieve images from Azure Blob storage and display on website with PHP
body: <p>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 <a href="https://example.blob.core.windows.net/example-media/facebook/" rel="nofollow noreferrer">https://example.blob.core.windows.net/example-media/facebook/</a> The first file below is <strong>index.php</strong> and the file below it is <strong>gallery.php</strong>.</p>
  
  <p>The screenshot show how I wish the image would display I will be grateful for any help and/or recommendations.</p>
  
  <pre><code>&lt;?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;
  
  ?&gt;
  
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
      &lt;?php 
          $docRoot = $_SERVER['DOCUMENT_ROOT'];
          include "$docRoot/includes/header2.php";
      ?&gt;        
      &lt;div class="event-top"&gt;
          &lt;h1&gt;Facebook Image Gallery&lt;/h1&gt;
          &lt;p&gt;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.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="campaign-bottom container-fluid"&gt; &lt;!-- lower piece --&gt;
          &lt;div class="fotorama" data-auto="false"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="clearfix"&gt;&lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
              $(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 = &lt;?= json_encode(galleryContent($path, $uri)) ?&gt;;
  
                  $('.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'
                  });
                  });
  &lt;/script&gt;
  
      &lt;?php 
          $docRoot = $_SERVER['DOCUMENT_ROOT'];
          include "$docRoot/includes/footer2.php";
      ?&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <pre><code>&lt;?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) &amp;&amp; ($isDirectory
                  ? ($name[0] != '.')
                  : (preg_match(GALLERY_REGEX, $name, $match) === 1)))
  
                  $list[] = [
                      'name' =&gt; $name,
                      'path' =&gt; $fullPath,
                      //Convert similar extension to single representation (add double tiff?)
                      'type' =&gt; $isDirectory ? 'directory' : str_replace(['jpeg', 'tiff'], ['jpg', 'tif'], $match[2]),
                      'img' =&gt; $uri . '/' . $name,
                      //'shortname' =&gt; $isDirectory ? $name : $match[1],
                      /*'video' =&gt; (!$isDirectory &amp;&amp; is_file(
                          realpath($path . DIRECTORY_SEPARATOR . $match[1] . '.' . GALLERY_VIDEO_TYPE)
                      )) ? ($uri . '/' . $match[1] . '.' . GALLERY_VIDEO_TYPE) : null*/
                      'video' =&gt; (!$isDirectory &amp;&amp; is_file(
                          realpath($path . DIRECTORY_SEPARATOR . $match[1] . '.' . 'mp4')
                      )) ? ($uri . '/' . $match[1] . '.' . 'mp4') : null
                  ];
          }
  
          return $list;
  }
  
  ?&gt;
  </code></pre>