Laid Back Dogs: site refresh

Bloke · 2022-01-25 14:05:00

Just a simple tweak to Laid Back Dogs

Tidied up a lot of cruft and removed the very outdated menu system. Used the dev/live workflow to install Hilary’s Proximo Clean Theme behind the scenes and iterated from there. When it was ready, flipped the switch: boom. Instant site makeover. I love Textpattern!

Not much else to say about it. Content reviews are ongoing, so things will change as we remove old articles to make way for the new. Might tweak some of the article images to float the text around them, not sure yet. Lots of placeholder images and content for now. The shop still limps along running my modified yab_shop and some mem_ plugins. Would be nice to overhaul that with a new shop plugin one day because the workflow is a little clunky.

There were single-page satellite domains for each of the books, which are ultimately going to become simple redirects to the /books section of the site. Keeps everything under one roof. The new book – The Tale of a BIG Dog – is out now, and I have a vested interest in it because I proofread/edited it and did the graphic design layout and final proofs to the publisher in InDesign. Bit of a steep learning curve, but I’m pleased with the way the book turned out. I’ve since bought Affinity Publisher so if I get any future book design work, I’ll be using that.

In terms of the site, the only sticking point right now is how to get an Instagram feed to the bottom of the front page. Hilary’s theme has a nice ‘gallery’ area here which I’ve hidden for now but I’d love to populate with a live feed from Instagram – just the last N pictures posted. Can I do that? Can I heck! I’ve been through tutorial after tutorial (sidestepping the majority that state “use this WP plugin and it all works”) most of which are horribly out of date. I’ve waded through the baffling documentation on Instagram/Facebook and am still none the wiser.

From what I can tell, I need to register as a developer, get an API key and secret key, register my “app” (website?!) and tell them what it’s going to do, somehow write this “app” – perhaps using one of their colossal SDK downloads – submit it to them for approval, then authorise the website to use it, jump through 3 or 4 iterations of OAuth to ensure the website is security cleared to access the data by using the API keys to negotiate per-feed tokens – and then maybe, maybe, they’ll deliver me the last few images when the web page is refreshed.

It can’t be that difficult, surely? Or is it? I notice the Instagram plugin we did have (oui_instagram?) hasn’t been maintained in a while so doesn’t look like it works with the latest OAuth hoops. If anyone has any clues where I need to look so I can get a simplified feed of just the last few images from an account that is under the owner’s control, I’d be incredibly grateful. I’m going round in circles.

jakob · 2022-01-25 17:39:19

Cool! I remember the earlier version and book. Turned out nicely.

The instagram feed problem has bugged me too, and it has affected numerous WP sites as well. Not tried oui_instagram in a long time either. You might be able to turn to other third-party embed services that bridge the gap for a small fee (e.g. https://curator.io/ which has a free tier with some limitations).

What you might also be able to do is use etc_query + XPATH to retrieve recent updates from one of the “view IG without an account” sites like picuki.com or dumpor.com. They each have a predictable userfeed URL, e.g. https://www.picuki.com/profile/{username} or https://dumpor.com/v/{username} and unlike IG itself, the class names of the images are predictable. That may also get around any image blocking by IG. I’m not sure how kosher that is to be honest, but if her feed update rate is low and you perhaps cache the image, you can minimize your impact.

Or, if she’s not absolutely bought into IG, maybe suggest an alternative such as Pixelfed (federated but very much like IG) or DropMark which has commenting but not the social network feed linkage. The latter has a free tier and an API (as you may remember ;-). Then again, she may want to leverage IGs incomparable networking, in which case there’s little alternative.

Two minor things:

On current safari and Brave (Chrome), the main hero image doesn’t always match the depth of the hero background at certain sizes leaving a large black bar beneath the very attractive snout of the dog. I think that needs some CSS tweaking and I got a bit lost trying to disentangle the current CSS. Another “Steph” (Eckles) has some useful sites with new CSS solutions for typical situations, including the CSS Grid stack. She has another tutorial on popular website hero layouts.
Add padding-left: 1.85em; text-indent: -1.85em; to article ul li for the text to left-align indented after the tick mark bullet points. Use a larger value if you want a larger indent.

Bloke · 2022-01-25 18:16:28

Oooh, great catch with the tick marks. I’d forgotten those ugly things were there. I might change them to little dog graphics to match the book, and then do the negative padding offset trick. Thank you.

And yes, the black bar under the dog hero image really annoyed me but my CSS-fu wasn’t good enough to get rid of it. Plus, Hilary’s CSS is set up in a max-width manner, which absolutely does my head in compared to doing mobile first and then adding stuff if the viewport min-width is exceeded. The latter is the approach I tend to use (because it makes sense to my tiny brain) and it feels comfortable to me, so when I have to think ‘backwards’ and amend rules that have desktop first, I always end up twisting myself in knots trying to get it to do what I want.

I’ll see if some of the grid tricks help out. Ideally I wanted another few days of tinkering to iron out all the kinks, but we had to release the new site because some online news outlet were publishing a feature on Rosie and needed the new URL links.

As for the IG stuff, I’ll see what Rosie thinks to the alternatives, thank you for all the pointers. Glad it’s not just me suffering. I thought I was going mad trying to find a way to get hold of a feed. I kept saying to myself “it can’t possibly be this hard” but maybe it really is!

phiw13 · 2022-01-26 00:31:13

As usual, Textpattern powered sites load fast!

I will try to un-tangle that hero image issue later, seems a little messy code.

Some minor tidbits meanwhile:

on an individual article page (example) you have

<article class="intro">
    <div class="header">

You could change the latter to header for better semantics. And then style article.intro > header

Those articles are quite wide (full width of my desktop browser window). Consider adding some max-width and margin: 0 auto for div.body ? That would help readability.

Fully agree with you about small-screen first and build upwards.

Bloke · 2022-01-26 00:48:19

Thank you, Philippe. This is the perils of using someone else’s theme. While it gives a great leg-up, the details (like the markup soup, desktop-first CSS, and the max widths for content) do raise a few corner cases when tweaking.

I think the wide desktop thing you mentioned might be an issue on retina displays too. I’m not lucky enough to have one of those to test with, but I happened to spot on someone’s screen share during a Zoom call the other day that the font over the hero image was tiny, and full width. I added some max-width to constrain it, but I think that then kills things on smaller devices by making the text ‘fall off’ the bottom of the hero block. Bah.

Textpattern CMS

Textpattern CMS support forum

#1 2022-01-25 14:05:00

Laid Back Dogs: site refresh

#2 2022-01-25 17:39:19

Re: Laid Back Dogs: site refresh

#3 2022-01-25 18:16:28

Re: Laid Back Dogs: site refresh

#4 2022-01-26 00:31:13

Re: Laid Back Dogs: site refresh

#5 2022-01-26 00:48:19

Re: Laid Back Dogs: site refresh

Board footer