What's cooking in the Pinegrow pot?

Hi!

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

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).

Will keep you posted.

11 Likes

Yes that sounds really great. Since it is more fun and exciting to know what is coming next or at least a hint :slight_smile: It would be fantastic to have some kind of roadmap.

Looks very promising thanks for the info! Responsive images wow :heart_eyes:!!!

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.

1 Like

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.

3 Likes

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

@mxs we have this feature already. Take a look at the “Overriding CSS rules” section here:

In short, right-click on the selector in the Active tab of the Style panel and choose Override in or Duplicate in.

Do you mean we will be able to download a online website and work on it later?

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

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

1 Like

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.

Cheers

Thomas

@Thomas “micro-actions” should be covered by the redesign of the component system.

1 Like

Hi @matjaz,

Just wonder what is the status of the promised features of Pinegrow Responsive images and Interactions update?

Regards & Thanks,

David

Hi @AllMediaLab,

we are getting the Interactions update ready for release in the first half of November. It took longer, but it will be amazing :slight_smile:

Responsive images are not cooking yet.

All the best, Matjaz

1 Like

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

Hi Matjaz, @matjaz

Just wonder, what ever happened to the responsive images plans?

2 Likes

Thanks for the clear answer!

@matjaz
After one month still no answer!!!

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

Let us know if the sizes calculation works ok.

6 Likes

@matjaz Hi Matjaz,

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.

 <picture>
                       <source media="(max-width: 475px) and (orientation: portrait)" type="image/webp" data-sizes="auto" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="
                                           assets/responsive-img/home-header-foregr/bg-Phone-webp/home-phone_pe8isy_c_scale%2Cw_480.webp 480w,
                                           assets/responsive-img/home-header-foregr/bg-Phone-webp/home-phone_pe8isy_c_scale%2Cw_888.webp 888w,
                                           assets/responsive-img/home-header-foregr/bg-Phone-webp/home-phone_pe8isy_c_scale%2Cw_1200.webp 1200w" class="lazyload image-resize-cover">
                       <source media="(max-width: 475px) and (orientation: portrait)" data-sizes="auto" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="
                                           assets/responsive-img/home-header-foregr/bg-Phone-jpg/home-phone_pe8isy_c_scale%2Cw_480.jpg 480w,
                                           assets/responsive-img/home-header-foregr/bg-Phone-jpg/home-phone_pe8isy_c_scale%2Cw_888.jpg 888w,
                                           assets/responsive-img/home-header-foregr/bg-Phone-jpg/home-phone_pe8isy_c_scale%2Cw_1200.jpg 1200w" class="lazyload image-resize-cover">
                       <source media="(min-width: 476px) and (orientation: portrait)" type="image/webp" data-sizes="auto" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="
                                           assets/responsive-img/home-header-foregr/bg-Tablets-webp/home-tablet_j5ryiw_c_scale%2Cw_768.webp 768w,
                                           assets/responsive-img/home-header-foregr/bg-Tablets-webp/home-tablet_j5ryiw_c_scale%2Cw_1938.webp 1938w,
                                           assets/responsive-img/home-header-foregr/bg-Tablets-webp/home-tablet_j5ryiw_c_scale%2Cw_2500.webp 2500w" class="lazyload image-resize-cover">
                       <source media="(min-width: 476px) and (orientation: portrait)" data-sizes="auto" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="
                                           assets/responsive-img/home-header-foregr/bg-Tablets-jpg/home-tablet_j5ryiw_c_scale%2Cw_768.jpg 768w,
                                           assets/responsive-img/home-header-foregr/bg-Tablets-jpg/home-tablet_j5ryiw_c_scale%2Cw_1938.jpg 1938w,
                                           assets/responsive-img/home-header-foregr/bg-Tablets-jpg/home-tablet_j5ryiw_c_scale%2Cw_2500.jpg 2500w" class="lazyload image-resize-cover">
                       <source media="(max-width: 5000px)" type="image/webp" data-sizes="auto" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="
                                           assets/responsive-img/home-header-foregr/bg-wide-webp/home-wide_w7v3i6_c_scale%2Cw_800.webp 800w,
                                           assets/responsive-img/home-header-foregr/bg-wide-webp/home-wide_w7v3i6_c_scale%2Cw_1786.webp 1786w,
                                           assets/responsive-img/home-header-foregr/bg-wide-webp/home-wide_w7v3i6_c_scale%2Cw_2421.webp 2421w,
                                           assets/responsive-img/home-header-foregr/bg-wide-webp/home-wide_w7v3i6_c_scale%2Cw_3120.webp 3120w,
                                           assets/responsive-img/home-header-foregr/bg-wide-webp/home-wide_w7v3i6_c_scale%2Cw_3424.webp 3424w,
                                           assets/responsive-img/home-header-foregr/bg-wide-webp/home-wide_w7v3i6_c_scale%2Cw_3840.webp 3840w" class="lazyload image-resize-cover">
                       <img data-sizes="auto" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="
                                           assets/responsive-img/home-header-foregr/bg-wide-jpg/home-wide_w7v3i6_c_scale%2Cw_800.jpg 800w,
                                           assets/responsive-img/home-header-foregr/bg-wide-jpg/home-wide_w7v3i6_c_scale%2Cw_1786.jpg 1786w,
                                           assets/responsive-img/home-header-foregr/bg-wide-jpg/home-wide_w7v3i6_c_scale%2Cw_2421.jpg 2421w,
                                           assets/responsive-img/home-header-foregr/bg-wide-jpg/home-wide_w7v3i6_c_scale%2Cw_3120.jpg 3120w,
                                           assets/responsive-img/home-header-foregr/bg-wide-jpg/home-wide_w7v3i6_c_scale%2Cw_3424.jpg 3424w,
                                           assets/responsive-img/home-header-foregr/bg-wide-jpg/home-wide_w7v3i6_c_scale%2Cw_3840.jpg 3840w" class="lazyload image-resize-cover" src="assets/responsive-img/home-header-foregr/bg-wide-jpg/home-wide_w7v3i6_c_scale%2Cw_1786.jpg" alt="Achtergrondfoto van de oude hoeve met daarin een resaurant omgeven door antieke spulletjes">
                   </picture>

