{"id":28326,"date":"2022-06-27T06:48:03","date_gmt":"2022-06-27T06:48:03","guid":{"rendered":"http:\/\/laravel-content-aware-media-crop-platform"},"modified":"2022-06-27T06:48:03","modified_gmt":"2022-06-27T06:48:03","slug":"laravel-content-aware-media-crop-platform","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-content-aware-media-crop-platform\/","title":{"rendered":"Laravel Content Aware Media Crop Platform"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><h2>Introduction<\/h2>\n<p>In this article, we will implement Cloudinary\u2019s Content-Aware Crop API to automatically crop and scale our media files\nto perfectly fit any layout and device.<\/p>\n<h2>PHPSandbox and Github<\/h2>\n<p>The final project can be viewed on <a href=\"https:\/\/phpsandbox.io\/e\/x\/d0vtg?layout=EditorPreview&amp;defaultPath=%2F&amp;theme=dark&amp;showExplorer=no&amp;openedFiles=\">PHPSandbox<\/a> and the entire source code is available on my <a href=\"https:\/\/github.com\/musebe\/Cloudinary-s-Content-Aware\">Github<\/a> repository.<\/p>\n<h2>Prerequisites<\/h2>\n<p>Using Cloudinary in your Laravel projects is pretty straightforward. However, for you to be able to easily follow along,\nyou need to have a good command of your terminal, Git, and entry knowledge of PHP specifically with the Laravel\nframework.<\/p>\n<h2>Getting Started<\/h2>\n<p>This assumes you already have composer installed. Laravel uses Composer to manage its dependencies. So, before we can\nstart to ensure you have Composer installed on your machine.<\/p>\n<ol start=\"2\">\n<li>Install Laravel\n<ul>\n<li>Via Composer:\n<code>composer create-project --prefer-dist laravel\/laravel cloudinary-content-aware<\/code>\n<\/li>\n<li>Via Laravel Installer\n<code>composer global requires laravel\/installer <\/code>laravel new cloudinary-content-aware`<\/li>\n<li>In step 2 above we have created a project folder called <code>cloudinary-content-aware<\/code>. Change the directory to this\nproject folder and run the local development server by typing the following commands:\n<code>cd content-aware <\/code>php artisan serve`<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>The Laravel project is now up and running.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/hackit-africa\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1655852404\/livewire\/laravel-running.png\" alt=\"img.png\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1239\" height=\"638\"\/><\/p>\n<h2>Setting up Cloudinary\u2019s Laravel SDK<\/h2>\n<p>Using Cloudinary allows you to optimize the performance of your Laravel backend by allowing you to upload, process, and\ndeliver your media files. Cloudinary servers automatically perform optimizations and scales to handle high loads and\nbursts of traffic with a global content delivery network (CDN) feature. This is great for our media platform.<\/p>\n<p>To implement a content-aware crop for our media files with Cloudinary:<\/p>\n<ol>\n<li>Sign up for a free Cloudinary account then navigate to the Console page and take note of your Cloud name, <code>API Key<\/code>, and <code>API Secret<\/code>.<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/hackit-africa\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1655852402\/livewire\/cloudinary_dashboard.png\" alt=\"Cloudinary Dashboard\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"940\" height=\"441\"\/><\/p>\n<ol start=\"2\">\n<li>Install <a href=\"https:\/\/github.com\/cloudinary-labs\/cloudinary-laravel#installation\">Cloudinary\u2019s Laravel SDK<\/a>:\n<code>composer require cloudinary-labs\/cloudinary-laravel<\/code>\n<\/li>\n<\/ol>\n<p><strong>Note<\/strong>: Please ensure you follow all the steps in the #Installation section. Publish the configuration file and add\nthe Cloudinary credentials you noted in Step 1 to the .env file.<\/p>\n<h2>Uploading Image Files<\/h2>\n<p>We will be using the Laravel package Livewire to build the UI and the image file upload functionality.<\/p>\n<ol>\n<li>\n<p>Install Livewire Package by running the following command in your Laravel project:<\/p>\n<p><code>composer require livewire\/livewire<\/code><\/p>\n<\/li>\n<li>\n<p>We will then create a Livewire Component to handle our file uploads:<\/p>\n<p><code>php artisan make:livewire FileUpload<\/code><\/p>\n<\/li>\n<\/ol>\n<p>This will create two files, one in <code>app\/Http\/Livewire\/FileUpload<\/code> and the other one\nin <code>resources\/views\/livewire\/file-upload.blade.php<\/code><\/p>\n<p>Now you can use this component anywhere in your Laravel project using the following snippet:<\/p>\n<p><code>&lt;livewire:file-upload\/&gt;<\/code><\/p>\n<p>or<\/p>\n<p><code>@livewire(\u2018file-upload)<\/code><\/p>\n<ol start=\"3\">\n<li>Open <code>resources\/views\/welcome.blade.php<\/code> and add the following code:<\/li>\n<\/ol>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"{{ str_replace('_', '-', app()-&gt;getLocale()) }}\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"utf-8\"<\/span>&gt;<\/span>\n\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1 shrink-to-fit=no\"<\/span>&gt;<\/span>\n\t\n\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Cloudinary Content Aware Crop<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n\t\n\t<span class=\"hljs-comment\">&lt;!-- Fonts --&gt;<\/span>\n\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/fonts.googleapis.com\/css2?family=Nunito:wght@400;600;700&amp;display=swap\"<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span>&gt;<\/span>\n\t\n\t<span class=\"hljs-comment\">&lt;!-- Styles --&gt;<\/span>\n\t@section('styles')\n\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"{{ mix('css\/app.css') }}\"<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span>&gt;<\/span>\n\t@livewireStyles\n\t@show\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"antialiased\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>\n\t<span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center py-4 sm:pt-0\"<\/span>&gt;<\/span>\n\t\n\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"max-w-6xl mx-auto sm:px-6 lg:px-8\"<\/span>&gt;<\/span>\n\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"flex align-items-center pt-8 sm:items-center sm:pt-0\"<\/span>&gt;<\/span>\n\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">svg<\/span> <span class=\"hljs-attr\">xmlns<\/span>=<span class=\"hljs-string\">\"http:\/\/www.w3.org\/2000\/svg\"<\/span> <span class=\"hljs-attr\">viewBox<\/span>=<span class=\"hljs-string\">\"0 0 500 96.77\"<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"156\"<\/span> <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"30\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"mx-auto\"<\/span>&gt;<\/span>\n\t\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span>\n\t\t\t\t\t<span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"M160.53 30.41a17.14 17.14 0 0 1 13.56 6.7.69.69 0 0 0 1 .11l5.71-4.55a.71.71 0 0 0 .11-1 26 26 0 0 0-20.61-10.13c-14.91 0-27 12.85-27 28.65s12.13 28.65 27 28.65a25.85 25.85 0 0 0 20.6-10.12.69.69 0 0 0-.12-1l-5.7-4.5a.71.71 0 0 0-1 .11A17.26 17.26 0 0 1 160.53 70c-10.19 0-18.16-8.7-18.16-19.79s7.97-19.8 18.16-19.8ZM188.27 19.91h7.16a.71.71 0 0 1 .71.71V77.4a.7.7 0 0 1-.7.7h-7.16a.71.71 0 0 1-.71-.71V20.62a.7.7 0 0 1 .7-.71ZM220.54 39.55c-9.49 0-19.09 6.72-19.09 19.57 0 11.29 8.21 19.81 19.09 19.81s19.17-8.52 19.17-19.81-8.24-19.57-19.17-19.57Zm10.53 19.57c0 6.52-4.53 11.44-10.53 11.44s-10.44-4.92-10.44-11.44 4.49-11.2 10.44-11.2 10.53 4.81 10.53 11.2ZM278.3 40.37h-7.16a.7.7 0 0 0-.71.7v19c0 7.42-5.12 10.05-9.51 10.05-3.88 0-7.79-2.93-7.79-9.48V41.07a.7.7 0 0 0-.71-.7h-7.16a.7.7 0 0 0-.7.7v20.5c0 11.25 5.09 17.44 14.34 17.44 3.36 0 8.8-1.93 10.84-6.19l.69.14v4.44a.71.71 0 0 0 .71.71h7.16a.71.71 0 0 0 .71-.71V41.07a.7.7 0 0 0-.71-.7ZM322.27 19.91h-7.17a.7.7 0 0 0-.7.71V46l-.44-.7c-2.18-3.51-6.87-5.78-11.95-5.78-8.76 0-17.62 6.75-17.62 19.65 0 11.25 7.61 19.73 17.69 19.73 3.84 0 9.25-1.54 11.88-5.86l.44-.72v5.08a.7.7 0 0 0 .7.71h7.17a.7.7 0 0 0 .7-.71V20.62a.7.7 0 0 0-.7-.71Zm-8 39.21a11 11 0 0 1-10.75 11.36c-5.86 0-10.45-5-10.45-11.36s4.59-11.2 10.45-11.2a11 11 0 0 1 10.72 11.2ZM333 40.37h7.16a.7.7 0 0 1 .7.7V77.4a.7.7 0 0 1-.7.7H333a.71.71 0 0 1-.71-.71V41.07a.71.71 0 0 1 .71-.7ZM336.61 21.06a5.57 5.57 0 0 0-5.69 5.57 5.64 5.64 0 0 0 5.69 5.58 5.54 5.54 0 0 0 5.61-5.58 5.48 5.48 0 0 0-5.61-5.57ZM370.35 39.55c-3.14 0-8.72 1.69-10.85 6.19l-.69-.14v-4.53a.7.7 0 0 0-.71-.7h-7.16a.7.7 0 0 0-.7.7V77.4a.7.7 0 0 0 .7.71h7.16a.71.71 0 0 0 .71-.71v-19c0-7.36 5.12-10 9.51-10 3.88 0 7.79 2.91 7.79 9.4v19.6a.71.71 0 0 0 .71.71H384a.71.71 0 0 0 .71-.71V56.91c-.02-11.19-5.12-17.36-14.36-17.36ZM427.48 40.37h-7.16a.7.7 0 0 0-.71.7v5l-.43-.7c-2.19-3.51-6.88-5.78-12-5.78-8.75 0-17.62 6.75-17.62 19.65 0 11.25 7.61 19.73 17.7 19.73 3.83 0 9.24-1.54 11.88-5.86l.43-.72v5.01a.71.71 0 0 0 .71.71h7.16a.7.7 0 0 0 .7-.71V41.07a.7.7 0 0 0-.66-.7Zm-8 18.75a11 11 0 0 1-10.78 11.36c-5.86 0-10.44-5-10.44-11.36s4.58-11.2 10.44-11.2a11 11 0 0 1 10.76 11.2ZM460.15 40.5a13.66 13.66 0 0 0-5.14-1c-4.76 0-8.22 2.85-10 8.25l-.64-.09v-6.59a.7.7 0 0 0-.71-.7h-7.16a.7.7 0 0 0-.71.7V77.4a.71.71 0 0 0 .71.71h7.24a.7.7 0 0 0 .7-.71V65c0-14.8 5.91-17 9.44-17a11 11 0 0 1 4.33.9.72.72 0 0 0 .61 0 .7.7 0 0 0 .36-.48l1.42-7.11a.71.71 0 0 0-.45-.81ZM499.88 40.68a.69.69 0 0 0-.59-.31h-7.71a.72.72 0 0 0-.66.45L481.59 65l-9.42-24.18a.72.72 0 0 0-.66-.45h-7.86a.69.69 0 0 0-.58.31.7.7 0 0 0-.07.66l14 34.38-7.73 20.09a.71.71 0 0 0 .66 1h7.5a.69.69 0 0 0 .65-.45l21.86-55a.69.69 0 0 0-.06-.68ZM97.91 28.11A40.38 40.38 0 0 0 59.73 0 39.62 39.62 0 0 0 24.6 20.87a29.88 29.88 0 0 0-7.21 56.56l.75.34h.05v-8.5a22.29 22.29 0 0 1 9.29-41.16l2.1-.22.92-1.89A32.15 32.15 0 0 1 59.73 7.57a32.7 32.7 0 0 1 31.55 25l.72 2.86h3a18.53 18.53 0 0 1 18.15 18.46c0 7.05-4.07 12.82-11 15.74v8.06l.5-.16c11.14-3.65 18.06-12.71 18.06-23.64a26.19 26.19 0 0 0-22.8-25.78Z\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">path<\/span>&gt;<\/span>\n\t\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span>\n\t\t\t\t\t<span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"m45.07 76.79 1.66 1.66a.33.33 0 0 1-.23.56H33.4a6 6 0 0 1-6-6V47.57a.33.33 0 0 0-.33-.33h-2.8a.33.33 0 0 1-.24-.56l11.12-11.12a.33.33 0 0 1 .47 0l11.11 11.12a.33.33 0 0 1-.23.56h-2.84a.34.34 0 0 0-.34.33v25a6 6 0 0 0 1.75 4.22ZM69.64 76.79l1.67 1.66a.33.33 0 0 1-.24.56H58a6 6 0 0 1-6-6V54a.34.34 0 0 0-.33-.34h-2.83a.33.33 0 0 1-.23-.56L59.72 42a.33.33 0 0 1 .47 0l11.12 11.08a.33.33 0 0 1-.24.56h-2.84a.34.34 0 0 0-.33.34v18.59a6 6 0 0 0 1.74 4.22ZM94.22 76.79l1.66 1.66a.33.33 0 0 1-.23.56H82.54a6 6 0 0 1-6-6V60.38a.33.33 0 0 0-.33-.33h-2.8a.33.33 0 0 1-.23-.57L84.3 48.37a.32.32 0 0 1 .46 0l11.12 11.11a.33.33 0 0 1-.23.57H92.8a.33.33 0 0 0-.33.33v12.19a6 6 0 0 0 1.75 4.22Z\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">path<\/span>&gt;<\/span>\n\t\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">svg<\/span>&gt;<\/span>\n\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"m-3 mx-auto text-center fw-bold\"<\/span>&gt;<\/span>Content Aware Media Crop Platform<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"m-4\"<\/span>&gt;<\/span>\n\t\t\tCloudinary uses AI to crop your media files to perfectly fit any design or layout on any device. This is suitable\n\t\t\tfor handling aspect ratios for different social media network requirements.\n\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n\t\t\n\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"m-2 bg-white dark:bg-gray-800 overflow-hidden shadow sm:rounded-lg\"<\/span>&gt;<\/span>\n\t\t\t@livewire('file-upload')\n\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\t\t\n\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"flex justify-center mt-4 mb-4 sm:items-center sm:justify-between\"<\/span>&gt;<\/span>\n\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"ml-4 text-center text-sm text-gray-500 sm:text-center sm:ml-0 mx-auto\"<\/span>&gt;<\/span>\n\t\t\t\tPowered by <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/cloudinary.com\"<\/span>&gt;<\/span>Cloudinary<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n\t\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n@section('scripts')\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"{{ mix('js\/app.js') }}\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n\t<span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-built_in\">window<\/span>.self !== <span class=\"hljs-built_in\">window<\/span>.top) {\n\t\t<span class=\"hljs-built_in\">window<\/span>.top.location.href = <span class=\"hljs-string\">'{{ url('<\/span> \/ <span class=\"hljs-string\">') }}'<\/span>;\n\t}\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n@livewireScripts\n@show\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>This basically adds Livewire styles and scripts, a bunch of HTML code for the project, and the Livewire component we\ncreated earlier. <strong>Please<\/strong> ensure you replace all the code in the file <code>resources\/view\/welcome.blade.php<\/code>.<\/p>\n<ol start=\"3\">\n<li>Open the file <code>resources\/views\/livewire\/file-upload.blade.php<\/code> and populate it with the following code:<\/li>\n<\/ol>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"flex-row\"<\/span>&gt;<\/span>\n\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"spinner-border spinner-border-sm m-3 end-0\"<\/span> <span class=\"hljs-attr\">role<\/span>=<span class=\"hljs-string\">\"status\"<\/span> <span class=\"hljs-attr\">wire:loading<\/span> <span class=\"hljs-attr\">wire:target<\/span>=<span class=\"hljs-string\">\"upload\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\t@if (session()-&gt;has('message'))\n\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"alert alert-success alert-block m-3\"<\/span>&gt;<\/span>\n\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"button\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"close\"<\/span> <span class=\"hljs-attr\">data-dismiss<\/span>=<span class=\"hljs-string\">\"alert\"<\/span>&gt;<\/span>\u00d7<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>{{ session('message') }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>\n\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\t@endif\n\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"flex h-screen justify-center items-center\"<\/span>&gt;<\/span>\n\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"row w-75\"<\/span>&gt;<\/span>\n\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"col-md-12\"<\/span>&gt;<\/span>\n\t\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"mb-5\"<\/span> <span class=\"hljs-attr\">wire:submit.prevent<\/span>=<span class=\"hljs-string\">\"upload\"<\/span>&gt;<\/span>\n\t\t\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"form-group row mt-5 mb-3\"<\/span>&gt;<\/span>\n\t\t\t\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"input-group\"<\/span>&gt;<\/span>\n\t\t\t\t\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"file\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"form-control @error('media') is-invalid @enderror\"<\/span>\n\t\t\t\t\t\t\t       <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Choose file...\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"media-file\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"file\"<\/span> <span class=\"hljs-attr\">wire:model<\/span>=<span class=\"hljs-string\">\"media\"<\/span>&gt;<\/span>\n\t\t\t\t\t\t\t@error('media')\n\t\t\t\t\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"invalid-feedback\"<\/span>&gt;<\/span>{{ $message }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\t\t\t\t\t\t\t@enderror\n\t\t\t\t\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\t\t\t\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">small<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-muted text-center mt-2\"<\/span> <span class=\"hljs-attr\">wire:loading<\/span> <span class=\"hljs-attr\">wire:target<\/span>=<span class=\"hljs-string\">\"media\"<\/span>&gt;<\/span>\n\t\t\t\t\t\t\t{{ __('Uploading') }}<span class=\"hljs-symbol\">&amp;hellip;<\/span>\n\t\t\t\t\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">small<\/span>&gt;<\/span>\n\t\t\t\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\t\t\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-center\"<\/span>&gt;<\/span>\n\t\t\t\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"submit\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"btn btn-sm btn-primary w-25\"<\/span>&gt;<\/span>\n\t\t\t\t\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fas fa-check mr-1\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> {{ __('Crop') }}\n\t\t\t\t\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n\t\t\t\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\t\t\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span>\n\t\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"container\"<\/span>&gt;<\/span>\n\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"row\"<\/span>&gt;<\/span>\n\t\t\t@foreach($croppedImages as $key =&gt; $link)\n\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"col-sm mb-4\"<\/span>&gt;<\/span>\n\t\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card\"<\/span>&gt;<\/span>\n\t\t\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-body\"<\/span>&gt;<\/span>\n\t\t\t\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-img-top\"<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"{{ $link }}\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Card image cap\"<\/span>&gt;<\/span>\n\t\t\t\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-title mt-4 fw-bold\"<\/span>&gt;<\/span>\n\t\t\t\t\t\t\t{{ $key }}\n\t\t\t\t\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span>\n\t\t\t\t\t\t@if($key == '1:1')\n\t\t\t\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Image Aspect Ratio 1:1<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n\t\t\t\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>Platforms: <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>Facebook, Instagram<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n\t\t\t\t\t\t@elseif($key == '2:1' || $key == '16:10')\n\t\t\t\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Image Aspect Ratio 2:1, 16:10<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n\t\t\t\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>Platforms: <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>Twitter, LinkedIn<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n\t\t\t\t\t\t@endif\n\t\t\t\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\t\t\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\t\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\t\t\t@endforeach\n\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>This is our Livewire Component view, this basically will show the upload media file form and on successful processing\nthrough Cloudinary will display the media file uploaded perfectly cropped for the different aspect ratios we will\nspecify.\n<strong>Note:<\/strong> you will see the implementation in code shortly.<\/p>\n<ol start=\"4\">\n<li>Open the file <code>app\/Http\/Livewire\/FileUpload.php<\/code>. Here, we are going to add a method that will upload an image to\nCloudinary applying the necessary transformations that we need. Add the following code in this file.\n<ol>\n<li>First we use Livewires <code>WithFileUploads<\/code> to help us with file uploads, then create two variables <code>$media<\/code>\nand <code>$croppedImages<\/code> which is an array that will contain the image URLs we get back from Cloudinary.<\/li>\n<\/ol>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\"> <span class=\"hljs-keyword\">use<\/span> <span class=\"hljs-title\">Livewire<\/span>\\<span class=\"hljs-title\">WithFileUploads<\/span>;\n\n <span class=\"hljs-keyword\">public<\/span> $media;\n <span class=\"hljs-keyword\">public<\/span> $croppedImages = &#91;];\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<ol start=\"2\">\n<li>Secondly, we will create the function that will upload the image file to <a href=\"https:\/\/cloudinary.com\">Cloudinary<\/a> and\napply specified transformations which include the aspect rations that we need.<\/li>\n<\/ol>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\"><span class=\"hljs-keyword\">public<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">upload<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n $data = <span class=\"hljs-keyword\">$this<\/span>-&gt;validate(&#91;\n   <span class=\"hljs-string\">'media'<\/span> =&gt; &#91;<span class=\"hljs-string\">'required'<\/span>,\n                 <span class=\"hljs-string\">'image'<\/span>,\n                 <span class=\"hljs-string\">'mimes:jpeg,jpg,png'<\/span>,],]);\n <span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-keyword\">empty<\/span>($data&#91;<span class=\"hljs-string\">'media'<\/span>])) {\n   <span class=\"hljs-keyword\">unset<\/span>($data&#91;<span class=\"hljs-string\">'media'<\/span>]);\n } <span class=\"hljs-keyword\">else<\/span> {\n   $media = $data&#91;<span class=\"hljs-string\">'media'<\/span>];\n   $aspect_ratio = &#91;<span class=\"hljs-string\">'1:1'<\/span>, <span class=\"hljs-string\">'2:1'<\/span>, <span class=\"hljs-string\">'16:10'<\/span>];\n   <span class=\"hljs-keyword\">foreach<\/span> ($aspect_ratio <span class=\"hljs-keyword\">as<\/span> $ac) {\n     $image = cloudinary()-&gt;upload($media-&gt;getRealPath(), &#91;\n       <span class=\"hljs-string\">'folder'<\/span>         =&gt; <span class=\"hljs-string\">'cloudinary-content-aware'<\/span>,\n       <span class=\"hljs-string\">'transformation'<\/span> =&gt; &#91;\n         <span class=\"hljs-string\">'quality'<\/span>      =&gt; <span class=\"hljs-string\">'auto'<\/span>,\n         <span class=\"hljs-string\">'fetch_format'<\/span>      =&gt; <span class=\"hljs-string\">'auto'<\/span>,\n         <span class=\"hljs-string\">'aspect_ratio'<\/span> =&gt; $ac,\n         <span class=\"hljs-string\">'gravity'<\/span>      =&gt; <span class=\"hljs-string\">'faces'<\/span>,\n         <span class=\"hljs-string\">'crop'<\/span>         =&gt; <span class=\"hljs-string\">'fill'<\/span>\n       ]])-&gt;getSecurePath();\n\n     <span class=\"hljs-keyword\">$this<\/span>-&gt;croppedImages&#91;$ac] = $image;\n   }\n }\n\n session()-&gt;flash(<span class=\"hljs-string\">'message'<\/span>, <span class=\"hljs-string\">'Image file cropped successfully!'<\/span>);\n}  \n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<\/li>\n<\/ol>\n<p>The code above, slated for image files with focus items for instance faces, will automagically focus on the people\u2019s faces or any focus items and perform content-aware cropping and resizing of the image based on our parameters. Better still, Cloudinary will also automatically optimize the image size with no compromise in quality. This is done by setting the <code>auto<\/code> value for the <code>quality<\/code> and <code>fetch_format<\/code> attributes.<\/p>\n<p>If you successfully implemented the code above, you should be able to see the following when you navigate to your project on the browser:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/hackit-africa\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1655852325\/livewire\/cloudinary_content_aware.png\" alt=\"Cloudinary Content-Aware Crop Media Platform\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1350\" height=\"786\"\/><\/p>\n<p><strong>Note:<\/strong> Cloudinary is super powerful for the management of your media assets in your project that will not only optimize your assets for visual quality but also cost savings in terms of performance, storage, AI-powered transformations as well.<\/p>\n<h1>Do More with Cloudinary<\/h1>\n<p>Cloudinary is your A to Z media management solution &#8211; upload, storage, administration, manipulation, optimization and delivery.<\/p>\n<p><a href=\"https:\/\/cloudinary.com\/signup\">Get started<\/a> with Cloudinary in your Laravel projects for FREE!<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28327,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,387,229,371],"class_list":["post-28326","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-laravel","tag-php","tag-under-review"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Laravel Content Aware Media Crop Platform<\/title>\n<meta name=\"description\" content=\"In this article, we will implement Cloudinary\u2019s Content-Aware Crop API to automatically crop and scale our media files to perfectly fit any layout and device using PHP&#039;s Laravel framework.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-content-aware-media-crop-platform\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Laravel Content Aware Media Crop Platform\" \/>\n<meta property=\"og:description\" content=\"In this article, we will implement Cloudinary\u2019s Content-Aware Crop API to automatically crop and scale our media files to perfectly fit any layout and device using PHP&#039;s Laravel framework.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-content-aware-media-crop-platform\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-27T06:48:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924810\/Web_Assets\/blog\/497580c964f520ec825a0a2da985d8532d6c59f7-256x256-1_283276e757\/497580c964f520ec825a0a2da985d8532d6c59f7-256x256-1_283276e757.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"256\" \/>\n\t<meta property=\"og:image:height\" content=\"256\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-content-aware-media-crop-platform\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-content-aware-media-crop-platform\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Laravel Content Aware Media Crop Platform\",\"datePublished\":\"2022-06-27T06:48:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-content-aware-media-crop-platform\/\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-content-aware-media-crop-platform\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924810\/Web_Assets\/blog\/497580c964f520ec825a0a2da985d8532d6c59f7-256x256-1_283276e757\/497580c964f520ec825a0a2da985d8532d6c59f7-256x256-1_283276e757.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Laravel\",\"PHP\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-content-aware-media-crop-platform\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-content-aware-media-crop-platform\/\",\"name\":\"Laravel Content Aware Media Crop Platform\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-content-aware-media-crop-platform\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-content-aware-media-crop-platform\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924810\/Web_Assets\/blog\/497580c964f520ec825a0a2da985d8532d6c59f7-256x256-1_283276e757\/497580c964f520ec825a0a2da985d8532d6c59f7-256x256-1_283276e757.jpg?_i=AA\",\"datePublished\":\"2022-06-27T06:48:03+00:00\",\"description\":\"In this article, we will implement Cloudinary\u2019s Content-Aware Crop API to automatically crop and scale our media files to perfectly fit any layout and device using PHP's Laravel framework.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-content-aware-media-crop-platform\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-content-aware-media-crop-platform\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-content-aware-media-crop-platform\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924810\/Web_Assets\/blog\/497580c964f520ec825a0a2da985d8532d6c59f7-256x256-1_283276e757\/497580c964f520ec825a0a2da985d8532d6c59f7-256x256-1_283276e757.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924810\/Web_Assets\/blog\/497580c964f520ec825a0a2da985d8532d6c59f7-256x256-1_283276e757\/497580c964f520ec825a0a2da985d8532d6c59f7-256x256-1_283276e757.jpg?_i=AA\",\"width\":256,\"height\":256},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-content-aware-media-crop-platform\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Laravel Content Aware Media Crop Platform\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Laravel Content Aware Media Crop Platform","description":"In this article, we will implement Cloudinary\u2019s Content-Aware Crop API to automatically crop and scale our media files to perfectly fit any layout and device using PHP's Laravel framework.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-content-aware-media-crop-platform\/","og_locale":"en_US","og_type":"article","og_title":"Laravel Content Aware Media Crop Platform","og_description":"In this article, we will implement Cloudinary\u2019s Content-Aware Crop API to automatically crop and scale our media files to perfectly fit any layout and device using PHP's Laravel framework.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-content-aware-media-crop-platform\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-06-27T06:48:03+00:00","og_image":[{"width":256,"height":256,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924810\/Web_Assets\/blog\/497580c964f520ec825a0a2da985d8532d6c59f7-256x256-1_283276e757\/497580c964f520ec825a0a2da985d8532d6c59f7-256x256-1_283276e757.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-content-aware-media-crop-platform\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-content-aware-media-crop-platform\/"},"author":{"name":"","@id":""},"headline":"Laravel Content Aware Media Crop Platform","datePublished":"2022-06-27T06:48:03+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-content-aware-media-crop-platform\/"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-content-aware-media-crop-platform\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924810\/Web_Assets\/blog\/497580c964f520ec825a0a2da985d8532d6c59f7-256x256-1_283276e757\/497580c964f520ec825a0a2da985d8532d6c59f7-256x256-1_283276e757.jpg?_i=AA","keywords":["Guest Post","Laravel","PHP","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-content-aware-media-crop-platform\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-content-aware-media-crop-platform\/","name":"Laravel Content Aware Media Crop Platform","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-content-aware-media-crop-platform\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-content-aware-media-crop-platform\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924810\/Web_Assets\/blog\/497580c964f520ec825a0a2da985d8532d6c59f7-256x256-1_283276e757\/497580c964f520ec825a0a2da985d8532d6c59f7-256x256-1_283276e757.jpg?_i=AA","datePublished":"2022-06-27T06:48:03+00:00","description":"In this article, we will implement Cloudinary\u2019s Content-Aware Crop API to automatically crop and scale our media files to perfectly fit any layout and device using PHP's Laravel framework.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-content-aware-media-crop-platform\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/laravel-content-aware-media-crop-platform\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-content-aware-media-crop-platform\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924810\/Web_Assets\/blog\/497580c964f520ec825a0a2da985d8532d6c59f7-256x256-1_283276e757\/497580c964f520ec825a0a2da985d8532d6c59f7-256x256-1_283276e757.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924810\/Web_Assets\/blog\/497580c964f520ec825a0a2da985d8532d6c59f7-256x256-1_283276e757\/497580c964f520ec825a0a2da985d8532d6c59f7-256x256-1_283276e757.jpg?_i=AA","width":256,"height":256},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/laravel-content-aware-media-crop-platform\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Laravel Content Aware Media Crop Platform"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924810\/Web_Assets\/blog\/497580c964f520ec825a0a2da985d8532d6c59f7-256x256-1_283276e757\/497580c964f520ec825a0a2da985d8532d6c59f7-256x256-1_283276e757.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28326","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28326"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28326\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28327"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28326"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28326"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}