{ "id": "JPUBXcfvtCjXqbi4", "name": "\ud83c\udfac GIF Finder \u2014 Instant GIF Search Form", "tags": [], "nodes": [ { "id": "321eed50-dec2-4bca-ac4b-0e4b72359f54", "name": "Sticky Note 321eed50", "type": "n8n-nodes-base.stickyNote", "position": [ -144, -240 ], "parameters": { "color": 4, "width": 460, "height": 524, "content": "## \ud83c\udfac GIF Finder\n\nA tiny, fun web form that returns the best GIFs for any search term and shows them in a gallery \u2014 great for Slack reactions, presentations, or just a laugh.\n\n**How it works:** user submits a search term \u2192 GIPHY Search API returns the top results \u2192 they are rendered as a responsive gallery on the form completion page. Tap any GIF to copy its link.\n\n### \u2699\ufe0f Setup (2 minutes)\n1. Get a **free** API key at https://developers.giphy.com (create an app \u2192 API key).\n2. Open the **Search GIPHY** node \u2192 its **HTTP Query Auth** credential.\n3. Set **Name** = `api_key` and **Value** = your GIPHY key.\n\nNo other configuration required. Publish the workflow to make the form URL live." }, "typeVersion": 1 }, { "id": "8030d446-4295-4c47-a30f-e807e0c11609", "name": "Sticky Note 8030d446", "type": "n8n-nodes-base.stickyNote", "position": [ 400, -240 ], "parameters": { "color": 5, "width": 300, "height": 200, "content": "\ud83d\udcdd **On GIF Search**\n\nPublic form that collects the search term. Field `query` is required. Attribution is disabled for a clean look." }, "typeVersion": 1 }, { "id": "4ee92442-2027-4948-be76-e6897e82e986", "name": "Sticky Note 4ee92442", "type": "n8n-nodes-base.stickyNote", "position": [ 752, -240 ], "parameters": { "color": 3, "width": 300, "height": 200, "content": "\ud83d\udd0e **Search GIPHY**\n\nCalls the GIPHY Search API for the top 9 G-rated GIFs. Uses HTTP Query Auth (`api_key`). Retries 3\u00d7 on failure with a 15s timeout." }, "typeVersion": 1 }, { "id": "d679390c-e549-4e15-8b30-f0cae3496246", "name": "Sticky Note d679390c", "type": "n8n-nodes-base.stickyNote", "position": [ 1088, -240 ], "parameters": { "color": 6, "width": 300, "height": 200, "content": "\ud83e\udde9 **Build Gallery HTML**\n\nMaps the GIPHY response into a responsive image gallery. Each GIF is click-to-copy. Falls back to a friendly message when no GIFs are found." }, "typeVersion": 1 }, { "id": "2ee9aa3e-37aa-4750-861a-ccfb8a648aa0", "name": "Sticky Note 2ee9aa3e", "type": "n8n-nodes-base.stickyNote", "position": [ 1424, -240 ], "parameters": { "color": 7, "width": 300, "height": 200, "content": "\ud83d\uddbc\ufe0f **Show GIF Gallery**\n\nRenders the generated HTML on the form completion page. Tapping a GIF copies its link to the clipboard." }, "typeVersion": 1 }, { "id": "ba1bab9f-37e7-4fed-a57a-cd6b30c611e6", "name": "On GIF Search", "type": "n8n-nodes-base.formTrigger", "position": [ 448, 0 ], "parameters": { "options": { "path": "gif-finder", "buttonLabel": "Find GIFs \ud83d\udd0e", "appendAttribution": false }, "formTitle": "\ud83c\udfac GIF Finder", "formFields": { "values": [ { "fieldName": "query", "fieldLabel": "What GIF are you looking for?", "placeholder": "e.g. celebration, cats, mind blown", "requiredField": true } ] }, "formDescription": "Type anything and instantly get the best GIFs for it \u2014 powered by GIPHY." }, "typeVersion": 2.6 }, { "id": "c39b1be9-7ecd-41c4-a809-b2ecf7d85d74", "name": "Search GIPHY", "type": "n8n-nodes-base.httpRequest", "position": [ 800, 0 ], "parameters": { "url": "https://api.giphy.com/v1/gifs/search", "options": { "timeout": 15000 }, "sendQuery": true, "authentication": "genericCredentialType", "genericAuthType": "httpQueryAuth", "queryParameters": { "parameters": [ { "name": "q", "value": "={{ $json.query }}" }, { "name": "limit", "value": "9" }, { "name": "rating", "value": "g" } ] } }, "credentials": { "httpQueryAuth": { "name": "" } }, "retryOnFail": true, "typeVersion": 4.4 }, { "id": "5fa1cac1-5398-4196-9637-c6aca67a216e", "name": "Build Gallery HTML", "type": "n8n-nodes-base.code", "position": [ 1136, 0 ], "parameters": { "jsCode": "\nconst query = ($('On GIF Search').item.json.query || '').trim();\nconst resp = $('Search GIPHY').item.json || {};\nconst gifs = Array.isArray(resp.data) ? resp.data : [];\n\nlet cards = '';\nfor (const g of gifs) {\n const img = g && g.images && g.images.fixed_height && g.images.fixed_height.url;\n if (!img) continue;\n const alt = (g.title || 'GIF').replace(/\"/g, '"');\n cards += `
\"${alt}\"Click to copy
`;\n}\n\nif (!cards) {\n cards = '

No GIFs found \u2014 try another search \ud83d\ude48

';\n}\n\nconst html = `\n
\n

\ud83c\udfac Top GIFs for \"${query}\"

\n

Tap any GIF to copy its link \u2014 then paste it anywhere \ud83d\udc47

\n
${cards}
\n

Powered by GIPHY \u00b7 Refresh the form to search again \ud83d\udd04

\n
\n\n`;\n\nreturn [{ json: { html } }];\n" }, "typeVersion": 2 }, { "id": "18765bc9-ec1e-478b-83e3-9d3012b12b49", "name": "Show GIF Gallery", "type": "n8n-nodes-base.form", "position": [ 1472, 0 ], "parameters": { "operation": "completion", "respondWith": "showText", "responseText": "={{ $json.html }}" }, "typeVersion": 2.5 } ], "active": false, "settings": { "binaryMode": "separate", "executionOrder": "v1" }, "versionId": "c0e52304-a78e-44d3-b995-2a26dd5cc625", "nodeGroups": [], "connections": { "Search GIPHY": { "main": [ [ { "node": "Build Gallery HTML", "type": "main", "index": 0 } ] ] }, "On GIF Search": { "main": [ [ { "node": "Search GIPHY", "type": "main", "index": 0 } ] ] }, "Build Gallery HTML": { "main": [ [ { "node": "Show GIF Gallery", "type": "main", "index": 0 } ] ] } } }