{"id":28017,"date":"2022-07-18T06:40:18","date_gmt":"2022-07-18T06:40:18","guid":{"rendered":"http:\/\/creating-a-virtual-photo-booth-gallery"},"modified":"2025-03-30T02:03:53","modified_gmt":"2025-03-30T09:03:53","slug":"creating-a-virtual-photo-booth-gallery","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-virtual-photo-booth-gallery\/","title":{"rendered":"Creating a Virtual Photo Booth Gallery"},"content":{"rendered":"

Introduction<\/h2>\n

Physical events are often packed with several brand activation activities and photo booths are always a must. We can make our space exciting and engaging to our audience by creating a photo booth. The virtual photo booth will take user images apply cool effect transformations and display them in a gallery.<\/p>\n

PHPSandbox and Github<\/h2>\n

All the code is available on Github<\/a> and PHPSandbox<\/a> for a live demonstration of the Virtual Photo Booth Gallery.<\/p>\n

Prerequisites<\/h2>\n

To be able to follow this article, you need to have experience issuing commands through a terminal. You should also have some knowledge of Git version control and PHP specifically with the Laravel framework.<\/p>\n

Getting Started<\/h2>\n

We will need Composer to initiate a Laravel project and install our dependencies. Follow the steps below diligently. In step 1 we will install PHP and Composer.<\/p>\n

    \n
  1. \n

    Install Composer<\/a> and PHP<\/a> on\nyour machine. Be sure to follow the steps for your respective operating system.<\/p>\n<\/li>\n

  2. \n

    There are two ways to install Laravel:<\/p>\n

      \n
    1. \n

      Via Composer:<\/p>\n

      composer create-project --prefer-dist laravel\/laravel cloudinary-photobooth<\/code><\/p>\n<\/li>\n

    2. \n

      Via Laravel Installer (Recommended):<\/p>\n

      composer global require laravel\/installer<\/code><\/p>\n

      laravel new cloudinary-photobooth<\/code><\/p>\n<\/li>\n<\/ol>\n<\/li>\n

    3. \n

      Following the Laravel installation steps above will create a new application in the folder cloudinary-photobooth<\/code>. Now we need to start the server and test our new application to ensure everything is okay. Change the directory to the project folder and run the local development server by typing the following commands:<\/p>\n

      cd cloudinary-photobooth<\/code><\/p>\n

      php artisan serve<\/code><\/p>\n<\/li>\n<\/ol>\n

      The Laravel server should be up and running and when you open http:\/\/localhost:8000<\/code> on your computer, you should see the application default page shown in the image below:<\/p>\n

      \"Laravel<\/p>\n

      Setting up Cloudinary\u2019s Laravel SDK<\/h2>\n

      Cloudinary has made integration easy for different programming languages with their Programmable Media SDK libraries and with a vibrant community, there are community libraries available as well. In this article, we will use Cloudinary\u2019s Laravel SDK.<\/p>\n

        \n
      1. \n

        First things first, we will need a Cloudinary account. You can sign up for one here<\/a>. Don\u2019t worry it\u2019s free. Log in with your details and you will be redirected to the Dashboard. Take note of your Account details, the Cloud Name, API Key, API Secret and the API Environment variable, we will need them later.<\/p>\n

        \"Cloudinary<\/p>\n<\/li>\n

      2. \n

        Back at our terminal, we need to install Cloudinary\u2019s Laravel SDK<\/a>. Run the following command:<\/p>\n

        composer require cloudinary-labs\/cloudinary-laravel<\/code><\/p>\n

        Note<\/strong>: Follow the link to the SDK and ensure you follow all the steps in the #Installation section.<\/p>\n<\/li>\n

      3. \n

        To complete the setup we will need to add the Account details to our .env<\/code> file as shown below:<\/p>\n<\/li>\n<\/ol>\n

        CLOUDINARY_API_KEY=YOUR_CLOUDINARY_API_KEY\nCLOUDINARY_API_SECRET=YOUR_CLOUDINARY_API_SECRET\nCLOUDINARY_CLOUD_NAME=YOUR_CLOUDINARY_CLOUD_NAME\nCLOUDINARY_URL=YOUR_CLOUDINARY_ENVIRONMENT_VARIABLE\n<\/code><\/pre>\n
        Image Manipulation<\/h2>\n
        Cloudinary is a great platform for media management and manipulation. It is perfect for our current use case since we will need to apply some transformations to the images our users will be uploading and return a URL that we will use to populate our gallery.<\/p>\n
        To return their desired photo booth effect we will manipulate the photos as follows:<\/p>\n
          \n
        1. Change the aspect ratio 0.75 which is a 3×4.<\/li>\n
        2. Adjust the height to 1600px<\/li>\n
        3. Apply an overlay of the respective effect chosen by the user<\/li>\n<\/ol>\n
          Before we can start image manipulation, you\u2019ll have to upload the overlay effects to your Cloudinary media library. You can find them below:<\/p>\n
            \n
          1. \nCloudinary Rocks<\/a>\n<\/li>\n
          2. \nRose Flowers<\/a>\n<\/li>\n
          3. \nAbstract<\/a>\n<\/li>\n
          4. \nFlower Petals Effect<\/a>\n<\/li>\n<\/ol>\n
            As you can see we will have four overlays in this project. You can download the above overlay effects and upload them to your Cloudinary Media library and name them as follows:<\/p>\n
              \n
            1. \neffect_one<\/code>\n<\/li>\n
            2. \neffect_two<\/code>\n<\/li>\n
            3. \neffect_three<\/code>\n<\/li>\n
            4. \neffect_four<\/code>\n<\/li>\n<\/ol>\n
              \"Rename<\/p>\n
              Uploading the Photos<\/h2>\n
              With the overlay effects uploaded, we will need a user interface to allow the user to upload images, for this, we will use the Laravel package Livewire.<\/p>\n
                \n
              1. \n
                Install Livewire Package by running the following command in your Laravel project:<\/p>\n
                composer require livewire\/livewire<\/code><\/p>\n<\/li>\n
              2. \n
                Include Livewire scripts and styles on every page that will be using Livewire. In our case welcome.blade.php<\/code>:<\/p>\n<\/li>\n<\/ol>\n
                ...\n    @livewireStyles\n<\/head<\/span>><\/span>\n<body<\/span>><\/span>\n    ...\n  \n    @livewireScripts\n<\/body<\/span>><\/span>\n<\/html<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
                  \n
                1. \n
                  We will then create a Livewire Component to handle our image uploads:<\/p>\n
                  php artisan make:livewire PhotoBooth<\/code><\/p>\n
                  This will create two files, first app\/Http\/Livewire\/PhotoBooth.php<\/code> and the other one\nin resources\/views\/livewire\/photo-booth.blade.php<\/code>.<\/p>\n
                  We can then use this component anywhere in our code using the following snippet:<\/p>\n
                  <livewire:photo-booth\/><\/code><\/p>\n
                  or<\/p>\n
                  @livewire('photo-booth')<\/code><\/p>\n<\/li>\n
                2. \n
                  Open resources\/views\/welcome.blade.php<\/code> and add the following code within the <body><\/body><\/code> tags as shown below:<\/p>\n<\/li>\n<\/ol>\n
                  <body<\/span> class<\/span>=\"antialiased\"<\/span>><\/span>\n  <div<\/span>><\/span>\n    @livewire('photo-booth')\n  <\/div<\/span>><\/span>\n<\/body<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
                  This includes the Livewire component we created earlier in our welcome.blade.php<\/code>.<\/p>\n
                  Note:<\/strong> Please ensure you go through the Livewire documentation<\/a>, to learn how to install and set it up.<\/p>\n
                    \n
                  1. Open the file resources\/views\/livewire\/photo-booth.blade.php<\/code> and populate it with the following code:<\/li>\n<\/ol>\n
                    <form class<\/span><\/span>=\"mb-5\"<\/span> wire:submit.prevent=\"photoBooth\"<\/span>>\n\t<div<\/span> class<\/span>=\"form-group row mt-5 mb-3\"<\/span>><\/span>\n\t\t<div<\/span> class<\/span>=\"input-group mb-5\"<\/span>><\/span>\n\t\t\t<select<\/span> id<\/span>=\"effect\"<\/span> type<\/span>=\"file\"<\/span> class<\/span>=\"form-select @error('effect') is-invalid @enderror\"<\/span>\n\t\t\t        wire:model<\/span>=\"effect\"<\/span>><\/span>\n\t\t\t\t<option<\/span> selected<\/span>><\/span>Choose Photo Effect ...<\/option<\/span>><\/span>\n\t\t\t\t<option<\/span> selected<\/span> value<\/span>=\"effect_one\"<\/span>><\/span>Cloudinary Rocks<\/option<\/span>><\/span>\n\t\t\t\t<option<\/span> value<\/span>=\"effect_two\"<\/span>><\/span>Rose Flower<\/option<\/span>><\/span>\n\t\t\t\t<option<\/span> value<\/span>=\"effect_three\"<\/span>><\/span>Abstract<\/option<\/span>><\/span>\n\t\t\t\t<option<\/span> value<\/span>=\"effect_four\"<\/span>><\/span>Flower Petals<\/option<\/span>><\/span>\n\t\t\t<\/select<\/span>><\/span>\n\t\t\t@error('effect')\n\t\t\t<div<\/span> class<\/span>=\"invalid-feedback\"<\/span>><\/span>{{ $message }}<\/div<\/span>><\/span>\n\t\t\t@enderror\n\t\t<\/div<\/span>><\/span>\n\t\t<div<\/span> class<\/span>=\"input-group\"<\/span>><\/span>\n\t\t\t<input<\/span> id<\/span>=\"photo\"<\/span> type<\/span>=\"file\"<\/span> class<\/span>=\"form-control @error('photo') is-invalid @enderror\"<\/span>\n\t\t\t       placeholder<\/span>=\"Choose photo...\"<\/span> wire:model<\/span>=\"photo\"<\/span>><\/span>\n\t\t\n\t\t\t@error('photo')\n\t\t\t<div<\/span> class<\/span>=\"invalid-feedback\"<\/span>><\/span>{{ $message }}<\/div<\/span>><\/span>\n\t\t\t@enderror\n\t\t<\/div<\/span>><\/span>\n\t\t<small<\/span> class<\/span>=\"text-muted text-center mt-2\"<\/span> wire:loading<\/span> wire:target<\/span>=\"photo\"<\/span>><\/span>\n\t\t\t{{ __('Uploading') }}\u2026\n\t\t<\/small<\/span>><\/span>\n\t<\/div<\/span>><\/span>\n\t<div<\/span> class<\/span>=\"text-center\"<\/span>><\/span>\n\t\t<button<\/span> type<\/span>=\"submit\"<\/span> class<\/span>=\"btn btn-sm btn-primary w-25\"<\/span>><\/span>\n\t\t\t<i<\/span> class<\/span>=\"fas fa-check mr-1\"<\/span>><\/span><\/i<\/span>><\/span> {{ __('Lights, Camera, Action') }}\n\t\t\t<i<\/span> class<\/span>=\"spinner-border spinner-border-sm ml-1 mt-1\"<\/span> wire:loading<\/span> wire:target<\/span>=\"photoBooth\"<\/span>><\/span><\/i<\/span>><\/span>\n\t\t<\/button<\/span>><\/span>\n\t<\/div<\/span>><\/span>\n<\/form<\/span>><\/span><\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
                    This is a form with a select field, file input field and a button. You can refer to the code on Github for the full implementation.<\/p>\n
                    Implementation in Code<\/h2>\n
                    Open the file app\/Http\/Livewire\/PhotoBooth.php<\/code> and update it with the following code:<\/p>\n
                      \n
                    1. \n
                      First, we use Livewire\u2019s WithFileUploads<\/code> to help us with file uploads, then create the variables $photo<\/code>, $effect<\/code>, effectTransformations<\/code>, $tag<\/code>, $folder<\/code> and $gallery<\/code> an array which will contain the transformed image URLs we get back from Cloudinary.<\/p>\n
                      use<\/span> WithFileUploads<\/span>;  \n\npublic<\/span> $photo;\npublic<\/span> $effect;\npublic<\/span> $gallery = [];\npublic<\/span> $effectTransformations;\npublic<\/span> $folder = \"photo-booth\"<\/span>;\npublic<\/span> $tag = \"photo-booth\"<\/span>;\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n<\/li>\n
                    2. \n
                      Next, create the photoBooth<\/code> function which will apply upload and apply transformations to create the respective effect.<\/p>\n
                      public<\/span> function<\/span> photoBooth<\/span>()<\/span> <\/span>{\n ...\n}\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n<\/li>\n
                    3. \n
                      Let\u2019s populate our method in step 2 above:<\/p>\n
                      public<\/span> function<\/span> photoBooth<\/span>()<\/span> <\/span>{\n     $this<\/span>->validate([\n       'effect'<\/span> => 'required|string'<\/span>,\n       'photo'<\/span> => ['required'<\/span>, 'image'<\/span>, 'max:10240'<\/span>\n     ]);\n\n     $photo = cloudinary()->upload($this<\/span>->photo->getRealPath(), [\n         'folder'<\/span> => $this<\/span>->folder,\n         'aspect_ratio'<\/span>   => 0.75<\/span>,\n         'crop'<\/span>           => 'fill'<\/span>,\n         'height'<\/span>         => 1600<\/span>,\n         'gravity'<\/span> => 'faces'<\/span>\n     ])->getSecurePath();\n\n    $this<\/span>->effectTransformations = [\n       'overlay'<\/span> => [\n           'public_id'<\/span> => \"$this->folder\/assets\/$this->effect\"<\/span>,\n           'flags'<\/span>     => 'layer_apply'<\/span>,\n           'width'<\/span>     => 1.0<\/span>,\n           'height'<\/span>    => 1.0<\/span>,\n       ]\n    ];\n\n    $transformed = cloudinary()->upload($photo, [\n       'folder'<\/span> => $this<\/span>->folder,\n       'tags'<\/span>   => $this<\/span>->tag,\n       'transformation'<\/span> => $this<\/span>->effectTransformations\n    ])->getSecurePath();\n\n    $this<\/span>->gallery = Arr::prepend($this<\/span>->gallery, $transformed);\n}\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
                      Let\u2019s talk about the code.<\/p>\n<\/li>\n<\/ol>\n