Weekly update – 18 November 2022

[ryan]

This week I've been focused on a client project, building out this Reviews section (still a work in progress). There's a few hundred URLs within it, but it's just one page/template. The reviews are via ProcessWire's core comments (FieldtypeComments) field and primarily uses the FieldtypeComments find() method for filtering and sorting of comments/reviews. On this same site, this week Pete launched this very nice blog called Tailwinds, which he told me is using Tailwind CSS (and powered by ProcessWire). The name of the blog (Tailwinds) actually precedes the use of Tailwind CSS, but if you've got a blog named Tailwinds, Tailwind CSS certainly seems like the appropriate framework. ? On the core dev branch we've had a few commits resolving issues and minor improvements, but not enough for another version bump this week. Have a great weekend! 

[adrian]

@ryan - all the assets for Tailwinds are 404'ing for me

[Pete]

Thanks @adrian something odd going on with caching assets there so I've turned it off for now ? It was working 10 hours ago but will probably be something simple.

Edited November 19, 2022 by Pete

[zoeck]

@Pete the pagination is not working

example: click ok a Tag (Germany ? ) and click on next…

and view more articles on the Front Pages gives a 404

[Pete]

@zoeck Thanks for pointing that out I think it's all fixed now. Curious as I was very sure I'd enabled page numbers already.

This blog was a conversion from a Wordpress website to ProcessWire where the aim was simply to keep exactly the same theme and migrate the content. Rather than use the existing files and unpick it from Wordress, I opted to rebuild using Tailwind CSS which I've become addicted to lately and it's always a pleasure as you can pretty much just take a design and get going only occasionally needing to come up with custom styles in your stylesheet.

Some tips that you may find useful:

1. preg_replace your content to add native loading="lazy" to all images:

preg_replace('/<img((.(?!loading=))*)\/?>/i', '<img loading="lazy"$1>', $content);

2. A tailwind shade generator: https://www.tailwindshades.com/ for example enter #ff9900 then click the colour and you can see all the shades, but more importantly copy and paste them into your Tailwind config file to have them available in your code:

for example I can then use:

<p class="text-orange-peel-800">My orange appears to have gone rotten</p>

? 

[kongondo]

6 hours ago, Pete said:

I opted to rebuild using Tailwind CSS which I've become addicted to lately and it's always a pleasure as you can pretty much just take a design and get going only occasionally needing to come up with custom styles in your stylesheet.

Tailwind CSS is awesome! ?

[teppo]

Both parts of the site look really nice!

Tiny display issue with "do you recommend this tour":