// Gotowe workflow

Skalowanie obrazków do WordPressa

▸ // rozdziały lekcji

Skalowanie obrazków do WordPressa - Wolniś: „Mniejsze. Szybsze. Wgrane”

Cały workflow na kanwie - sześć węzłów w jednej linii

Obrazek do wpisu to sześć kroków klikologii: pobierz plik, otwórz edytor, zmniejsz, zapisz jako WebP, wgraj do WordPressa, ustaw jako wyróżniający. Przy jednym wpisie to dwie minuty. Przy trzydziestu to godzina w oknie „Dodaj media" zamiast pisania.

Ten workflow przechodzi całą ścieżkę sam. Trzy dane na wejściu, gotowy obrazek przypięty do wpisu na wyjściu.

Druga połowa wartości to nazwa pliku. „Super Polski ŻÓŁW" zamienia się w „super-polski-zolw.webp" - bez spacji, ogonków i wielkich liter. Taki adres nie psuje się w linkach.

Co robi ten workflow

  1. When clicking ‘Execute workflow’ - ręczny wyzwalacz. Jedno kliknięcie, jeden obrazek.
  2. Ustawienia - węzeł Edit Fields z trzema polami: name (z niego powstaje nazwa pliku), url (skąd pobrać obrazek) i postId (do którego wpisu go przypiąć).
  3. Pobranie Obrazka - HTTP Request ściąga plik spod adresu z pola url. Na wyjściu masz obrazek jako dane binarne.
  4. Edycja Obrazka - węzeł Edit Image z operacją resize: 1024 na 1024 px, format WebP, nazwa pliku z wyrażenia.
  5. Upload Obrazka - HTTP Request typu POST na /wp-json/wp/v2/media. Wysyła plik do biblioteki mediów WordPressa.
  6. Przypisanie do postu - drugi POST, na /wp-json/wp/v2/posts/ z ID wpisu. Ustawia wgrany obrazek jako wyróżniający.

Czego potrzebujesz

  • WordPressa z działającym REST API, domyślnie pod adresem /wp-json/,
  • użytkownika WordPressa z prawem do wgrywania mediów i edycji wpisów, bo workflow robi jedno i drugie,
  • hasła aplikacji tego użytkownika (generujesz je w jego profilu w panelu WordPressa),
  • poświadczenia typu WordPress API w n8n z loginem i hasłem aplikacji. Hasło aplikacji i poświadczenie krok po kroku pokazuję w lekcji Credentials WordPress.

Jak uruchomić

  1. Zaimportuj plik z dołu lekcji (jak importować workflow).
  2. W pliku podmień twojadomena.pl na swoją domenę. Są trzy miejsca: adres obrazka w węźle Ustawienia, adres w Upload Obrazka i adres w Przypisaniu do postu.
  3. W Upload Obrazka i Przypisaniu do postu wybierz swoje poświadczenie WordPress API.
  4. W Ustawieniach wpisz swoją nazwę obrazka, adres pliku i ID wpisu. W pliku stoją przykładowe wartości: „Super Polski ŻÓŁW", adres logo i wpis 389.
  5. Kliknij Execute workflow i sprawdź wpis w panelu WordPressa.

Uczciwie: import tego pliku do n8n 2.40.6 sprawdziłem, ale samego wgrywania do WordPressa na tej wersji już nie. Pierwszy test zrób na wpisie roboczym.

Nazwa pliku z wyrażenia

W opcjach węzła Edycja Obrazka siedzi wyrażenie, które buduje nazwę z pola name:

{{ $('Ustawienia').item.json.name.toLowerCase()
  .replace(/[ąćęłńóśźż]/g, char => ({'ą':'a','ć':'c','ę':'e','ł':'l','ń':'n','ó':'o','ś':'s','ź':'z','ż':'z'})[char])
  .replace(/[ /.,]+/g, '-')
  .replace(/-+/g, '-')
  .replace(/^-|-$/g, '') }}.webp

W pliku to jedna linia, tu rozbiłem ją dla czytelności. Po kolei:

  • toLowerCase() zamienia wszystko na małe litery,
  • pierwszy replace podmienia polskie znaki według słownika: ą na a, ł na l i tak dalej,
  • drugi zamienia spacje, ukośniki, kropki i przecinki na myślniki,
  • trzeci skleja kilka myślników pod rząd w jeden,
  • czwarty obcina myślnik z początku i końca.

