Spell with Flickr: Image-Based Text Generator

Open In Editor Publish Your Code

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head><script type="text/javascript" src="https://web-static.archive.org/_static/js/bundle-playback.js?v=2N_sDSC0" charset="utf-8"></script>
<script type="text/javascript" src="https://web-static.archive.org/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script>
<script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden","showSwfDownload":true};</script>
<script type="text/javascript" src="https://web-static.archive.org/_static/js/ruffle/ruffle.js"></script>
<script type="text/javascript">
    __wm.init("https://web.archive.org/web");
  __wm.wombat("http://metaatem.net:80/words/","20140219071338","https://web.archive.org/","web","https://web-static.archive.org/_static/",
	      "1392794018");
</script>
<link rel="stylesheet" type="text/css" href="https://web-static.archive.org/_static/css/banner-styles.css?v=1utQkbB3" />
<link rel="stylesheet" type="text/css" href="https://web-static.archive.org/_static/css/iconochive.css?v=3PDvdIFv" />

<h1><a href="https://web.archive.org/web/20140219071338/http://metaatem.net/words/">Spell with <span class="flickr">flick<span class="r">r</span></a></h1>

<h2>Created by <a href="https://web.archive.org/web/20140219071338/http://flickr.com/photos/kastner/">kastne<span class="r">r</span></a> (Erik Kastner) with PHP and javascript</h2>
        
        <h2>You should follow me on twitter: <a href="https://web.archive.org/web/20140219071338/http://twitter.com/kastner" title="@kastner">click here</a></h2>

<p class="contact">
            Please send me comments, suggestions or questions, <a href="https://web.archive.org/web/20140219071338/http://www.cloudflare.com/email-protection#82e9e3f1f6ece7f0c2e5efe3ebeeace1edef"><span class="__cf_email__" data-cfemail="9cf7fdefe8f2f9eedcfbf1fdf5f0b2fff3f1">[email protected]</span><script type="text/javascript">
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();
/* ]]> */
</script></a>. I love getting emails about Spell with Flickr - and all my programming projects.
        </p>

<form action="nothing" onsubmit="subform(); return false;">
        <label for="words">Spell:</label> <input type="text" size="40" name="words" id="words"/><input type="submit" value="spell"/>
    </form>
    <script type="text/javascript">
        document.getElementById("words").focus();
    </script>

Any comments or suggestions, please send them to kastner-at-gmail.com. Thanks<br/>
        <hr/>
        <p>Follow me on <a href="https://web.archive.org/web/20140219071338/http://twitter.com/kastner" title="twitter: @kastner">Twitter: @kastner</a></p>
        <h3>My latest <a href="https://web.archive.org/web/20140219071338/http://metaatem.net/">blog</a> entry</h3>
        
<h2><a href="https://web.archive.org/web/20140219071338/http://metaatem.net/2008/02/02/that-was-fast">That was fast</a></h2>
<div class="post"><p>It was just a few hours ago that I posted my <a href="https://web.archive.org/web/20140219071338/http://metaatem.net/2008/02/01/my-goals-for-2008" title="My goals for 2008 at  Meta | ateM">Goals for 2008</a> and I'm releasing my first project of the year.</p>

<p>It's nothing big, but it was a fun little distraction.</p>

<p>The <a href="https://web.archive.org/web/20140219071338/http://metaatem.net/make_selection.php" title="Text + Image + CSS3 = Crazy Delicious">hide-an-image-in-text-with-css3-creator-thing</a></p>

<p>If you're one of those folks who might care about how something like this might work, here's the <a href="https://web.archive.org/web/20140219071338/http://metaatem.net/make_selection_ajax.phps">source</a>.</p> read the rest at <a href="https://web.archive.org/web/20140219071338/http://metaatem.net/">Meta | ateM</a></div>

<hr/>
        <h3>Some of my other projects</h3>
        <ul>
            <li><a href="https://web.archive.org/web/20140219071338/http://metaatem.net/">Meta | ateM - my blog</a></li>
            <li><a href="https://web.archive.org/web/20140219071338/http://www.sixpackbysummer.com/">Six pack by summer</a> - I'm trying to get a six pack by the end of summer or lose $1,500+</li>
            <li><a href="https://web.archive.org/web/20140219071338/http://metaatem.net/projects/">Other projects</a></li>
        </ul>

<hr/>

<p>Spell with flick grabs images from <a href="https://web.archive.org/web/20140219071338/http://flickr.com/">flickr</a> (the <a href="https://web.archive.org/web/20140219071338/http://www.flickr.com/groups/oneletter/">One Letter</a> and <a href="https://web.archive.org/web/20140219071338/http://www.flickr.com/groups/onedigit/">One Digit</a> groups) and uses them to spell what you've typed in.</p>

<hr/>

