One of the nifty things about WordPress, as if they need naming, is the ability to embed media into posts simply by putting a URL on a blank line and pressing return.

No futzing with copying and pasting HTML. Just the link to the page that houses a YouTube video, a SoundCloud audio, a flickr photo, even a tweet.

What is even slicker is when you see it happen in the WordPress editor. I’ve been dabbling with some SPLOT things that use a front end editor, and this is one feature I am unable to get working when there is no logged in account (it is an ajax issue, chasing, chasing, it down).

But here is an odd thing; more than a year ago I accidentally discovered you can also autoembed a giphy gif just by putting it’s URL on a blank line and pressing return. I’ve used this in several different themes, sites, and it works.

The weird thing is that it does not appear on the list of oEmbed services supported in the WordPress docs (I had made an edit to the old wiki-fied version in the codex, but that page is neutralized, and I guess my edit was tossed too.).

And I am sure I tested successfully on, but when I went back to confirm this morning… well it half works. The embeds are not automatically done in the editor, but they do happen when published.

A url on a bank line in the WordPress Editor, no embed.
A url on a bank line in the WordPress Editor, no embed.
When published, we see the gif embedded. Funny looking dog flying in the air.
When published, the embed magic works.

Maybe it’s still in the oven being developed.

But that’s not why I started writing. I looked at my old post and was reminded that the giphy embeds are always sized exactly to their original size. Some are small, and the uneven, non responsive width bothered me.

So with a little bit of digging in the Chrome browser inspector, testing some CSS, I found a nice solution that makes them all fit my column width. This can be added to any site via Customize -> Additional CSS.

This means any img HTML tag with a src="" URL that points directly to a .gif file is sized to fit the width of its container. Maybe to be safer, one could put it inside the class name that most themes use for body content:

WAIT! DON’T USE THAT. I just saw that this was causing havoc on my site where some embeds and other things insert those single pixel gifs, as well as some icons I have used. Here is a better selector- it only selects img tags where the src="" contains Thanks W3Schools for schooling me on the use of ^ $ * in selectors.

Regardless, here is before/after shown in an animated gif (gif the irony?):

A 2 screen animation showing before how the GIFs were sized less than the column width and ugly, now they are full width and uniform

Hardly world-saving, but it pleases my aesthetic eye. It reminds me of some CSS I used years ago to have small file icons appear adjacent to any HTML link that points to a .pdf URL .

Anyhow, these kinds of CSS tricks are always fun, and the internets rarely fail with I am seeking a how do I do this in CSS query.

Here was another little fun tool I found last night:

Being able to easily add GIFs to a post without juggling HTML embed code OR gnarly Gberg blocks is just sweet goodness to me. See how well it fits in here?

Did you see how I got a GIF here? One URL, copy, paste, kaboom.

UPDATE Oct 11, 2019

WordPress peeps have added Giphy to list of supported Embed sources, the system worked.

Featured Image: After searching in Google Images for embed I kept seeing a lot of NASA images, as they were embedded GIFs used in their site? This has little relevance, but the Mars Rover is a neat machine that just works at a great distance.

File:Curiosity at Work on Mars (Artist’s Concept).jpg is a Wikimedia Commons Image placed into the public domain as a US Government agency work that is not copyrighted.

If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon
Become a patron at Patreon!
Profile Picture for cogdog
An early 90s builder of the web and blogging Alan Levine barks at on web storytelling (#ds106 #4life), photography, bending WordPress, and serendipity in the infinite internet river. He thinks it's weird to write about himself in the third person.

Leave a Reply

Your email address will not be published. Required fields are marked *