Google App Engine: How to serve uploaded images in a PHP loop from google cloud storage

Question

I have been using PHP Codeigniter Framework hosted on Google App Engine Platform.

As we know due to security reason Google does not allow to upload images as same as general platform. So I used Google Cloud Storage to upload images and I have successfully implemented it by creating a septate library in Codeigniter.

Problem I am having is how to server them in a foreach or for loop. If I call image once than it displayed on the web page but if I tries to implement that code in a loop it halts when loop counter goes to second count. Below is the library and Helper function I created and calling in a loop.

Library:

    <?php
defined('BASEPATH') OR exit('No direct script access allowed');
use google\appengine\api\cloud_storage\CloudStorageTools;

class Display {

    var $config = Array();
    var $image_url = '';
    var $folder = '';
    var $image  = '';
    var $size   = 400;
    var $crop = true;

    public function __construct(){
        $bucket = CloudStorageTools::getDefaultGoogleStorageBucketName();
        $this->image_url = 'gs://' . $bucket . '/uploads/';
    }

    public function image_url(){
        $path = $this->image_url.$this->folder.'/';
        $this->image_url  = ( !empty($this->image) &&  is_file( $path . $this->image)) ?$path .$this->image:'noimage_thb.png' ;
        $image_url = @CloudStorageTools::getImageServingUrl($this->image_url);
        /*printArray($this->image_url,1);*/
        if($image_url == ''){
            $image_url = '';
        }

        return $image_url;
    }
}

?>

Helper Function:

if (!function_exists('image_url')) {
    function image_url($folderName,$image, $size, $crop = false)
    {
        $CI =& get_instance();
        // we first load the upload library
        $CI->load->library('display');
        $CI->display->folder = $folderName;
        $CI->display->image = $image;
        $CI->display->size = $size;
        $CI->display->crop = $crop;
        $url = $CI->display->image_url();
        return $url;
    }
}

View File Code(Loop):

<div class="fotorama" data-allowfullscreen="true" data-nav="thumbs">
    <?php
            $images = explode(",", $dbdata['beach_photo']);
            for ($img_no = 0; $img_no < count($images); $img_no++) {
                $imageUrl = image_url('venue', $images[$img_no], '400');
    ?>
     <img src="<?php echo $imageUrl; ?>" class="img-responsive"/>
 <?php } ?>
 </div>

Please leave your answers if anyone faced same issue.

Answer 1

As I didn't get any solution from anybody so I dug into my code step by step and found solution. Error I was getting due to incorrect path generation at the time basic helper function called in loop. So here are the updated version which can be usable. Putting my answer here as I didn't find Google Cloud examples in OOPs concept or in library form.

Library: (Display.php)

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
use google\appengine\api\cloud_storage\CloudStorageTools;

class Display
{

    public $config = Array();
    public $image_url = '';
    public $folder = '';
    public $image = '';
    public $size = 400;
    public $path = '';
    public $crop = true;
    public $bucket = '';

    /**
     * Constructor
     *
     * @access    public
     */
    public function __construct($props = array())
    {
        $this->bucket = CloudStorageTools::getDefaultGoogleStorageBucketName();
        if (count($props) > 0) {
            $this->initialize($props);
        }

        log_message('debug', "Upload Class Initialized");
    }

    // --------------------------------------------------------------------

    /**
     * Initialize preferences
     *
     * @param    array
     * @return    void
     */
    public function initialize($config = array())
    {
        $defaults = array(
            'folder' => 0,
            'image' => 0,
            'size' => 600,
            'crop' => false
        );
        foreach ($defaults as $key => $val) {
            if (isset($config[$key])) {
                $method = 'set_' . $key;
                if (method_exists($this, $method)) {
                    $this->$method($config[$key]);
                } else {
                    $this->$key = $config[$key];
                }
            } else {
                $this->$key = $val;
            }
        }

        $this->image_url = 'gs://' . $this->bucket . '/uploads/';
    }

    public function set_image($image)
    {
        $this->image = $image;
    }

    public function set_folder($folder)
    {
        $this->folder = $folder;
    }

    public function set_crop($n)
    {
        $this->crop = $n;
    }

    public function set_size($n)
    {
        $this->size = (int) $n;
    }

    public function image_url()
    {
        $this->path = $this->image_url . $this->folder . '/';
        /*printArray($this->size.' AND '.$this->crop,1);*/
        $this->image_url = (!empty($this->image) && is_file($this->path . $this->image)) ? $this->path . $this->image : $this->path . 'noimage_thb.png';
        $image_url = @CloudStorageTools::getImageServingUrl($this->image_url, ['size' => (int) $this->size, 'crop' => $this->crop]);
        if ($image_url == '') {
            $image_url = '';
        }
        return $image_url;
    }

    public function delete_image()
    {
        $this->path = $this->image_url . $this->folder . '/';
        /*printArray($this->size.' AND '.$this->crop,1);*/
        $this->image_url = (!empty($this->image) && is_file($this->path . $this->image)) ? $this->path . $this->image : $this->path . 'noimage_thb.png';
        $image_url = @CloudStorageTools::deleteImageServingUrl($this->image_url);
        return $image_url;
    }

}

?>

Helper:

if (!function_exists('image_url')) {
    function image_url($folderName, $image, $size, $crop = false)
    {
        $CI =& get_instance();
        // we first load the upload library
        $CI->load->library('display');
        $config['folder'] = $folderName;
        $config['size'] = $size;
        $config['crop'] = $crop;
        $config['image'] = $image;
        $CI->display->initialize($config);
        $url = $CI->display->image_url($image);
        return $url;
    }
}

View: (How to use)

<?php

$images = explode(",", $dbdata['beach_photo']);

for ($img_no = 0; $img_no < count($images); $img_no++) {

$imageUrl = image_url('venue', $images[$img_no], '1200', true);

?>

<img src="<?php echo $imageUrl; ?>" class="img-responsive"/>

<?php

}

?>

Hope this post may help to Google Developers. More about me you can find here www.iamabhishek.com

Answer 2

I found the issue, problem was here in my library:

    $path = $this->image_url.$this->folder.'/';
     $this->image_url  = 
( !empty($this->image) &&  is_file($path .$this->image)) ?$path.$this->image:'noimage_thb.png' ;

every time when loop executes and create image path first time that time image path created is right but after first indexing whenever path make generates it was not replacing previous generated path instead of it was appending older path variable.

I will post proper solution soon. With new version of library.