For 2020, I have a simple personal goal for my Pinegrow work:
Every working day do the following:
Help users out with something
Improve the documentation
Fix a bug or improve a feature
So far it’s going great and it’s already the second week of January
As a part of this I also want to be more open about what we are working on, so that you can be more involved into the development process.
Short term
We did a bunch of improvements and bug fixes in the past few weeks that we’ll release next week in Pinegrow 5.92 and Theme Converter 1.3:
The way how stylesheets are handled under the hood was improved to better handle situations where a same stylesheet is imported in multiple parent stylesheets. This has been quite a complex change that needs solid testing.
For years, an older version for support for Materialize CSS was included in Pinegrow, first developed by @MhdAljuboori. Now, the framework reached 1.0.0 and we decided to updated our support as well. Going forward, we will most likely not actively support further development, but at least we leave the framework support at the stable 1.0.0 release.
Fixed bugs include right-clicking on a unselected element and doing Transform operations. Before, the selected element was transformed instead of the clicked element.
WordPress improvements include conditionally enqueueing scripts and styles and adding Show element option that creates a checkbox control for setting visibility of the element to Customizer Field smart action.
Long term
The things we plan to do this year includes:
New CSS editor with editable tree of rules and properties.
Support for responsive images.
Redesign of components and master pages to make them easier to use.
Redoing Blocks in wider context of library of reusable components.
Improving documentation and adding section for developers (more about this soon).
Yes that sounds really great. Since it is more fun and exciting to know what is coming next or at least a hint It would be fantastic to have some kind of roadmap.
Looks very promising thanks for the info! Responsive images wow !!!
Only thing I miss is PHP includes, but would it be very difficult to write a plugin to make PHP includes visible in Pinegrow? That way Pinegrow stay’s as it is, but server-side people like me can switch it on if necessary! Including making the elements in the PHP include visible in the element tree?
The issue with PHP includes is that they usually come with some kind of server side logic. They’re not just including static HTML files. So, even if we add some kind of simple PHP interpreter that can handle including files, the result might not be very useful without also processing the rest of PHP code.
You should consider doing something along the lines of Bootstrap Studio’s “linked components.” Their system works flawlessly, and is one of the best implementations of linking different elements throughout a website that I’ve come across.
Further the ability to create a user library of reusable components (blocks) would be a great asset for Pinegrow.
In my case I use the includes for Navigation and Footer and they contain only regular HTML.
The reason I would like it when they display in Pinegrow is only to see them in the elements tree.
That can come in handy when dealing with complex navigation systems. For viewing it in the browser I use MAMP pro. Of course I use Chrome “inspect” now to see the tree in the include.
PHP code is edited in Sublime Text 3. I have edited .php mails from a form system in Pinegrow without a problem. The PHP code is displayed, but the mail is still editable it works perfect.
In addition, we’re working on two big feature improvements:
Working with remote URLs. All saved changes are saved into a local folder/project and loaded from there when remote URL is reloaded. Like a virtual file system. Not sure if this makes sense. Will prepare a docs article. This is great for styling remote projects.
Selecting dynamic elements on the page. Dynamic elements are HTML elements created by Javascript code at run-time. That makes it possible to style them with the Style panel. This makes PG useful for styling modern web apps.
We had the ground-work for both features already prepared and found a smart way to implement them without many changes under the hood.
Wouldn’t it be nice when applying bootstrap selectors if there was a button or something that copied that particular selector to the website default stylesheet - say site.css
I do this manually at the moment for both font awesome and bootstrap
That’s how I interpreted this-excellent!
I currently use SiteSucker atm, to download with all assets to my local machine (when i had time to do such stuff.) and queried the similarity/difference between doing this workflow and the other PG offering, Pinegrow Snapshots as This would have been great for me.
Alas I never got a PG Team Reply
So likewise. if this works that way it would be great, .and again, Iwould wonder the difference between snapshots and this exciting new feature.
Not that I can use any of them atm, as my mac has died, visually infront of me , once more.
boo hoo
Sounds good. One problem is (was), that people do have wishes - but mostly no answers if the wish is being recognised (or not) by dev. This reasonably ends up in hundreds of forum entries targeting one and the same thing (can’t count the “when do you update the Materialize CSS”).
Just thinking of my “micro-actions” approach we already talked about in summer last year (cannot recall the thread though). I’d wish having a better opportunity disturbing you (what I don’t want), then hijacking this thread.
Thanks! Just wonder what kind of responsive image system you are thinking of? Hope it works along with normal picture and srcset, but also with Farkas Lazy Sizes. https://github.com/aFarkas/lazysizes “the best and most reliable system” that I have used for years now. The creator is a genius!
David
@AllMediaLab Pinegrow Online (https://pinegrow.online) has a prototype of responsive images feature. For now what it does is auto-calculate the sizes attribute. Click on the Calculate sized button. What is still missing is setting up the srcset and optionally resizing images. But, at least, we made some effort and progress
Don’t see it appear in a Bootstrap 5 project!? Or anywhere in Pinegrow Live! (Oh I see it’s in Pinegrow Online! That I don’t have!) So I can’t check it.
Dit you had a look at:
What you need (in my personal routine):
The possibility to choose: Header, Full-Screen, Image and maybe background Image because that also works with Lazy Sizes
For the header art directions: Landscape/Wide 5:1/4:1 and Portrait 4:3 or 1:1
For a Full Screen image you need: Landscape/Wide, 16:9 Portrait Phone 375:812, Portrait Tablet 3:4
Image: Original pixel ratio, custom pixel ratio from center.
Important is to note that the pixel ratios are just average ratios and wil be taken care by for example: object-fit: cover; that implicates that on phones, tablets and monitors the image wil “cover” most of the image in the proper pixel ratio.
Then you need to be able to choose webp with jpg fall-back for proper optimizing and pleasing Google Search.
What I do now in Affinity Photo is with Art direction pre-sets for for example a header:
My code examples are made with: Lazy Sizes that I advise to implement to make it more easy for everybody!
This is a code example of a header: https://www.dwazeherderdeal.nl/ made from a Pinegrow template of the week and Interactions for the scroll to top fade animation icon at the bottom of the site.
It would be fantastic to have some kind of roadmap.
!!!
