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 WordPress.com, 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.
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.
img[src$=".gif"] {
width: 100%;
}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:
.entry-content img[src$=".gif"] {
width: 100%;
}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 giphy.com. Thanks W3Schools for schooling me on the use of ^ $ * in selectors.
.entry-content img[src*="giphy.com"] {
width: 100%;
}Regardless, here is before/after shown in an animated gif (gif the irony?):
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 .
a[href$='.pdf'] {
padding: 5px 0 5px 20px;
background: transparent url(https://somesite.org/wp-content/uploads/2018/06/pdf-icon.jpg) no-repeat center left;
}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.
.jpg)
