Embedding gifs/mp4's into template?

Card Design
1

Hey all,
I was wondering if it’s possible to embed gifs or mp4 loops into a template by scraping from for example giphy or any other site which hosts its own files. I know it’s much more complicated to do with google or any other search engine because the file source vary. But maybe it’s easier with something like pixiv or giphy.
Thanks for the help! :slight_smile:

1 Like
2

Pretty much anything is possible because Anki cards are basically websites. But in my humble opinion, instead of asking the forum for help with very specific ideas like this, you might be better off learning the necessary JS skills yourself :slight_smile:

If you start doing these things on your own, you’ll soon discover that Google → Stack Overflow is a much better way to get the right information.

1 Like
3

I’ve actually been searching for more than 2 hours and haven’t found anything conclusive. Most of my card design is thanks to your help and my own investigation, but this time I haven’t found any leads…

4

I’ve found this addon which does almost exactly what I need, but it doesn’t quite work. It downloads the gifs, wheras I want to just display them. A workaround is to put the download url to Trash, but that’s just hack n’ slash I think…

5

Giphy has an API for this sort of thing, but it’s rate limited (1000 searches/API calls per day).

I reckon you don’t just want the preview images but the full size ones, otherwise it would be as simple as adding another site + class to query into the script I wrote for you last time.

So to answer that question, no it isn’t :wink: And there’s a good reason for that: it’s not exactly in the interest of such sites if people can easily bypass their APIs - which they make money from. In fact, they make it harder than Google & Bing to get to the full-size image (because it’s their images).

6

Oh, thanks for the explanation :smiley: I actually registered for the api and already got one. Tried implementing it in the script you made for me last time, but somehow I can’t get the selector. When right clicking inspect on any preview gif and then right clicking the code I get:
#react-target > div > div.Container-sc-b5579n.fCmeRR > div.giphy-grid > div:nth-child(1) > a:nth-child(3) > div > picture > img
Using this as selector in your script doesn’t seem to work. I’m doing all of this in chrome. Should I be doing it with the Inspector in anki?
I’ll investigate further!

Edit:
DID IT! I inspected the source of gyfact and ended up modifying the Xpath:
/html/body/div[1]/div/div/div/main/div/div[2]/div/div[2]/div[1]/div/div/a/div/picture/img
And got this:
div > div > a > div > picture > img
Is there a more straightforward method to do this?

Really proud I managed to do it though :slight_smile: