Att göra ”snabba” sociala visuella inlägg är sällan snabbt. Du hittar en bild, skriver en bildtext, klistrar in den i ett designverktyg, justerar textplaceringen, exporterar – och inser sedan att copyt inte ligger i linje med varumärket och gör om allt.
Det är här Gemini-bildtexter hjälper marknadschefer att hålla produktionen konsekvent, samtidigt som content creators och små team slipper förlora hela eftermiddagar på små justeringar. Resultatet är enkelt: bildtexter på bilder som ser genomtänkta ut, utan pilligt layoutarbete.
Det här arbetsflödet hämtar en bild, låter Google Gemini generera strukturerad bildtext, och placerar den sedan snyggt på det visuella materialet. Du får se hur automatiseringen fungerar, vad du behöver och vad du kan justera för ditt varumärke.
Så fungerar automatiseringen
Se hur detta löser problemet:
n8n Workflow Template: Google Gemini + Drive: visuellt material med text
flowchart LR
subgraph sg0["When clicking ‘Test workflow’ Flow"]
direction LR
n0@{ icon: "mdi:play-circle", form: "rounded", label: "When clicking ‘Test workflow’", pos: "b", h: 48 }
n1@{ icon: "mdi:brain", form: "rounded", label: "Google Gemini Chat Model", pos: "b", h: 48 }
n2@{ icon: "mdi:robot", form: "rounded", label: "Structured Output Parser", pos: "b", h: 48 }
n3@{ icon: "mdi:cog", form: "rounded", label: "Get Info", pos: "b", h: 48 }
n4@{ icon: "mdi:cog", form: "rounded", label: "Resize For AI", pos: "b", h: 48 }
n5["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/code.svg' width='40' height='40' /></div><br/>Calculate Positioning"]
n6@{ icon: "mdi:cog", form: "rounded", label: "Apply Caption to Image", pos: "b", h: 48 }
n7["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/merge.svg' width='40' height='40' /></div><br/>Merge Image & Caption"]
n8["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/merge.svg' width='40' height='40' /></div><br/>Merge Caption & Positions"]
n9["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>Get Image"]
n10@{ icon: "mdi:robot", form: "rounded", label: "Image Captioning Agent", pos: "b", h: 48 }
n3 --> n7
n9 --> n4
n9 --> n3
n4 --> n10
n5 --> n8
n7 --> n5
n7 --> n8
n10 --> n7
n1 -.-> n10
n2 -.-> n10
n8 --> n6
n0 --> n9
end
%% Styling
classDef trigger fill:#e8f5e9,stroke:#388e3c,stroke-width:2px
classDef ai fill:#e3f2fd,stroke:#1976d2,stroke-width:2px
classDef aiModel fill:#e8eaf6,stroke:#3f51b5,stroke-width:2px
classDef decision fill:#fff8e1,stroke:#f9a825,stroke-width:2px
classDef database fill:#fce4ec,stroke:#c2185b,stroke-width:2px
classDef api fill:#fff3e0,stroke:#e65100,stroke-width:2px
classDef code fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
classDef disabled stroke-dasharray: 5 5,opacity: 0.5
class n0 trigger
class n2,n10 ai
class n1 aiModel
class n9 api
class n5 code
classDef customIcon fill:none,stroke:none
class n5,n7,n8,n9 customIcon
Utmaningen: bildtexter utan omtag i designen
Att lägga bildtexter på visuellt material låter enkelt tills du gör det i skala. En bild behöver en slagkraftig rubrik och en kort stödlinje, en annan behöver en lite annan ton – och plötsligt fastnar du i en loop av ”skriv, klistra in, ändra storlek, flytta text, exportera, upprepa”. Det handlar inte bara om tiden. Det är den mentala växlingen mellan copywriting och layout, plus frustrationen när texten täcker motivet eller kapas i olika format. Och om tre personer rör samma material försvinner konsekvensen direkt.
Inget av detta var för sig är problemet. Tillsammans är de det.
- Du skriver om bildtexter eftersom första versionen inte matchar er tonalitet eller ert erbjudande.
- Textplacering blir gissningsarbete, så du flyttar rutor tills det ”ser rätt ut”.
- Team exporterar flera versioner eftersom ingen litar på första utkastet, vilket skapar röra och fördröjer godkännanden.
- Manuella steg bjuder in små fel som fel skiljetecken, inkonsekvent versalisering eller oläsbar kontrast på stökiga bilder.
Lösningen: generera bildtexter automatiskt och lägg dem som överlägg på bilden
Det här n8n-arbetsflödet gör en bild till en färdig bild med bildtext med hjälp av Google Gemini 1.5 Pro, en multimodal modell som kan ”se” vad som finns i bilden. Arbetsflödet börjar med att hämta en bild (i demon hämtas en offentlig stockbild via en HTTP-förfrågan), och ändrar sedan storleken så att AI-bearbetningen är snabb och håller sig inom gränserna. Gemini får bilden som binär input och returnerar ett strukturerat resultat: en rubrik för bildtexten och en bildtext baserad på vad bilden innehåller. Därefter räknar arbetsflödet ut var texten ska placeras, baserat på mängden genererad text, och lägger bildtexten som överlägg på originalbilden så att du får en felfri slutfil.
Flödet är rakt på sak. En bild kommer in, Gemini genererar bildtext, och n8n sammanfogar texten med layoutdetaljer. Till sist placerar ett bildredigeringssteg texten ovanpå, så att du kan exportera eller skicka vidare till nästa steg (Drive, godkännanden, schemaläggning och så vidare).
Vad som förändras: före vs. efter
| Detta tar bort | Effekten du märker |
|---|---|
|
|
Effekt i verkligheten
Säg att ditt team skapar 10 bilder med bildtext i veckan för kampanjer och inlägg. Manuellt tar det ofta runt 10 minuter per bild att skriva text, och ytterligare 5 minuter att placera text och exportera – alltså cirka 2,5 timmar per vecka. Med det här arbetsflödet anger du bildkällan, låter Gemini generera bildtexten och låter n8n lägga över texten i bakgrunden. Din ”hands-on”-tid blir närmare 10 minuter totalt för uppsättning och granskning, inte timmar av repetitiv layout.
Krav
- n8n-instans (prova n8n Cloud gratis)
- Alternativ för egen hosting om du föredrar det (Hostinger fungerar bra)
- Google Gemini (Gemini 1.5 Pro) för multimodal bildtextgenerering.
- Google Drive för att lagra eller hämta dina bilder.
- Google Gemini API-nyckel (hämta den från Google AI Studio / Google Cloud-konsolen).
Kunskapsnivå: Nybörjare. Du kopplar in behörigheter, justerar prompten och testar med några bilder.
Behöver du hjälp att implementera detta? Prata med en automationsexpert (gratis 15-minuters konsultation).
Så går arbetsflödet till
En bild kommer in i arbetsflödet. I demoversionen startar n8n manuellt och hämtar en offentlig bild via en HTTP Request. I en skarp uppsättning kan det lika gärna vara en fil från Google Drive eller en webhook-payload från ett formulär eller ett innehållssystem.
Bilden förbereds för AI. Ett Edit Image-steg ändrar bildens storlek för att hålla bearbetningen stabil och snabb. Ett annat bildsteg hämtar detaljer som hjälper senare placeringsbeslut (t.ex. bredd och höjd).
Gemini genererar strukturerad bildtext. Agenten för bildtextgenerering skickar bilden till Gemini 1.5 Pro och ber den att returnera en rubrik plus stödtext. En parser för strukturerad output håller svaret korrekt formaterat så att du slipper plocka ut text ur röriga stycken.
Textplaceringen räknas ut och appliceras. Ett litet kodsteg beräknar positionering utifrån teckenlängd, sedan sammanfogar n8n dessa layoutinställningar med bildtexten. Det sista Edit Image-överläggssteg placerar bildtexten på bilden och skapar en färdig asset.
Du kan enkelt ändra bildtextprompten så att den matchar er tonalitet och justera överläggsstilen (teckenstorlek, marginaler, placering) så att den passar olika mallar. Se hela implementationsguiden nedan för anpassningsalternativ.
Steg-för-steg-guide för implementation
Steg 1: konfigurera den manuella triggern
Starta arbetsflödet med en manuell trigger så att ni kan testa flödet för bildtextning vid behov.
- Lägg till och öppna Manual Execution Start.
- Lämna standardinställningarna som de är för att tillåta manuella körningar.
- Bekräfta kopplingen från Manual Execution Start till Fetch Source Image.
Steg 2: anslut bildkällan
Hämta basbilden som ska få en bildtext och bearbetas.
- Öppna Fetch Source Image och ställ in URL till
https://images.pexels.com/photos/1267338/pexels-photo-1267338.jpeg?auto=compress&cs=tinysrgb&w=600. - Bekräfta att Fetch Source Image skickar utdata till både Scale Image for AI och Extract Image Details parallellt.
Steg 3: konfigurera generering av bildtext med AI
Skala om bilden för modellen och generera sedan en strukturerad bildtext med Gemini och en parser för strukturerad utdata.
- Öppna Scale Image for AI och ställ in Operation till
resize, Width till512och Height till512. - Öppna Caption Generation Agent och ställ in Text till
Generate a caption for this image.. - I Caption Generation Agent, säkerställ att Prompt Type är
defineoch att Has Output Parser är aktiverat. - Verifiera att Gemini Chat Engine är ansluten som språkmodell för Caption Generation Agent. Credential Required: anslut era googlePalmApi-inloggningsuppgifter.
- Öppna Structured Output Decoder och ställ in JSON Schema Example till
{ "caption_title": "", "caption_text": "" }. Den här utdataparsaren är kopplad till Caption Generation Agent – lägg till inloggningsuppgifter i Gemini Chat Engine, inte i parsaren.
Steg 4: kombinera bildmetadata och beräkna layout
Slå ihop AI-utdata med bildens dimensioner och beräkna sedan textplacering för overlayn.
- Öppna Extract Image Details och ställ in Operation till
information. - Öppna Combine Image and Caption och ställ in Mode till
combineoch Combine By tillcombineByPosition. - Bekräfta att Combine Image and Caption skickar utdata till både Compute Text Placement och Join Caption and Layout parallellt.
- Öppna Compute Text Placement, ställ in Mode till
runOnceForEachItemoch klistra in den angivna JavaScript-koden för att beräkna teckenstorlek, padding och positioner. - Öppna Join Caption and Layout och ställ in Mode till
combineoch Combine By tillcombineByPosition.
Steg 5: konfigurera utdata för bild-overlay
Rita en bildtextbanner och lägg text som overlay med hjälp av beräknade positioner och AI-genererad text.
- Öppna Overlay Caption on Image och ställ in Operation till
multiStep. - I den första ritoperationen, ställ in Start Position X till
{{ $json.caption.rectPosX }}, Start Position Y till{{ $json.caption.rectPosY }}, End Position X till{{ $json.size.width }}och End Position Y till{{ $json.size.height }}. - I textoperationen, ställ in Text till
"{{ $json.output.caption_title }}". {{ $json.output.caption_text }}, Font Size till{{ $json.caption.fontSize }}, Position X till{{ $json.caption.textPosX }}, Position Y till{{ $json.caption.textPosY }}och Line Length till{{ $json.caption.maxLineLength }}. - Uppdatera sökvägen för Font till er giltiga TTF-fil (för närvarande satt till
/usr/[CONFIGURE_YOUR_API_KEY].ttf).
Steg 6: testa och aktivera ert arbetsflöde
Kör arbetsflödet manuellt för att verifiera att bildtext-overlayn blir korrekt innan ni aktiverar det.
- Klicka på Execute Workflow och starta från Manual Execution Start.
- Bekräfta att Fetch Source Image körs och att både Scale Image for AI och Extract Image Details körs parallellt.
- Kontrollera att Caption Generation Agent skapar
caption_titleochcaption_textoch att detta slås ihop med bilddetaljer i Combine Image and Caption. - Verifiera att Overlay Caption on Image ger ut en slutlig bild med en bildtextbanner och text-overlay.
- När allt är bekräftat, växla arbetsflödet till Active för användning i produktion.
Saker att se upp med
- Google Gemini-behörigheter kan gå ut eller sakna rätt projektbehörigheter. Om anrop misslyckas, kontrollera API-nyckelns status i dina inställningar i Google Cloud / AI Studio och bekräfta att fakturering är aktiverad.
- Om du använder Wait-noder eller extern rendering varierar processtiderna. Öka väntetiden om efterföljande noder misslyckas på tomma svar.
- Standardprompter i AI-noder är generiska. Lägg in er tonalitet tidigt, annars kommer du att redigera outputs för alltid.
Vanliga frågor
Oftast cirka 30 minuter om din Gemini-nyckel är klar.
Ja. Du kopplar mest konton och justerar prompten. Den enda ”tekniska” delen är att testa med några bilder tills överläggsplaceringen matchar din stil.
Ja. n8n har ett gratis alternativ för egen hosting och en gratis provperiod på n8n Cloud. Cloud-planer startar på 20 USD/månad för högre volym. Du behöver också räkna med kostnader för Google Gemini API-användning, som beror på din anropsvolym och modell.
Två alternativ: n8n Cloud (hanterat, enklast att komma igång) eller egen hosting på en VPS. För egen hosting är Hostinger VPS prisvärd och hanterar n8n bra. Egen hosting ger dig obegränsade körningar, men kräver grundläggande serverhantering.
Du kan byta bildkälla genom att ersätta HTTP Request-steget med en Google Drive-trigger eller en Webhook-trigger, och sedan behålla resten som det är. Den bästa anpassningen gör du i prompten i Caption Generation Agent: lägg till era varumärkesregler, förbjudna fraser och några exempel på bildtexter. Om du vill ha ett annat uttryck justerar du inställningarna i Overlay Caption on Image och koden i Compute Text Placement så att långa bildtexter inte tränger ihop bilden.
Oftast beror det på en ogiltig eller utgången API-nyckel, eller att nyckeln är kopplad till ett projekt utan aktiverad fakturering. Uppdatera behörigheten i n8n och kör sedan en enskild testkörning med en bild. Om det fortfarande misslyckas, kontrollera rate limits eller åtkomstbegränsningar för modellen på ditt Google-konto.
Den begränsas i regel av din n8n-plan och din Gemini API-kvot. Om du kör egen hosting finns ingen körningsgräns från n8n, men dina serverresurser spelar fortfarande roll när du bearbetar stora bilder. I praktiken kör de flesta team batcher med dussintals bilder utan problem, och skalar sedan upp när prompter och överlägg är stabila.
Ofta ja, om du bryr dig om bildhantering och strukturerade AI-outputs. Det här arbetsflödet använder binär bilddata, bildstorleksändring, sammanfogning och lite egen logik för textplacering – och n8n är helt enkelt mer bekväm med den typen av ”riktigt arbetsflöde”. Zapier eller Make kan göra delar av det, men du kan stöta på begränsningar eller behöva betalda steg när du lägger till branching och formatering. Dessutom är egen hosting av n8n en stor grej om du kör många exekveringar och inte vill att varje körning ska kosta extra. Om ditt mål är en enkel ”generera bildtext och publicera den någonstans”, kan Zapier vara snabbare. Prata med en automationsexpert om du vill ha hjälp att välja.
När detta väl rullar slutar teamet behandla bilder med bildtext som ett hantverksprojekt. Du får konsekventa assets, snabbare granskningar och färre irriterande omexporter.
Kontakta oss
Hör av dig, så diskuterar vi hur just din verksamhet kan dra nytta av alla fantastiska möjligheter som AI skapar.