$('Ustawienia').item sięga do węzła Ustawienia, bo po drodze bieżący item zamienił się w plik binarny i pola name w nim już nie ma.

Węzeł Edycja Obrazka - szerokość 1024, wysokość 1024, format WebP i wyrażenie nazwy pliku w opcjach

Haczyk. Słownik zna tylko polskie znaki. Niemieckie „ü", francuskie „é" albo znak „&" przejdą do nazwy pliku bez zmian. Jeśli nazwy przychodzą z różnych źródeł, dopisz te znaki do słownika.

Dwa zapytania do WordPressa

Upload Obrazka wysyła plik z pola binarnego data i nagłówek Content-Disposition z tą samą nazwą pliku. Tym nagłówkiem mówisz WordPressowi, jak ma się nazywać plik w bibliotece mediów. WordPress w odpowiedzi oddaje dane nowego pliku, w tym jego id.

Przypisanie do postu bierze to id wyrażeniem {{ $json.id }} i wysyła je w parametrze featured_media na adres wpisu. ID wpisu dokleja z Ustawień.

Pro-tip. Wyrażenie z nazwą pliku stoi w workflow dwa razy: w Edycji Obrazka i w nagłówku Uploadu. Poprawisz jedno, zapomnisz o drugim, i plik w n8n dostanie inną nazwę niż w WordPressie. Wynieś nazwę do Ustawień jako czwarte pole, na przykład slug, i w obu miejscach odwołuj się już tylko do niego.

Haczyk. Upload Obrazka ma w ustawieniach węzła On Error ustawione na Continue. Jeśli wgrywanie padnie - złe hasło aplikacji, za duży plik, brak uprawnień - workflow nie zatrzyma się na czerwono. Pójdzie dalej, a Przypisanie do postu dostanie odpowiedź bez id i wyśle pusty featured_media. Przy pierwszych testach otwieraj wynik Uploadu, nie tylko ostatniego węzła. Jak działa On Error, pokazuję w lekcji o debugowaniu.

Kiedy tego nie używać

Wrzucasz jeden obrazek w tygodniu? Szybciej przeciągniesz plik do biblioteki mediów.

Wymiary są wpisane na sztywno: 1024 na 1024. Pasuje do okładek i miniatur, do szerokich banerów nagłówka już nie. Przy różnych typach grafik potrzebujesz osobnych wymiarów na każdy typ.

Ręczny wyzwalacz to jeden obrazek na kliknięcie. Wersja do nauki i pojedynczych poprawek. Do seryjnej roboty podmieniasz wyzwalacz i Ustawienia na źródło z listą wpisów, na przykład tabelę Data Table, a środek zostawiasz bez zmian.

Podsumowanie

Sześć węzłów zamienia adres obrazka w plik WebP z czystą nazwą, wgrany do WordPressa i przypięty do wpisu. Wiesz też, gdzie workflow potrafi przemilczeć błąd: w Upload Obrazka, który idzie dalej mimo porażki.

W następnej lekcji, Czytnik RSS, n8n co 12 godzin zbierze nowe wpisy z blogów do własnej tabeli, bez powtórek.

