Automatische Erstellung von sich aktualisierenden Bildern und Weiterleitungs-URLs für Ihren Inhalt

Experte

Dies ist ein Social Media-Bereich Automatisierungsworkflow mit 19 Nodes. Hauptsächlich werden Gmail, Github, EditImage, FormTrigger, HttpRequest und andere Nodes verwendet. Immergrüne Inhalte durch dynamische GitHub-Bilder und URL-Umleitung erstellen

Voraussetzungen
  • Google-Konto + Gmail API-Anmeldedaten
  • GitHub Personal Access Token
  • Möglicherweise sind Ziel-API-Anmeldedaten erforderlich
Workflow-Vorschau
Visualisierung der Node-Verbindungen, mit Zoom und Pan
Workflow exportieren
Kopieren Sie die folgende JSON-Konfiguration und importieren Sie sie in n8n
{
  "id": "FVsgc9AjW27LUTIf",
  "meta": {
    "instanceId": "fb924c73af8f703905bc09c9ee8076f48c17b596ed05b18c0ff86915ef8a7c4a",
    "templateCredsSetupCompleted": true
  },
  "name": "Create auto-updating images and redirect URL for your content",
  "tags": [],
  "nodes": [
    {
      "id": "d74bab24-d81c-4d18-8539-4aa0d71cb22a",
      "name": "Bei Klick auf 'Workflow ausführen'",
      "type": "n8n-nodes-base.manualTrigger",
      "position": [
        1680,
        140
      ],
      "parameters": {},
      "typeVersion": 1
    },
    {
      "id": "10c33346-1562-4dff-afdd-abeaa146ea20",
      "name": "Neue URL-Weiterleitung erstellen",
      "type": "n8n-nodes-base.httpRequest",
      "position": [
        0,
        -180
      ],
      "parameters": {
        "url": "https://api.shorten.rest/aliases",
        "method": "POST",
        "options": {},
        "jsonBody": "={\n  \"destinations\":[{\"url\":\"https://en.wikipedia.org/wiki/{{ $now.format('DDD').split(',')[0].replaceAll(' ','_') }}\"}]\n}",
        "sendBody": true,
        "sendQuery": true,
        "specifyBody": "json",
        "authentication": "genericCredentialType",
        "genericAuthType": "httpHeaderAuth",
        "queryParameters": {
          "parameters": [
            {
              "name": "domainName",
              "value": "short.fyi"
            },
            {
              "name": "aliasName",
              "value": "today-in-history"
            }
          ]
        }
      },
      "credentials": {
        "httpHeaderAuth": {
          "id": "8641qBq1Wqw8iY1T",
          "name": "Header Auth account 4"
        }
      },
      "typeVersion": 4.2
    },
    {
      "id": "ebf4281e-fc0b-4309-bfed-0aa417fdf638",
      "name": "URL-Weiterleitung aktualisieren",
      "type": "n8n-nodes-base.httpRequest",
      "position": [
        220,
        160
      ],
      "parameters": {
        "url": "https://api.shorten.rest/aliases",
        "method": "PUT",
        "options": {
          "response": {
            "response": {
              "neverError": true
            }
          }
        },
        "jsonBody": "={\n  \"destinations\":[{\"url\":\"https://en.wikipedia.org/wiki/{{ $now.format('DDD').split(',')[0].replaceAll(' ','_') }}\"}]\n}",
        "sendBody": true,
        "sendQuery": true,
        "specifyBody": "json",
        "authentication": "genericCredentialType",
        "genericAuthType": "httpHeaderAuth",
        "queryParameters": {
          "parameters": [
            {
              "name": "domainName",
              "value": "short.fyi"
            },
            {
              "name": "aliasName",
              "value": "today-in-history"
            }
          ]
        }
      },
      "credentials": {
        "httpHeaderAuth": {
          "id": "8641qBq1Wqw8iY1T",
          "name": "Header Auth account 4"
        }
      },
      "typeVersion": 4.2
    },
    {
      "id": "847b893b-fc79-40b8-8eee-5844be6e9dd6",
      "name": "Zeitplan-Trigger",
      "type": "n8n-nodes-base.scheduleTrigger",
      "position": [
        -20,
        160
      ],
      "parameters": {
        "rule": {
          "interval": [
            {
              "triggerAtMinute": 8
            }
          ]
        }
      },
      "typeVersion": 1.2
    },
    {
      "id": "bb20131d-cb3e-4a78-aa54-e931dbe183d0",
      "name": "Zeitplan-Trigger1",
      "type": "n8n-nodes-base.scheduleTrigger",
      "position": [
        -20,
        320
      ],
      "parameters": {
        "rule": {
          "interval": [
            {
              "field": "hours",
              "triggerAtMinute": 1
            }
          ]
        }
      },
      "typeVersion": 1.2
    },
    {
      "id": "e8944262-fe50-4a22-84f6-09ce10576073",
      "name": "Haftnotiz",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        700,
        -180
      ],
      "parameters": {
        "width": 480,
        "height": 520,
        "content": "## 1. Inside workflow stickers\nContent of both an image and URL are dynamic. Try this out:\n- https://short.fyi/today-in-history\n- https://github.com/ed-parsadanyan/public-tests/blob/main/n8n-examples/dynamic-images/dynamic_img.png\n\n[![](https://raw.githubusercontent.com/ed-parsadanyan/public-tests/main/n8n-examples/dynamic-images/dynamic_img.png)](https://short.fyi/today-in-history)"
      },
      "typeVersion": 1
    },
    {
      "id": "1c2c841d-4a28-4b5d-bb95-ccc3fdd9530c",
      "name": "Haftnotiz1",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -80,
        -320
      ],
      "parameters": {
        "width": 700,
        "height": 360,
        "content": "## Run these nodes only once\n1. to create initial URL alias\n2. to create an initial GitHub file\n3. to get downloadable image URL"
      },
      "typeVersion": 1
    },
    {
      "id": "6d21ad0c-1f3f-48c8-8e12-b15b45f4dfd8",
      "name": "Haftnotiz2",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -80,
        60
      ],
      "parameters": {
        "color": 5,
        "width": 700,
        "height": 440,
        "content": "## These triggers periodically update image and URL\n- By default, URLs are updated daily and point to the today's Wiki article\n- Image is updated on the hourly basis"
      },
      "typeVersion": 1
    },
    {
      "id": "fe74d1cb-9274-4c51-891e-f5ec3564d1e5",
      "name": "Bild erstellen",
      "type": "n8n-nodes-base.editImage",
      "position": [
        220,
        320
      ],
      "parameters": {
        "options": {
          "fileName": "dynamic_img"
        },
        "operation": "multiStep",
        "operations": {
          "operations": [
            {
              "width": 640,
              "height": 480,
              "operation": "create"
            },
            {
              "color": "#00a2bb00",
              "operation": "draw",
              "endPositionX": "={{ $parameter.operations.operations[0].width }}",
              "endPositionY": "={{ $parameter.operations.operations[0].height }}",
              "startPositionX": 0,
              "startPositionY": 0
            },
            {
              "color": "#efefef00",
              "operation": "draw",
              "endPositionX": "={{ $parameter.operations.operations[0].width-5 }}",
              "endPositionY": "={{ $parameter.operations.operations[0].height-5 }}",
              "startPositionX": 5,
              "startPositionY": 5
            },
            {
              "font": "/usr/share/fonts/truetype/msttcorefonts/Courier_New.ttf",
              "text": "TODAY",
              "fontSize": 72,
              "operation": "text",
              "positionX": 213,
              "positionY": 120
            },
            {
              "font": "/usr/share/fonts/truetype/msttcorefonts/Courier_New_Bold.ttf",
              "text": "={{ $now.setLocale('en').toLocaleString(DateTime.DATE_MED) }}",
              "fontSize": 72,
              "operation": "text",
              "positionX": "={{ ($parameter.operations.operations[0].width - ($parameter.operations.operations[0].width * $now.setLocale('en').toLocaleString(DateTime.DATE_MED).length / 15))/2 }}",
              "positionY": 250
            },
            {
              "font": "/usr/share/fonts/truetype/msttcorefonts/Courier_New_Bold.ttf",
              "text": "={{ $now.toFormat('HH:mm') }}",
              "fontSize": 72,
              "operation": "text",
              "positionX": "={{ ($parameter.operations.operations[0].width - ($parameter.operations.operations[0].width * $now.toFormat('HH:mm').length / 15))/2 }}",
              "positionY": 350
            }
          ]
        }
      },
      "typeVersion": 1
    },
    {
      "id": "169d25a7-c3b8-4fb6-abc4-2ced669e90cf",
      "name": "GitHub-Datei aktualisieren",
      "type": "n8n-nodes-base.github",
      "position": [
        440,
        320
      ],
      "webhookId": "e8a64032-b2cb-4e8a-addf-84dd90a6565d",
      "parameters": {
        "owner": {
          "__rl": true,
          "mode": "name",
          "value": "ed-parsadanyan"
        },
        "filePath": "=n8n-examples/dynamic-images/{{ $binary.data.fileName }}.{{ $binary.data.fileExtension }}",
        "resource": "file",
        "operation": "edit",
        "binaryData": true,
        "repository": {
          "__rl": true,
          "mode": "list",
          "value": "public-tests",
          "cachedResultUrl": "https://github.com/ed-parsadanyan/public-tests",
          "cachedResultName": "public-tests"
        },
        "commitMessage": "=dynamic_img_update",
        "authentication": "oAuth2"
      },
      "credentials": {
        "githubOAuth2Api": {
          "id": "3",
          "name": "n8n-auth-edp"
        }
      },
      "typeVersion": 1.1
    },
    {
      "id": "b0a89ef7-862a-4648-9f9b-b941b117f25a",
      "name": "Haftnotiz3",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        1220,
        -180
      ],
      "parameters": {
        "width": 380,
        "height": 520,
        "content": "## 2. In the n8n forms\nTest this form and note the dynamic clickable image. Configure this via\n- custom HTML element\n- additional CSS styling for correct image size:\n\n```\ndiv.html img {\n\tmax-width: 100%;\n\theight: auto;\n\tdisplay: block;\n\tmargin-bottom: 8px;\n}\n```"
      },
      "typeVersion": 1
    },
    {
      "id": "eb75a8d6-1e2f-442a-8ac3-14406bf7edc9",
      "name": "Formular mit dynamischem Bild",
      "type": "n8n-nodes-base.formTrigger",
      "position": [
        1360,
        140
      ],
      "webhookId": "bd9ef188-7983-4474-b82b-c00c08054426",
      "parameters": {
        "options": {
          "customCss": ":root {\n\t--font-family: 'Open Sans', sans-serif;\n\t--font-weight-normal: 400;\n\t--font-weight-bold: 600;\n\t--font-size-body: 12px;\n\t--font-size-label: 14px;\n\t--font-size-test-notice: 12px;\n\t--font-size-input: 14px;\n\t--font-size-header: 20px;\n\t--font-size-paragraph: 14px;\n\t--font-size-link: 12px;\n\t--font-size-error: 12px;\n\t--font-size-html-h1: 28px;\n\t--font-size-html-h2: 20px;\n\t--font-size-html-h3: 16px;\n\t--font-size-html-h4: 14px;\n\t--font-size-html-h5: 12px;\n\t--font-size-html-h6: 10px;\n\t--font-size-subheader: 14px;\n\n\t/* Colors */\n\t--color-background: #fbfcfe;\n\t--color-test-notice-text: #e6a23d;\n\t--color-test-notice-bg: #fefaf6;\n\t--color-test-notice-border: #f6dcb7;\n\t--color-card-bg: #ffffff;\n\t--color-card-border: #dbdfe7;\n\t--color-card-shadow: rgba(99, 77, 255, 0.06);\n\t--color-link: #7e8186;\n\t--color-header: #525356;\n\t--color-label: #555555;\n\t--color-input-border: #dbdfe7;\n\t--color-input-text: #71747A;\n\t--color-focus-border: rgb(90, 76, 194);\n\t--color-submit-btn-bg: #ff6d5a;\n\t--color-submit-btn-text: #ffffff;\n\t--color-error: #ea1f30;\n\t--color-required: #ff6d5a;\n\t--color-clear-button-bg: #7e8186;\n\t--color-html-text: #555;\n\t--color-html-link: #ff6d5a;\n\t--color-header-subtext: #7e8186;\n\n\t/* Border Radii */\n\t--border-radius-card: 8px;\n\t--border-radius-input: 6px;\n\t--border-radius-clear-btn: 50%;\n\t--card-border-radius: 8px;\n\n\t/* Spacing */\n\t--padding-container-top: 24px;\n\t--padding-card: 24px;\n\t--padding-test-notice-vertical: 12px;\n\t--padding-test-notice-horizontal: 24px;\n\t--margin-bottom-card: 16px;\n\t--padding-form-input: 12px;\n\t--card-padding: 24px;\n\t--card-margin-bottom: 16px;\n\n\t/* Dimensions */\n\t--container-width: 448px;\n\t--submit-btn-height: 48px;\n\t--checkbox-size: 18px;\n\n\t/* Others */\n\t--box-shadow-card: 0px 4px 16px 0px var(--color-card-shadow);\n\t--opacity-placeholder: 0.5;\n}\n\ndiv.html img {\n\tmax-width: 100%;\n\theight: auto;\n\tdisplay: block;\n\tmargin-bottom: 8px;\n}",
          "appendAttribution": false
        },
        "formTitle": "Test Form",
        "formFields": {
          "values": [
            {
              "html": "<!-- Your custom HTML here --->\n<h2>Note: image is clickable!</h2>\n<a href=\"https://short.fyi/today-in-history\" target=\"_blank\">\n  <img src=\"https://raw.githubusercontent.com/ed-parsadanyan/public-tests/main/n8n-examples/dynamic-images/dynamic_img.png\" alt=\"\">\n</a>",
              "fieldType": "html",
              "elementName": "test"
            }
          ]
        },
        "formDescription": "This form contains a dynamic image"
      },
      "typeVersion": 2.2
    },
    {
      "id": "ada5f98f-3b52-449b-b573-ef24bbdc4554",
      "name": "Datei abrufen",
      "type": "n8n-nodes-base.github",
      "position": [
        1840,
        140
      ],
      "webhookId": "e8a64032-b2cb-4e8a-addf-84dd90a6565d",
      "parameters": {
        "owner": {
          "__rl": true,
          "mode": "name",
          "value": "ed-parsadanyan"
        },
        "filePath": "=n8n-examples/dynamic-images/dynamic_img.png",
        "resource": "file",
        "operation": "get",
        "repository": {
          "__rl": true,
          "mode": "list",
          "value": "public-tests",
          "cachedResultUrl": "https://github.com/ed-parsadanyan/public-tests",
          "cachedResultName": "public-tests"
        },
        "authentication": "oAuth2",
        "asBinaryProperty": false,
        "additionalParameters": {}
      },
      "credentials": {
        "githubOAuth2Api": {
          "id": "3",
          "name": "n8n-auth-edp"
        }
      },
      "typeVersion": 1.1
    },
    {
      "id": "0fd7ecea-7e0e-4318-8dbc-91d2e20778a6",
      "name": "Nachricht senden",
      "type": "n8n-nodes-base.gmail",
      "position": [
        2000,
        140
      ],
      "webhookId": "e0ded4d7-d2c8-43e4-9833-b346df3d75e8",
      "parameters": {
        "sendTo": "teds.tech.talks@gmail.com",
        "message": "=<h2>Dynamic image</h2>\n<a href=\"https://short.fyi/today-in-history\" target=\"_blank\">\n  <img src=\"{{ $json.download_url }}\" />\n</a>",
        "options": {},
        "subject": "Test Image"
      },
      "credentials": {
        "gmailOAuth2": {
          "id": "UllrXlZsDnkdA3tT",
          "name": "Gmail account"
        }
      },
      "typeVersion": 2.1
    },
    {
      "id": "8058d4d0-a60f-4390-a335-5b5e494ec45b",
      "name": "Haftnotiz4",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        1640,
        -180
      ],
      "parameters": {
        "width": 500,
        "height": 520,
        "content": "## 3. Via E-mail\nPrepare an HTML message and include the link to the image.\nYou can also place a custom clickable image as an e-mail footer\n\nHere's an example:\n\n<h2>Dynamic image</h2>\n<a href=\"https://short.fyi/today-in-history\" target=\"_blank\">\n  <img src=\"{{ $json.download_url }}\" />\n</a>"
      },
      "typeVersion": 1
    },
    {
      "id": "bb16c18e-17d8-4f07-8000-7e21acf0ac8e",
      "name": "Datei erstellen",
      "type": "n8n-nodes-base.github",
      "position": [
        220,
        -180
      ],
      "webhookId": "e8a64032-b2cb-4e8a-addf-84dd90a6565d",
      "parameters": {
        "owner": {
          "__rl": true,
          "mode": "name",
          "value": "ed-parsadanyan"
        },
        "filePath": "=n8n-examples/dynamic-images/dynamic_img.png",
        "resource": "file",
        "repository": {
          "__rl": true,
          "mode": "list",
          "value": "public-tests",
          "cachedResultUrl": "https://github.com/ed-parsadanyan/public-tests",
          "cachedResultName": "public-tests"
        },
        "fileContent": "some content",
        "commitMessage": "initial creation",
        "authentication": "oAuth2"
      },
      "credentials": {
        "githubOAuth2Api": {
          "id": "3",
          "name": "n8n-auth-edp"
        }
      },
      "typeVersion": 1.1
    },
    {
      "id": "e2a06369-6136-474b-a6f8-133f193aca83",
      "name": "Download-URL abrufen",
      "type": "n8n-nodes-base.github",
      "position": [
        440,
        -180
      ],
      "webhookId": "e8a64032-b2cb-4e8a-addf-84dd90a6565d",
      "parameters": {
        "owner": {
          "__rl": true,
          "mode": "name",
          "value": "ed-parsadanyan"
        },
        "filePath": "=n8n-examples/dynamic-images/dynamic_img.png",
        "resource": "file",
        "operation": "get",
        "repository": {
          "__rl": true,
          "mode": "list",
          "value": "public-tests",
          "cachedResultUrl": "https://github.com/ed-parsadanyan/public-tests",
          "cachedResultName": "public-tests"
        },
        "authentication": "oAuth2",
        "asBinaryProperty": false,
        "additionalParameters": {}
      },
      "credentials": {
        "githubOAuth2Api": {
          "id": "3",
          "name": "n8n-auth-edp"
        }
      },
      "typeVersion": 1.1
    },
    {
      "id": "99117594-4f37-4d9a-b344-35264547ebe8",
      "name": "Haftnotiz5",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        680,
        -320
      ],
      "parameters": {
        "color": 4,
        "width": 1480,
        "height": 680,
        "content": "# Use-cases\n## Here are three ideas for using dynamic image and URL in your promo materials"
      },
      "typeVersion": 1
    },
    {
      "id": "8b3b3e7a-3c99-41b8-bcd5-3a8389a786ef",
      "name": "Haftnotiz6",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -80,
        -780
      ],
      "parameters": {
        "color": 3,
        "width": 700,
        "height": 440,
        "content": "# What is this?\nWhen you publish workflow templates, create registration forms or send e-mails, these digital asses start living on their own. Users may find them long after creation.\n\nYou can keep contact with future audience by including dynamic images or links. Image path stays the same, but you can update the content. Similarly, a weblink can stay the same but have different redirect targets.\n\nThis way you can deliver your latest offers or messages even years after the digital assets were created. There's no need to update the whole content library - just keep the dynamic images and links fresh.\n\n## Requirements:\n- A [shorten.rest account ](https://shorten.rest/) for creating URL with dynamic redirect target URLs.\n- A [GitHub account](https://github.com/) to store the dynamic images\n\n*Both services work for free, but you can swap them with your own URL shortening / redirecting service or an S3 bucket for storing an image*"
      },
      "typeVersion": 1
    }
  ],
  "active": true,
  "pinData": {},
  "settings": {
    "callerPolicy": "workflowsFromSameOwner",
    "executionOrder": "v1",
    "saveDataSuccessExecution": "all"
  },
  "versionId": "7747c3d6-0dc7-40af-b206-3804ed71b4b3",
  "connections": {
    "ada5f98f-3b52-449b-b573-ef24bbdc4554": {
      "main": [
        [
          {
            "node": "0fd7ecea-7e0e-4318-8dbc-91d2e20778a6",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "fe74d1cb-9274-4c51-891e-f5ec3564d1e5": {
      "main": [
        [
          {
            "node": "169d25a7-c3b8-4fb6-abc4-2ced669e90cf",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "847b893b-fc79-40b8-8eee-5844be6e9dd6": {
      "main": [
        [
          {
            "node": "ebf4281e-fc0b-4309-bfed-0aa417fdf638",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "bb20131d-cb3e-4a78-aa54-e931dbe183d0": {
      "main": [
        [
          {
            "node": "fe74d1cb-9274-4c51-891e-f5ec3564d1e5",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "d74bab24-d81c-4d18-8539-4aa0d71cb22a": {
      "main": [
        [
          {
            "node": "ada5f98f-3b52-449b-b573-ef24bbdc4554",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  }
}
Häufig gestellte Fragen

Wie verwende ich diesen Workflow?

Kopieren Sie den obigen JSON-Code, erstellen Sie einen neuen Workflow in Ihrer n8n-Instanz und wählen Sie "Aus JSON importieren". Fügen Sie die Konfiguration ein und passen Sie die Anmeldedaten nach Bedarf an.

Für welche Szenarien ist dieser Workflow geeignet?

Experte - Soziale Medien

Ist es kostenpflichtig?

Dieser Workflow ist völlig kostenlos. Beachten Sie jedoch, dass Drittanbieterdienste (wie OpenAI API), die im Workflow verwendet werden, möglicherweise kostenpflichtig sind.

Workflow-Informationen
Schwierigkeitsgrad
Experte
Anzahl der Nodes19
Kategorie1
Node-Typen8
Schwierigkeitsbeschreibung

Für fortgeschrittene Benutzer, komplexe Workflows mit 16+ Nodes

Externe Links
Auf n8n.io ansehen

Diesen Workflow teilen

Kategorien

Kategorien: 34