![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_110,c_scale\/f_auto,q_auto\/v1736284419\/Web_Assets\/blog\/IMAGE-42_36543aa406\/IMAGE-42_36543aa406.png?_i=AA\")
<\/figure>\n\n\n\nAs you read, think about which aspects this AI image workflows with PHP and Cloudinary might best suit your own app as we explore how it integrates seamlessly into this Product Catalog demo app.<\/p>\n\n\n
If you\u2019re also interested in video workflows, be sure to check out the next post<\/a> in this series, where we\u2019ll dive into optimizing video uploads, including asynchronous processes and AI-driven moderation.<\/p>\n<\/div>\n\n\n The PHP Product Catalog app showcases a simulated product catalog with products stored in a database. Each product includes a name, metadata (SKU, price, and category), auto-generated description, image, and video. For details on the video upload-to-delivery workflow, check out the next post in this series.<\/p>\n\n\n\n With this app, you can:<\/p>\n\n\n\n See the app’s image features in action:<\/p>\n\n\n To follow along with this post, make sure you:<\/p>\n\n\n\n Cloudinary\u2019s Upload widget<\/a> streamlines image uploads directly from the browser, allowing users to upload images effortlessly.<\/p>\n\n\n\n Alt text enhances both accessibility and SEO, making your website more inclusive and discoverable by search engines. With Cloudinary’s AI Content Analysis<\/a> add-on, you can automatically generate descriptive alt text for uploaded images. <\/p>\n\n\n\n To enable this feature with the Upload widget, configure a preset to include the AI Content Analysis add-on. For example, when creating an upload preset (e.g., Here\u2019s the code to create the upload preset:<\/p>\n\n\n Structured metadata enhances asset management, allowing quick searches, categorization, and handling by attributes like SKU or license restrictions. In the PHP Product Catalog app, metadata is added to each image.<\/p>\n\n\n\n Here’s the full code snippet:<\/p>\n\n\nE-commerce Demo Overview<\/strong><\/h2>\n\n\n\n
\n
Get Started<\/strong><\/h2>\n\n\n\n
\n
Client-Side Image Upload<\/strong><\/h2>\n\n\n\n
Integrating the Upload Widget<\/h4>\n\n\n\n
\n
<!-- Include the Cloudinary Upload Widget library --><\/span>\n<script<\/span> src<\/span>=\"https:\/\/upload-widget.cloudinary.com\/global\/all.js\"<\/span>><\/span><\/script<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n\n
<div<\/span> style<\/span>=\"display:flex;margin-bottom:10px;\"<\/span>><\/span>\n <button<\/span> type<\/span>=\"button\"<\/span> id<\/span>=\"upload_image_button\"<\/span>><\/span>Upload Image<\/button<\/span>><\/span>\n <input<\/span> type<\/span>=\"hidden\"<\/span> name<\/span>=\"image_url\"<\/span> id<\/span>=\"image_url\"<\/span>><\/span>\n <input<\/span> type<\/span>=\"hidden\"<\/span> name<\/span>=\"image_id\"<\/span> id<\/span>=\"image_id\"<\/span>><\/span>\n<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n\n
\n
cloudName<\/code> of your product environment (found on your Cloudinary dashboard<\/a>).<\/li>\n\n\n\nphp_demo_preset<\/code>upload preset in the next section.)<\/li>\n\n\n\n<script<\/span>><\/span>\n \/\/ Configure the upload widget for images<\/span>\n const<\/span> imageWidget = cloudinary.createUploadWidget({\n cloudName<\/span>: '<?php echo $_ENV['<\/span>CLOUDINARY_CLOUD_NAME']; ?>'<\/span>, \/\/ Replace with your Cloudinary cloud name<\/span>\n uploadPreset<\/span>: 'php_demo_preset'<\/span>, \/\/ Replace with your upload preset<\/span>\n sources<\/span>: ['local'<\/span>, 'url'<\/span>], \/\/ Allow uploads from local files and URLs<\/span>\n resourceType<\/span>: 'image'<\/span>, \/\/ Specify resource type as image<\/span>\n maxFileSize<\/span>: 5000000<\/span>, \/\/ Set a max file size (optional)<\/span>\n folder<\/span>: 'products\/images'<\/span>, \/\/ Optional folder path<\/span>\n }, (error, result) => {\n if<\/span> (!error && result && result.event === \"success\"<\/span>) {\n console<\/span>.log('Image uploaded successfully:'<\/span>, result.info.secure_url);\n document<\/span>.getElementById('image_url'<\/span>).value = result.info.secure_url;\n document<\/span>.getElementById('image_id'<\/span>).value = result.info.public_id;\n \/\/ Display the image preview<\/span>\n const<\/span> imageSection = document<\/span>.getElementById(\"image_section\"<\/span>);\n imageSection.innerHTML = `\n <label>Image:<\/label>\n <div>\n <img src=\"${result.info.secure_url}<\/span>\" alt=\"New Product Image\" style=\"max-width: 200px; height: auto; margin-bottom: 15px;\">\n <\/div>\n `<\/span>;\n }\n });\n \/\/ Open the image upload widget<\/span>\n document<\/span>.getElementById('upload_image_button'<\/span>).addEventListener('click'<\/span>, () => {\n imageWidget.open();\n });\n<\/span><\/script<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nAI-Generated Alt Text<\/strong><\/h2>\n\n\n\n
Setting Up the AI Content Analysis Add-on<\/h3>\n\n\n\n
php_demo_preset<\/code>), add \"detection\" => \"captioning\"<\/code> to the preset settings. This activates the add-on for all uploads using this preset. In our app, the script to configure the php_demo_preset<\/code> is triggered when clicking the first-time setup button from the main page or the app.<\/p>\n\n\n\ntry<\/span> {\n \/\/ Create upload preset if it doesn't yet exist.<\/span>\n $result = $api\n ->createUploadPreset([\n \"name\"<\/span> => \"php_demo_preset\"<\/span>, \n \"unsigned\"<\/span> => true<\/span>, \n \"tags\"<\/span> => \"php_demo\"<\/span>,\n \"detection\"<\/span> => \"captioning\"<\/span>\n ]);\n} catch<\/span> (ApiError $e) {\n echo<\/span> 'API Error : '<\/span> . $e->getMessage();\n} catch<\/span> (Exception<\/span> $e) {\n echo<\/span> 'Error: '<\/span> . $e->getMessage();\n}<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\nMetadata Updates and Alt Text Capture<\/strong><\/h2>\n\n\n\n
\n
$allFieldsResponse = $api->listMetadataFields();\n$allFields = $allFieldsResponse['metadata_fields'<\/span>] ?? [];\n\n$externalIds=[];\n$exists=false<\/span>;\ntry<\/span> {\n $newLabel = \"Description\"<\/span>;\n \/\/ Check if the field already exists. If so, save its external_id in an array.<\/span>\n $exists = checkAndAppendExternalId($allFields, $newLabel, $externalIds);\n\n \/\/ If the field doesn't exist, create it. Save its external_id in an array.<\/span>\n if<\/span> (!$exists) {\n \/\/ Prepare and add a \"String\" metadata field (e.g., Description)<\/span>\n $stringMetadataField = new<\/span> StringMetadataField($noExternalId);\n $stringMetadataField->setLabel($newLabel);\n $stringMetadataField->setMandatory(true<\/span>); \/\/ Makes this field required<\/span>\n $stringMetadataField->setDefaultValue('Product description'<\/span>); \/\/ Sets a default value<\/span>\n $newField = $api->addMetadataField($stringMetadataField);\n $externalIds[] = [$newLabel => $newField['external_id'<\/span>]]; \/\/ Append key-value pair<\/span>\n echo<\/span> \"String metadata field added successfully.\\n\"<\/span>;\n }<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n\n
<code>$cloudinary_result = $cld->uploadApi()->explicit($image_public_id, [\"type\"<\/span>=>\"upload\"<\/span>,\"metadata\"<\/span> => $metadata]);<\/code>\n$image_caption = $cloudinary_result['info'<\/span>]['detection'<\/span>]['captioning'<\/span>]['data'<\/span>]['caption'<\/span>] ?? null<\/span>; \/\/ Save the image alt text from the response<\/span><\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\nif<\/span> ($_SERVER['REQUEST_METHOD'<\/span>] == 'POST'<\/span>) {\n \/\/ Capture metadata values entered in the form.<\/span>\n $description = $_POST['description'<\/span>];\n $name = $_POST['name'<\/span>];\n $sku = $_POST['sku'<\/span>];\n $price = $_POST['price'<\/span>];\n $category = $_POST['category'<\/span>];\n\n \/\/ Get external ids for metadata fields.<\/span>\n $allFieldsResponse = $api->listMetadataFields();\n $allFields = $allFieldsResponse['metadata_fields'<\/span>] ?? []; \n $externalIds=[];\n checkAndAppendExternalId($allFields, \"Description\"<\/span>, $externalIds);\n checkAndAppendExternalId($allFields, \"SKU\"<\/span>, $externalIds);\n checkAndAppendExternalId($allFields,