My kid asked me if I had any emojis on my website–and indeed I do–and then asked to see them after school. Unfortunately you cannot see .gif animations in Windows File Explorer.
I’d been meaning to start stuffing index.htmls into my directories as easter eggs or useful landing pages, so this seemed like a good opportunity to whip something up. A really easy way to create a static image gallery is a bash one-liner in cmd, something like this:
for %i in (*.*) do echo ^<img src="/images/kao/%i" alt="%~ni" title="%i" /^> >> all.html
I realized such an index could be personally useful if I could click-to-copy like GetEmoji, and since I cannot be bothered to learn Javascript I dug around until once again, Stackoverflow’s wscourge delivered. When the button is clicked, the title text with full img tag is copied to clipboard. Got something basic working here:
<script>
function copy(that){
var inp = document.createElement('input');
var title = that.children[0].getAttribute("title");
console.log("Copy:", title);
document.body.appendChild(inp)
inp.value = title
inp.select();
document.execCommand('copy',false);
inp.remove();
}
</script>
<button type="button" onclick="copy(this)"><img class="custom-icon" src="/images/emoji/android.png" alt="android" title="mutant standard: android.png" /></button>
I thought I could use a big old echo command to grab up all my images, but I ran into this problem where bash kept giving me strings with lots of whitespace I couldn’t even copypasta to show an example here. So. I guess it’s time to finally learn Jinja2 templates like a reasonable person. I found the official docs a little non-intuitive, but found enough examples online to cobble something together.
The emoji index template looks something like this:
{% for kao in kaos %}
<button type="button" onclick="copy(this)"><img class="custom-icon" src="/images/kao/{{kao}}" alt="{{kao}}" title='<img class="custom-icon" src="/images/kao/{{kao}}" alt="{{kao}}"/>' /></button>
{% endfor %}
And the python script is:
import os
from jinja2 import Environment, FileSystemLoader
def print_html_doc():
j2_env = Environment(loader=FileSystemLoader('images'),trim_blocks=True)
template = j2_env.get_template('emoji_index_template.j2')
rendered_template = template.render(kaos=kaos)
with open('images/emoji/index.html', 'w') as f:
f.write(rendered_template)
kaos = list()
path = "images/kao/"
for files in os.listdir(path):
if os.path.isfile(os.path.join(path, files)):
kaos.append(files)
print_html_doc()
In the long run, this is a better solution. It will be easier to update the template and render a new index than it would be to copypasta a bunch of random crap, so. It was worth it spending an hour and a half fiddling with a silly index page that doesn’t matter because this is better. Right? RIGHT?
It IS better, thank you beleagered comic strip man.