Jump to content

Weekly update – 18 November 2022


ryan
 Share

Recommended Posts

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! 

  • Like 13
Link to comment
Share on other sites

@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:

image.png

for example I can then use:

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

🙂 

  • Like 2
Link to comment
Share on other sites

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! 😄

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...