Pokaż JSON do skopiowania - skalowanie-obrazkow-wordpress.json
{
  "name": "Resize image www",
  "nodes": [
    {
      "parameters": {},
      "type": "n8n-nodes-base.manualTrigger",
      "typeVersion": 1,
      "position": [
        144,
        -240
      ],
      "id": "02acbd8f-76f1-4748-9e6a-eb0870083c74",
      "name": "When clicking ‘Execute workflow’"
    },
    {
      "parameters": {
        "assignments": {
          "assignments": [
            {
              "id": "a9a50236-5c6b-4ff6-8de3-51d0ad96aaa8",
              "name": "name",
              "value": "Super Polski ŻÓŁW",
              "type": "string"
            },
            {
              "id": "84984e21-3631-4368-baee-f3d129f04a86",
              "name": "url",
              "value": "https://twojadomena.pl/wp-content/uploads/2025/06/logo-biale-x100.png",
              "type": "string"
            },
            {
              "id": "a1db20ed-3cb0-4e40-98dd-53c1be9e7f78",
              "name": "postId",
              "value": "389",
              "type": "string"
            }
          ]
        },
        "options": {}
      },
      "type": "n8n-nodes-base.set",
      "typeVersion": 3.4,
      "position": [
        368,
        -240
      ],
      "id": "531cceb3-bea6-4247-a78e-d010972cd00a",
      "name": "Ustawienia"
    },
    {
      "parameters": {
        "url": "={{ $json.url }}",
        "options": {}
      },
      "type": "n8n-nodes-base.httpRequest",
      "typeVersion": 4.2,
      "position": [
        592,
        -240
      ],
      "id": "6c5feec6-59bf-4fce-bf10-e9174cdde248",
      "name": "Pobranie Obrazka"
    },
    {
      "parameters": {
        "operation": "resize",
        "width": 1024,
        "height": 1024,
        "options": {
          "fileName": "={{ $('Ustawienia').item.json.name.toLowerCase().replace(/[ąćęłńóśźż]/g, char => ({'ą':'a','ć':'c','ę':'e','ł':'l','ń':'n','ó':'o','ś':'s','ź':'z','ż':'z'})[char]).replace(/[ /.,]+/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '') }}.webp",
          "format": "webp"
        }
      },
      "type": "n8n-nodes-base.editImage",
      "typeVersion": 1,
      "position": [
        816,
        -240
      ],
      "id": "e766efe3-6243-4d96-8e0b-82971c51a7e8",
      "name": "Edycja Obrazka"
    },
    {
      "parameters": {
        "method": "POST",
        "url": "https://twojadomena.pl/wp-json/wp/v2/media",
        "authentication": "predefinedCredentialType",
        "nodeCredentialType": "wordpressApi",
        "sendHeaders": true,
        "headerParameters": {
          "parameters": [
            {
              "name": "Content-Disposition",
              "value": "=attachment; filename=\"{{ $('Ustawienia').item.json.name.toLowerCase().replace(/[ąćęłńóśźż]/g, char => ({'ą':'a','ć':'c','ę':'e','ł':'l','ń':'n','ó':'o','ś':'s','ź':'z','ż':'z'})[char]).replace(/[ /.,]+/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '') }}.webp\""
            }
          ]
        },
        "sendBody": true,
        "contentType": "binaryData",
        "inputDataFieldName": "data",
        "options": {}
      },
      "id": "eae902bc-4a7e-46d7-b38f-e900ddbaa50e",
      "name": "Upload Obrazka",
      "type": "n8n-nodes-base.httpRequest",
      "position": [
        1040,
        -240
      ],
      "typeVersion": 4.2,
      "onError": "continueRegularOutput"
    },
    {
      "parameters": {
        "method": "POST",
        "url": "=https://twojadomena.pl/wp-json/wp/v2/posts/{{ $('Ustawienia').item.json.postId }}",
        "authentication": "predefinedCredentialType",
        "nodeCredentialType": "wordpressApi",
        "sendQuery": true,
        "queryParameters": {
          "parameters": [
            {
              "name": "featured_media",
              "value": "={{ $json.id }}"
            }
          ]
        },
        "options": {}
      },
      "id": "7073641a-b8ff-4d3d-ae5b-5a97167de1b6",
      "name": "Przypisanie do postu",
      "type": "n8n-nodes-base.httpRequest",
      "position": [
        1264,
        -240
      ],
      "typeVersion": 4.2
    }
  ],
  "connections": {
    "When clicking ‘Execute workflow’": {
      "main": [
        [
          {
            "node": "Ustawienia",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Ustawienia": {
      "main": [
        [
          {
            "node": "Pobranie Obrazka",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Pobranie Obrazka": {
      "main": [
        [
          {
            "node": "Edycja Obrazka",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Edycja Obrazka": {
      "main": [
        [
          {
            "node": "Upload Obrazka",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Upload Obrazka": {
      "main": [
        [
          {
            "node": "Przypisanie do postu",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  },
  "settings": {
    "executionOrder": "v1"
  },
  "pinData": {}
}