Ordinarily it’s pretty easy to get the featured image from the WordPress API. You just have to remember to add the _embed element like so https://bionicteaching.com/wp-json/wp/v2/posts?_embed But maybe there’s some reason you don’t want to set the featured image but want to get the first image from the body of the post. This chunk of so very uncool jQuery gets the JSON data and finds the first img src URL in the post body. I’ve gone over the basic pieces previously so here’s the portion that differs. It’s just regex searching for anything with the img src pattern and spitting back out the URL. See the Pen antonio – jquery demo by Tom (@twwoodward) on CodePen.
It’s better to see this in the full page view but it grabs a WP JSON feed and makes up non-standard polygon shapes based on the posts using the featured image as the background. Try reloading the page and the shapes will change. If you hover over them they’ll behave in very odd ways as well. That’s all easier to see on the full page view. It’s a strange proof of concept but one I’ll be putting to work for an odd art site in the future. I’ll tame it a bit as I’ve made a number of completely odd decisions just to see what would happen. It could be I’ll end up using data from the posts to influence the shapes more intentionally. That opens up a whole world of strange dataviz possibilities. That is one of the things I love about doing this kind of WordPress interaction. It’s light enough that I’ll run down a path like this and just try it out. I probably wouldn’t have bothered if it required a full child-theme or page template. It’s a low threshold with a high ceiling and now I have another example of something people don’t think WordPress could do for my NMC presentation next week. See the Pen socially engaged artists – jquery by Tom (@twwoodward) on CodePen.
Cowboy Jason Stanley performing a riding trick at the Round-Up, Pendleton, Oregon flickr photo by UW Digital Collections shared with no copyright restriction (Flickr Commons) I’ve been doing quite a bit more with the WordPress Rest API lately. There’s plenty of documentation and tutorials out there but most of it still feels a bit scattered to me so I’m going to stick a few of the basics here and add a few things that have come up repeatedly that aren’t quite as basic. There’s an attempt here to move upwards in complexity with the examples but to keep them as clean as possible. This will deal entirely with getting the data. I haven’t done much with using the API to write or modify data. Get the Info There are many ways to get data depending on your library of choice or if you’re using vanilla JS. I’ve played with fetch and Axios on the lighter side and jQuery, Vue, and Angular (v1) on the heavier/more involved side of things. I’ll use jQuery in this version because it’s fairly popular but here’s a Vue example. The example below does a basic jQuery ajax call for the JSON associated with blog information. See the Pen simple jquery get of WP JSON for the site by Tom (@twwoodward) on CodePen. The URL Structure/Accessing […]
There are a bunch of these out there but the ones I knew of didn’t quite do what was needed by the Focused Inquiry faculty involved in this project. They wanted a couple things to be possible. The ability to link to specific elements via URL and have them expand. The URL to those elements to remain consistent even if the order of the elements was changed. An “email this URL” link to enable faculty to send the URL to students Plus/Minus indicators based on expanded/collapsed. Most shortcode plugins I’ve seen either don’t have an ID for the collapse element or make it sequential (which changes if you shift the order). Neither works well for a URL that needs to be consistent. I’ve never seen one to do the email element. In my head, I made this way harder than it needed to be. It ends up being just two shortcodes- one for the collapsible container and one for the item-level elements. I found this Bootstrap snippet that did most of the functional Bootstrap stuff that I needed. I found a script to let me expand elements via URL parameters. I reminded myself what a freaking mailto link structure looked like. Now I just had to figure out what variables needed to be set in the shortcode and how the […]
Talking to Dan about his sports law course resulted in this random generator which might be fun for others. It’s still developing but I like the potential for reinforcing some concepts about free speech in a fun way that allows you to repeatedly explore the topic without it getting tedious. I thought this would be a few minutes of work but I believe that Google has shifted the structure of their JSON feeds from the Spreadsheet. It could also be that I am insane. This particular experience did remind, rather unpleasantly, that I don’t fully understand how nested JSON parsing works. I ended up in the right place but only through about 40 minutes of slamming my head into various walls of misunderstanding. I also need to spend a bit of time applying the DRY concept to this bloated mess.
I’ve been doing my Google JSON display using Angular but I wanted to see what I could do with jQuery. This is based on the post here by Amit (to whom I am grateful for all the great stuff he puts out) with minor updates due to changes in how Google does things. Do make sure you’ve published your sheet at HTML and note that the 1 in the URL structure is the first page if you have multiple sheets.