This is a example of a Full Screen image:
https://www.onderdepoort.be/en/

<picture>
<source media="(max-width: 475px) and (orientation: portrait)" type="image/webp" data-sizes="auto" srcset="data:image/gif;base64,[R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==](https://www.onderdepoort.be/en/R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)" data-srcset="
../responsive-images/home-back/bg-Phone-webp/bg-home-phone_i2pozi_c_scale%2Cw_480.webp 480w,
../responsive-images/home-back/bg-Phone-webp/bg-home-phone_i2pozi_c_scale%2Cw_890.webp 890w,
../responsive-images/home-back/bg-Phone-webp/bg-home-phone_i2pozi_c_scale%2Cw_1200.webp 1200w" class="lazyload">
<source media="(max-width: 475px) and (orientation: portrait)" data-sizes="auto" srcset="data:image/gif;base64,[R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==](https://www.onderdepoort.be/en/R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)" data-srcset="
../responsive-images/home-back/bg-Phone-jpg/bg-home-phone_i2pozi_c_scale%2Cw_480.jpg 480w,
../responsive-images/home-back/bg-Phone-jpg/bg-home-phone_i2pozi_c_scale%2Cw_890.jpg 890w,
../responsive-images/home-back/bg-Phone-jpg/bg-home-phone_i2pozi_c_scale%2Cw_1200.jpg 1200w" class="lazyload">
<source media="(min-width: 476px) and (orientation: portrait)" type="image/webp" data-sizes="auto" srcset="data:image/gif;base64,[R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==](https://www.onderdepoort.be/en/R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)" data-srcset="
../responsive-images/home-back/bg-Tablets-webp/bg-home-tablet_m1dp98_c_scale%2Cw_768.webp 768w,
../responsive-images/home-back/bg-Tablets-webp/bg-home-tablet_m1dp98_c_scale%2Cw_1207.webp 1207w,
../responsive-images/home-back/bg-Tablets-webp/bg-home-tablet_m1dp98_c_scale%2Cw_1536.webp 1536w" class="lazyload">
<source media="(min-width: 476px) and (orientation: portrait)" data-sizes="auto" srcset="data:image/gif;base64,[R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==](https://www.onderdepoort.be/en/R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)" data-srcset="
../responsive-images/home-back/bg-Tablets-jpg/bg-home-tablet_m1dp98_c_scale%2Cw_768.jpg 768w,
../responsive-images/home-back/bg-Tablets-jpg/bg-home-tablet_m1dp98_c_scale%2Cw_1207.jpg 1207w,
../responsive-images/home-back/bg-Tablets-jpg/bg-home-tablet_m1dp98_c_scale%2Cw_1536.jpg 1536w" class="lazyload">
<source media="(max-width: 4800px)" type="image/webp" data-sizes="auto" srcset="data:image/gif;base64,[R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==](https://www.onderdepoort.be/en/R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)" data-srcset="
../responsive-images/home-back/bg-wide-webp/bg-home-wide_ra1f9z_c_scale%2Cw_800.webp 800w,
../responsive-images/home-back/bg-wide-webp/bg-home-wide_ra1f9z_c_scale%2Cw_1733.webp 1733w,
../responsive-images/home-back/bg-wide-webp/bg-home-wide_ra1f9z_c_scale%2Cw_2379.webp 2379w,
../responsive-images/home-back/bg-wide-webp/bg-home-wide_ra1f9z_c_scale%2Cw_2951.webp 2951w,
../responsive-images/home-back/bg-wide-webp/bg-home-wide_ra1f9z_c_scale%2Cw_3499.webp 3499w,
../responsive-images/home-back/bg-wide-webp/bg-home-wide_ra1f9z_c_scale%2Cw_3840.webp 3840w,
../responsive-images/home-back/bg-wide-webp/bg-home-wide_ra1f9z_c_scale%2Cw_5000.webp 5000w" class="lazyload">
<img data-sizes="auto" srcset="data:image/gif;base64,[R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==](https://www.onderdepoort.be/en/R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)" data-srcset="
../responsive-images/home-back/bg-wide-jpg/bg-home-wide_ra1f9z_c_scale%2Cw_800.jpg 800w,
../responsive-images/home-back/bg-wide-jpg/bg-home-wide_ra1f9z_c_scale%2Cw_1733.jpg 1733w,
../responsive-images/home-back/bg-wide-jpg/bg-home-wide_ra1f9z_c_scale%2Cw_2379.jpg 2379w,
../responsive-images/home-back/bg-wide-jpg/bg-home-wide_ra1f9z_c_scale%2Cw_2951.jpg 2951w,
../responsive-images/home-back/bg-wide-jpg/bg-home-wide_ra1f9z_c_scale%2Cw_3499.jpg 3499w,
../responsive-images/home-back/bg-wide-jpg/bg-home-wide_ra1f9z_c_scale%2Cw_3840.jpg 3840w,
../responsive-images/home-back/bg-wide-jpg/bg-home-wide_ra1f9z_c_scale%2Cw_5000.jpg 5000w" class="lazyload" src="[../responsive-images/home-back/bg-wide-jpg/bg-home-wide_ra1f9z_c_scale%2Cw_1733.jpg](https://www.onderdepoort.be/responsive-images/home-back/bg-wide-jpg/bg-home-wide_ra1f9z_c_scale%2Cw_1733.jpg)" alt="Background photo of the old farmhouse with a resaurant surrounded by antique things">
</picture>

Regards,

David

1 Like