<h3>The story of <a href="https://web.archive.org/web/20140219071338/http://metaatem.net/words/">Spell with flickr</a><h3>
        <p>
            <a>Krazy Dad (jbum)</a> made a note once using the letters from the <a href="https://web.archive.org/web/20140219071338/http://www.flickr.com/groups/oneletter/">One Letter group</a> with the <a>Flickr API</a>.
            I decided to try making something similar as a way to learn Flickr's wonderful developer tools. Along the way,
            it got <a>VERY popular</a>. I still feel like it could be better, but it gets the job done. I have made the 
            <a href="/web/20140219071338/http://metaatem.net/words.phps">source code</a> available for free. It's not coded very well, my first time parsing XML(ish) 
            with PHP(4), and also my first time doing caching of remote resources (funny story, I had a bug in this script 
            that bypassed the cache each time - when I got really popular, flickr felt the strain, and temporarly disabled my API Key). 
            I'm still thrilled with the response it has gotten, and welcome any suggestions or comments. 
            You can reach me on my blog at <a href="https://web.archive.org/web/20140219071338/http://metaatem.net/">metaatem.net</a>, or email me at
            <a href="https://web.archive.org/web/20140219071338/http://www.cloudflare.com/email-protection#6a010b191e040f182a0d070b030644090507"><span class="__cf_email__" data-cfemail="e78c869493898295a7808a868e8bc984888a">[email protected]</span><script type="text/javascript">
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();
/* ]]> */
</script></a>.
        </p>
        <div>
            <a href="/web/20140219071338/http://metaatem.net/words.phps">main source code</a><br/>
            <a href="/web/20140219071338/http://metaatem.net/spell.phps">js wrapper (spell) source code</a>
        </div>
        <script type="text/javascript">
        </script>
        <script type="text/javascript">
        var gaJsHost = (("https:" == document.location.protocol) ? "https://web.archive.org/web/20140219071338/https://ssl." : "https://web.archive.org/web/20140219071338/http://www.");
        document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
        </script>
        <script type="text/javascript">
        var pageTracker = _gat._getTracker("UA-70669-14");
        pageTracker._initData();
        pageTracker._trackPageview();
        </script>
        <script type="text/javascript" src="https://web.archive.org/web/20140219071338js_/http://gaug.es/track.js" id="gauges-tracker" data-site-id="4d5c2d674570a3508f000003"></script>
    <script type="text/javascript">
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l=document.getElementsByTagName("a"),t=document.createElement("textarea");for(i=0;l.length-i;i++){try{a=l[i].getAttribute("href");if(a&&"www.cloudflare.com/email-protection"==a.substr(7 ,35)){s='';j=43;r=parseInt(a.substr(j,2),16);for(j+=2;a.length-j&&a.substr(j,1)!='X';j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}j+=1;s+=a.substr(j,a.length-j);t.innerHTML=s.replace(/</g,"<").replace(/>/g,">");l[i].setAttribute("href","mailto:"+t.value);}}catch(e){}}}catch(e){}})();
/* ]]> */
</script>
</body>
</html>
<!--
     FILE ARCHIVED ON 07:13:38 Feb 19, 2014 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 13:01:16 Mar 12, 2026.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spell with Flickr Generator</title>
    <style>
        :root {
            --primary-color: #ff0084;
            --secondary-color: #0063dc;
            --bg-color: #f4f4f9;
        }

body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg-color);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 40px 20px;
            margin: 0;
        }

.container {
            max-width: 900px;
            width: 100%;
            text-align: center;
            background: white;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

h1 {
            margin-top: 0;
            color: #333;
        }

h1 span:first-child { color: var(--secondary-color); }
        h1 span:last-child { color: var(--primary-color); }

.controls {
            margin-bottom: 30px;
            display: flex;
            gap: 10px;
            justify-content: center;
        }

input[type="text"] {
            padding: 12px 15px;
            width: 300px;
            border: 2px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
            outline: none;
            transition: border-color 0.3s;
        }

input[type="text"]:focus {
            border-color: var(--secondary-color);
        }

button {
            padding: 12px 25px;
            background-color: var(--secondary-color);
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
            font-size: 16px;
            transition: background 0.3s;
        }

button:hover {
            background-color: #0052b8;
        }

#output {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            min-height: 150px;
            padding: 20px;
            border: 2px dashed #eee;
            border-radius: 8px;
        }

.letter-box {
            width: 100px;
            height: 100px;
            background: #eee;
            border-radius: 4px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

.letter-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.loader {
            border: 3px solid #f3f3f3;
            border-top: 3px solid var(--primary-color);
            border-radius: 50%;
            width: 20px;
            height: 20px;
            animation: spin 1s linear infinite;
        }

@keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

.error {
            color: #e74c3c;
            margin-top: 10px;
            font-size: 14px;
        }
    </style>
</head>
<body>

<div class="container">
    <h1><span>Spell with</span> <span>Flickr</span></h1>
    <p>Type something to generate images from the Flickr "One Letter" pool.</p>
    
    <div class="controls">
        <input type="text" id="userInput" placeholder="Enter text here..." maxlength="15">
        <button onclick="generateSpell()">Spell It!</button>
    </div>

const output = document.getElementById('output');
    const input = document.getElementById('userInput');
    const errorMsg = document.getElementById('errorMessage');

function generateSpell() {
        const text = input.value.trim().toLowerCase().replace(/[^a-z0-9]/g, '');
        output.innerHTML = '';
        errorMsg.innerText = '';

if (!text) {
            errorMsg.innerText = "Please enter some letters or numbers.";
            return;
        }

[...text].forEach((char, index) => {
            const box = document.createElement('div');
            box.className = 'letter-box';
            box.id = `box-${index}`;
            box.innerHTML = '<div class="loader"></div>';
            output.appendChild(box);

fetchFlickrImage(char, index);
        });
    }

// Allow "Enter" key to trigger generation
    input.addEventListener("keypress", function(event) {
        if (event.key === "Enter") {
            generateSpell();
        }
    });
</script>

</body>
</html>

Spell with Flickr: Image-Based Text Generator

Recommended

Travel website with inverted border-radius

HTML Login Form with Matrix Background

Login Page HTML: Matrix Theme with Fingerprint Auth

HTML

CSS

JS

Recommended

Travel website with inverted border-radius

HTML Login Form with Matrix Background

Login Page HTML: Matrix Theme with Fingerprint Auth

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS