Automatisation n8n : remplacement d'images via Webhook
Ce workflow n8n a pour objectif de faciliter le remplacement d'images dans des présentations ou documents en utilisant un Webhook. Dans un contexte professionnel, ce type d'automatisation est particulièrement utile pour les équipes marketing ou de communication qui gèrent régulièrement des contenus visuels. Par exemple, lorsque des images doivent être mises à jour dans des présentations, ce workflow permet de le faire rapidement et efficacement sans intervention manuelle. Le processus commence par un déclencheur de type Webhook qui reçoit les données nécessaires. Ensuite, le workflow vérifie si tous les paramètres requis sont fournis grâce à un nœud de condition. Si des champs sont manquants, un message d'erreur est renvoyé via le nœud 'Error Missing Fields'. Si tous les paramètres sont présents, le workflow procède à la récupération des éléments de la diapositive et à l'identification des images à remplacer. Le nœud 'Replace Images' effectue ensuite l'appel API pour mettre à jour les images. Grâce à cette automatisation n8n, les utilisateurs gagnent en efficacité, réduisent les risques d'erreurs manuelles et améliorent la qualité de leurs présentations. En intégrant ce workflow, les entreprises peuvent se concentrer sur des tâches à plus forte valeur ajoutée.
Workflow n8n webhook, images : vue d'ensemble
Schéma des nœuds et connexions de ce workflow n8n, généré à partir du JSON n8n.
Workflow n8n webhook, images : détail des nœuds
Inscris-toi pour voir l'intégralité du workflow
Inscription gratuite
S'inscrire gratuitementBesoin d'aide ?{
"nodes": [
{
"id": "aea55995-2c2c-4f59-8b68-43fa1871bb4c",
"name": "Replace Images",
"type": "n8n-nodes-base.httpRequest",
"position": [
860,
140
],
"parameters": {
"url": "=https://slides.googleapis.com/v1/presentations/{{ $('Webhook').item.json[\"body\"][\"presentation_id\"] }}:batchUpdate ",
"method": "POST",
"options": {},
"jsonBody": "={\n \"requests\": [\n {\n \"replaceImage\": {\n \"imageObjectId\": \"{{ $json.objectId }}\",\n \"url\": \"{{ $('Webhook').item.json[\"body\"][\"image_url\"] }}\",\n \"imageReplaceMethod\": \"CENTER_CROP\"\n }\n },\n {\n \"updatePageElementAltText\": {\n \"objectId\": \"{{ $json.objectId }}\",\n \"description\": \"{{ $('Webhook').item.json[\"body\"][\"image_key\"] }}\"\n }\n }\n ]\n} \n ",
"sendBody": true,
"specifyBody": "json",
"authentication": "predefinedCredentialType",
"nodeCredentialType": "googleSlidesOAuth2Api"
},
"credentials": {
"googleSlidesOAuth2Api": {
"id": "XnM5YeAtI5QnYrMh",
"name": "Google Slides account"
}
},
"typeVersion": 4.2
},
{
"id": "92eeca3a-47b2-4daa-ac51-5b957c8d7d56",
"name": "Error Missing Fields",
"type": "n8n-nodes-base.respondToWebhook",
"position": [
500,
340
],
"parameters": {
"options": {
"responseCode": 500
},
"respondWith": "json",
"responseBody": "{\n \"error\": \"Missing fields.\"\n}"
},
"typeVersion": 1.1
},
{
"id": "14878542-6a42-4fe4-8dd6-328450a883eb",
"name": "Respond to Webhook",
"type": "n8n-nodes-base.respondToWebhook",
"position": [
1040,
140
],
"parameters": {
"options": {},
"respondWith": "json",
"responseBody": "{\n \"message\": \"Image replaced.\"\n}"
},
"typeVersion": 1.1
},
{
"id": "ac42249b-3c7d-4ba1-be7d-ba6e1ae652cd",
"name": "Sticky Note",
"type": "n8n-nodes-base.stickyNote",
"position": [
60,
-540
],
"parameters": {
"width": 596.8395976509729,
"height": 654.4370838798395,
"content": "## Dynamically Replace Images in Google Slides\nThis workflow exposes an API endpoint that lets you dynamically replace an image in Google Slides, perfect for automating deck presentations like updating backgrounds or client logos.\n\n### Step 1: Set Up a Key Identifier in Google Slides\nAdd a unique key identifier to the images you want to replace.\n1. Click on the image.\n2. Go to **Format Options** and then **Alt Text**.\n3. Enter your unique identifier, like `client_logo` or `background`.\n\n### Step 2: Use a POST Request to Update the Image\nSend a POST request to the workflow endpoint with the following parameters in the body:\n- `presentation_id`: The ID of your Google Slides presentation.\nYou can find it in the URL of your Google presentation : `https://docs.google.com/presentation/d/{this-part}/edit#slide=id.p`)\n- `image_key`: The unique identifier you created.\n- `image_url`: The URL of the new image.\n\nThat's it! The specified image in your Google Slides presentation will be replaced with the new one from the provided URL.\n\nThis workflow is designed to be flexible, allowing you to use the same identifier across multiple slides and presentations. I hope it streamlines your slide automation process!\n\nHappy automating!\nThe n8Ninja"
},
"typeVersion": 1
},
{
"id": "735c5c4e-df8f-47ad-b0d7-ed57453a84d0",
"name": "Webhook",
"type": "n8n-nodes-base.webhook",
"position": [
60,
160
],
"webhookId": "df3b8b83-fd6d-40f8-be13-42bae85dcf63",
"parameters": {
"path": "replace-image-in-slide",
"options": {},
"httpMethod": "POST",
"responseMode": "responseNode"
},
"typeVersion": 2
},
{
"id": "22d1dd70-0716-4407-8e25-703355969e95",
"name": "Retrieve matching Images ObjectIds",
"type": "n8n-nodes-base.code",
"position": [
680,
140
],
"parameters": {
"jsCode": "const key = $('Webhook').item.json.body.image_key;\n\nconst pageElements = $input\n .all()\n .flatMap(item => item.json.slides)\n .flatMap(slide => slide.pageElements.filter(el => el.image && el.description === key));\n\nconst objectIds = pageElements.map(el => ({ objectId: el.objectId }));\n\nreturn objectIds"
},
"typeVersion": 2
},
{
"id": "f942a8de-9fa8-4855-9be1-4247bae887e5",
"name": "Retrieve All Slide Elements",
"type": "n8n-nodes-base.httpRequest",
"position": [
500,
140
],
"parameters": {
"url": "=https://slides.googleapis.com/v1/presentations/{{ $('Webhook').item.json.body.presentation_id }}",
"options": {},
"authentication": "predefinedCredentialType",
"nodeCredentialType": "googleSlidesOAuth2Api"
},
"credentials": {
"googleSlidesOAuth2Api": {
"id": "XnM5YeAtI5QnYrMh",
"name": "Google Slides account"
}
},
"typeVersion": 4.2
},
{
"id": "ddcbe7ed-9abc-49ac-98e5-4d5222a641d4",
"name": "Check if all params are provided",
"type": "n8n-nodes-base.if",
"position": [
260,
160
],
"parameters": {
"options": {},
"conditions": {
"options": {
"leftValue": "",
"caseSensitive": true,
"typeValidation": "strict"
},
"combinator": "and",
"conditions": [
{
"id": "3272f7e8-4bc2-44bd-9760-437b2992e6e7",
"operator": {
"type": "string",
"operation": "exists",
"singleValue": true
},
"leftValue": "={{ $json.body.presentation_id }}",
"rightValue": ""
},
{
"id": "9e8abf56-622d-4704-95ea-c0f5f31683dd",
"operator": {
"type": "string",
"operation": "exists",
"singleValue": true
},
"leftValue": "={{ $json.body.image_key }}",
"rightValue": ""
},
{
"id": "d2cec4c9-2a90-4a24-ab6c-628689419698",
"operator": {
"type": "string",
"operation": "exists",
"singleValue": true
},
"leftValue": "={{ $json.body.image_url }}",
"rightValue": ""
}
]
}
},
"typeVersion": 2
}
],
"pinData": {},
"connections": {
"Webhook": {
"main": [
[
{
"node": "Check if all params are provided",
"type": "main",
"index": 0
}
]
]
},
"Replace Images": {
"main": [
[
{
"node": "Respond to Webhook",
"type": "main",
"index": 0
}
]
]
},
"Retrieve All Slide Elements": {
"main": [
[
{
"node": "Retrieve matching Images ObjectIds",
"type": "main",
"index": 0
}
]
]
},
"Check if all params are provided": {
"main": [
[
{
"node": "Retrieve All Slide Elements",
"type": "main",
"index": 0
}
],
[
{
"node": "Error Missing Fields",
"type": "main",
"index": 0
}
]
]
},
"Retrieve matching Images ObjectIds": {
"main": [
[
{
"node": "Replace Images",
"type": "main",
"index": 0
}
]
]
}
}
}Workflow n8n webhook, images : pour qui est ce workflow ?
Ce workflow s'adresse principalement aux équipes marketing et communication des entreprises de taille moyenne à grande, qui cherchent à automatiser la gestion de leurs contenus visuels. Il est conçu pour des utilisateurs ayant un niveau technique intermédiaire, familiarisés avec les outils d'automatisation et les API.
Workflow n8n webhook, images : problème résolu
Ce workflow résout le problème de la mise à jour manuelle des images dans les présentations, ce qui peut être long et sujet à erreurs. En automatisant ce processus, les utilisateurs évitent les frustrations liées à la recherche et au remplacement d'images, tout en garantissant que les contenus restent à jour et pertinents. Le résultat est une gestion plus fluide des ressources visuelles, permettant aux équipes de se concentrer sur des tâches stratégiques.
Workflow n8n webhook, images : étapes du workflow
Étape 1 : Le flux est déclenché par un Webhook qui reçoit les données nécessaires.
- Étape 1 : Le workflow vérifie si tous les paramètres requis sont fournis avec le nœud 'Check if all params are provided'.
- Étape 2 : Si des champs sont manquants, un message d'erreur est renvoyé via le nœud 'Error Missing Fields'.
- Étape 3 : Si tous les paramètres sont présents, le nœud 'Retrieve All Slide Elements' récupère les éléments de la diapositive.
- Étape 4 : Le nœud 'Retrieve matching Images ObjectIds' identifie les images à remplacer.
- Étape 5 : Enfin, le nœud 'Replace Images' met à jour les images via un appel API.
Workflow n8n webhook, images : guide de personnalisation
Pour personnaliser ce workflow, commencez par modifier l'URL du Webhook selon vos besoins. Vous pouvez également adapter les paramètres dans le nœud 'Replace Images' pour cibler des API spécifiques. Si vous souhaitez ajouter d'autres services, envisagez d'intégrer des nœuds supplémentaires pour gérer d'autres types de contenus. Assurez-vous de sécuriser le flux en configurant les bonnes authentifications pour les appels API. Enfin, pour un meilleur suivi, vous pouvez ajouter des nœuds de logging pour monitorer les actions effectuées.