Jump to content

Jonathan Lahijani

Members
  • Posts

    629
  • Joined

  • Last visited

  • Days Won

    23

Posts posted by Jonathan Lahijani

  1. 1 minute ago, Davis Harrison Dion said:

    @Jonathan LahijaniI haven't watched the video yet; will get to that this evening. But I do have a question: Have you had a look at CraftCMS?

    Yes, I built a project with CraftCMS 2 years ago.  It made me love ProcessWire even more. ?

    I follow WordPress very closely and CraftCMS somewhat closely.  AFAIK, their Matrix field works similarly to ProcessWire's, but the fields that go inside each matrix-block are 1-off (not re-used).  Pros and Cons to that.  Also, it doesn't support depth, so really it's more of the 'classic' approach (like WP ACF Flexible Content).

    • Like 2
  2. Over the years, I've experimented with using RepeaterMatrix as the basis of a rich page builder.  I've gone through at least a dozen concepts, most of which hit the chopping block due to either being too complex, not well thought out, too clever or too limiting.

    To my knowledge, the only other CMS that takes the "Builder" approach that I've demonstrated is DjangoCMS (meaning, it has a matrix-like field with depth support).

    While the "Builder" approach works well, it could be too advanced for some people.  Therefore the other approach is the "Classic" approach where you don't deal with containers/rows/columns (which instead is handled by template code), and simply enter the content in the respective field.  This is easy to understand, but has drawbacks in terms of flexibility.  If it were made to be too flexible, it would become a "God" block which is bad.

    Then I finally thought of a third approach which is a mix between the Builder and Classic approach.  It uses the basic builder blocks, combined with the layout from the matrix item template file.  By using the basic builder blocks, you get the plethora of options.  It requires an extra page to be created behind the scenes however, but live preview still works.

    I made a video comparing all the above (10m duration).  I want to hear your feedback on this as I am ~75% done with my super module (doing a lot of code and concept cleaning at this point) and want to finish off this portion of it.

    (note: I'm posting this in the Dev Talk forum since this is a discussion / not support request)

    • Like 13
  3. As of today's latest commit to the dev branch, the solution to the original question of sorting results by a specific order of page IDs is now possible.

    // get page 2, then 1, then 3 in that specific order using the new 'id.sort'; you can also use "limit" for pagination without any downsides
    $pages->find("id.sort=2|1|3");

    More info: https://github.com/processwire/processwire-issues/issues/1477#issuecomment-982928688

    • Like 6
  4. On 7/18/2019 at 5:30 AM, Torsten Baldes said:

    @dragan @bernhard

    Yes adding works to get a "unified" PageArray with the right order, but the pagination for this remains empty.

    $unifiedMatches = $find1->add($find2)->find("limit=$limit");

    $unifiedMatches->renderPager() returns nothing.

    I'm facing a similar issue (and overall trying to achieve something similar to your original post).  I'm not sure if it's a bug but I filed an Issue:
    https://github.com/processwire/processwire-issues/issues/1477

  5. I use Laravel Mix (webpack) as my build tool and the resulting files (js, css, fonts, images) get stored in /site/templates/dist/.  My package.json is in /site/templates/.

    When using Laravel Mix with Tailwind 2 and its JIT compiler however, I hit a known infinite loop issue due to limitations with webpack:
    https://tailwindcss.com/docs/just-in-time-mode#styles-rebuild-in-an-infinite-loop

    To counteract this, I could put my dist folder inside /site/assets/.  ProCache's built files go inside /site/assets/ as well in a 'pwpc' directory.

    Therefore my question is: Is it more 'proper' to put frontend built files in /site/assets/(subfolder-name)/ as opposed to /site/templates/(subfolder-name)/ ?

  6. 9 hours ago, ryan said:

    @Jonathan Lahijani This is fantastic! I'm blown away by it. Amazing work. How did you come up with this video so quickly? (and so well narrated too) 

    Thanks @ryan.  All the pieces were already in place.  I've been working on this concept for a while now and with live preview, everything has come together.

     

    8 hours ago, Ivan Gretsky said:

    Let me ask one question right away. How did you changed the block colors? Is that already build in like Ryan said it would, or is it with custom css for now?

    @Ivan Gretsky That's just with custom CSS I'm loading in the admin.  Like this:

    // assuming RM field is called 'builder' and matrix-type is called 'builder_column'
    #wrap_Inputfield_builder [data-typename="builder_column"].InputfieldRepeaterItem > label.InputfieldHeader {
      outline: 1px solid #777;
      outline-color: #777;
      background-color: #777;
    }

     

    2 hours ago, bernhard said:

    @Jonathan Lahijani how/where do you define the markup for all those elements? For example the image... Does it use some kind of $img->maxSize(x, y)->url or does it show the originally uploaded image, which might be several MB in filesize?

    @bernhard The 'options' field (powered by Mystique) has a plethora of options for each matrix-type.  The 'Image' matrix-type has a 'width' and 'height' field that if set, will set it to the specified width (->width(width)), specified height (->height(height)) or size (->size(width, height)).  If no values are entered, it uses the original dimensions.

    • Like 4
  7. Hi Ryan,

    I just gave the module a quick test with my super advanced out of this world builder setup and wow, this really works well!  It even auto-saves Mystique-based fields which is absolutely perfect.  Also, replacing a single image-field autosaves correctly too.  So sweet.

    • Like 5
  8. On 10/29/2021 at 1:24 PM, ryan said:

    Also new this week is the ability to copy and paste repeater items, as well as to clone above or below existing items. It handles this by replacing the existing "clone" icon action with a dialog that now lets you choose among various related actions. Among them is the ability to copy/paste from the same page or between different pages.

    Hi @ryan. I was thinking, would it be possible to enhance this feature so that you could copy multiple repeater items to memory and paste them at once (and respect copied depth as well)?

    • Like 2
  9. 7 hours ago, Ivan Gretsky said:

    Love to see those PW related tutorials appear in YouTube search results) Great one, @Jonathan Lahijani!

    It seems you are using PHP 8 and MySQL 8 for development. Are you using those in production too? I was waiting for something to make a move to PHP 8, but the forum says it is too early. What is you experience?

    Yes I am using them in production as well.  I think most PHP 8 issues in ProcessWire itself have been resolved.  There might be some 3rd party modules that haven't been updated in a while that have some bugs, but I don't use them.

    • Like 4
  10. The following video demonstrates how to set up a development server that is 100% ProcessWire friendly and uses all the latest software (PHP 8, MySQL 8, Apache 2).  While there are other approaches to it (such as using tasksel lamp), the video demonstrates an efficient and clean way in getting all the latest versions of the software, advanced configuration settings, in addition to setting up SSL.

    This could also be used for WSL2 since it's ultimately a barebone virtual machine, much like DigitalOcean and similar providers.

     

    • Like 10
    • Thanks 1
  11. 2 hours ago, adrian said:

    @ryan - lots of fantastic improvements - thank you very much!

    One thing I have started seeing (before this latest PW dev and RM versions, so not completely new), are errors like this:

    • Please choose a different name for matrix type “icon_grid” as this name is already in use by a field.
    • Please choose a different name for matrix type “buttons” as this name is already in use by a field.
    • Please choose a different name for matrix type “reusable_block” as this name is already in use by a field.
    • Please choose a different name for matrix type “selected_testimonials” as this name is already in use by a field.
    The weird thing is that I wasn't prevented from creating the fields (or the RM subfields), so the conflict checking isn't working until it's too late. The other thing is that it doesn't seem to actually break anything - is there actually a need to show these errors? What actually is the problem with having these duplicate field / RM subfield names?
     

    @adrian That issue has been there for a couple years.  I spoke about it with Ryan on a thread in the RM forum, but I can't find it.  You can ignore those errors.  I do however wish they would not appear since it feels like like a bug.

    • Like 2
  12. 5 hours ago, ryan said:

    @Jonathan Lahijani Thanks, yes your description explains it perfectly. I understand how it works now. 

    Where does one define the preview view? The preview seems like it is prepared for the admin, and presumably is something different than what appears on the front-end. If that's the case, this approach would also work for Repeater Matrix (like with custom preview render files like I mentioned in my previous message). It seems like a lot of work for a developer to set up, but if it's what sometime wants then maybe they don't mind. How does ACF work in this respect? It looks to me like developer-defined admin previews, but I don't know for sure.

    @ryan

    I'm not sure how ACF Extended is doing previews, but let's just assume it's rendering frontend code in the backend (iframe).

    The specific matrix-item previews would have to be from frontend code (so as a result, inside an iframe) so it utilizes the frontend css and js.  I experimented with a concept a couple years ago (go to around 2:48 in this video -- notice the preview iframe changing there as the dropdown changes).

    With that being said, when switching from editor mode to preview mode, it would have to save the content in the repeater item so that the preview shows the up-to-date data.  Perhaps this could benefit from the new snapshots feature that you've been developing separately?

    Regarding your concern about it being a lot of developer work, I think leaving the intricacies up to the developer is fine as long as ProcessWire provides some basic guidelines and makes it easy to pipe it all together.  Because page builders can get ridiculously complex (I've gone DEEP down this rabbit-hole) and ProcessWire doesn't force a specific frontend approach (good), I believe providing the minimal foundation for letting developers decide how they want to go about it is the best approach.  There are a lot of developers on here trying to twist RepeaterMatrix to work a certain way, but with a few more adjustments I believe it will be in a perfect spot.

    To recap the last few years of "page building" with regards to ProcessWire, here's what really drove it forward:

    1. the Repeater Matrix fieldtype
    2. nesting repeaters inside repeaters
    3. repeater depth
    4. family friendly option (being able to drag a "parent" item and it takes the children with it)
    5. Mystique fieldtype (for being able to define option type fields that don't warrant the use of "real" ProcessWire fields since it would get unwieldy -- I love this module)
    6. new methods by which a matrix-type can be chosen (developed this week)
    7. repeater lazy parents (developed this week; big efficiency gains)
    8. --> matrix-type previews (or some sort of preview system) ?  ?  ?
    9. THE END. ?

    There is a client of mine where one of the editors (a marketing person with a good eye for design) has been using my advanced RepeaterMatrix setup with great success.  The pages he's created are outstanding and he doesn't require any of my help (I'll demo this later this year).  While the page building experience won't match an "inline" type page builder (WP Block Editor and the million other ones out there), I've found that this approach is "good enough" and the pages made will be very consistent.

    • Like 6
  13. 1 minute ago, Ivan Gretsky said:

    I think I remember @ryandid write about implementing something like ProDrafts' live preview in the core everywhere, so we can change a page in one part of the screen and see it dynamically update in the other. I think this might be another way of doing UI for this, maybe even a better one (or complimentary to the one mentioned before), as we can see the changes not in some pseudo-markup, but in a real one. And do not have to create this pseudo-markup and styling in the 1st place. By the way, I can see how htmx can help here too.

    Yea, preview can be done either in the ProDrafts Live Preview way, or the ACF Extended way.  I haven't given it much thought but with the ACF Extended way, you save a lot of horizontal space in the page editor, which is especially important if you have a lot of configuration options for each matrix-type.  With the ProDrafts Live Preview way, it gets squished (although resizable).  ProDraft's Live Preview way does however provide a more realistic (not chopped up) live preview.  Pros and cons.  Would be nice if everyone had an ultrawide monitor. ?

    HTMX is freaking awesome and I'm currently using it heavily on a site for filtering and such.  It's made me 100x more productive for the repetitive fancy JS type things while still being able to use regular HTML (no JSON and brittle SPA nonsense).  If that could be leveraged in some way it would save a lot of headache, although Ryan seems very comfortable with jQuery.  @ryan I think looking into HTMX is worthwhile.  It's going to stay around for a long time if I were to make a prediction.

    • Like 3
  14. 1 hour ago, ryan said:

    @Jonathan Lahijani The png is just an example and it supports any common image extension: gif, png, jpg, svg. 

    I'm cool with a preview option, but just didn't want to mix preview with editor. But a preview that appears above or in a modal or something has potential. We may be able to provide an option for developers to provide their own preview render files, like we do for the preview images. The acf examples look interesting, but admittedly I'm lost in them like a nuclear power plant control room, likely because I'm not so familiar with the wordpress tools.

    By the way, the option we talked about earlier (repeaters with fewer pages) is now committed in the dev branch and you can enable it by opening the "Repeaters storage" fieldset that appears on the Details tab when editing a Repeater or Matrix field. 

    I just tested the repeater storage option and it's working nicely.  This behind-the-scenes tweak was really important in terms of efficiency, so thanks for implementing it.

    As for the ACF example, what you're seeing on that page is basically the equivalent of a matrix field with 3 matrix-types already added ("Header", "Hero" and "Cards") in a "preview" state (remember, this is inside the WordPress admin area, not frontend).  (Note: ignore those 8 vertical tabs on the left, that's just marketing material) If you click on the rendered content of one of the matrix-types there, it will switch to "editor" mode and allow you to edit the content.  Once done editing, you can click the "Close" button to go back to preview mode.

    If you click "Add Row" at the bottom, it's the equivalent of the newly created images approach to selecting a matrix-type.

    Hopefully that clears it up.

    • Like 2
  15. @ryan

    Can matrix preview images also support .jpg in addition to .png?

    Also, this is more of a stretch, but what are your thoughts on the ability to have a "Preview" option that renders a repeater item's frontend output in the backend?  There is a plugin in WordPress for Advanced Custom Fields that does this which I think could be a great addition in ProcessWire:
    https://www.acf-extended.com/

    That page has an embedded WordPress admin interactive demo right there in the hero section.

    This is similar to the spirit of PageTableExtended module: https://processwire.com/modules/fieldtype-page-table-extended/

    • Like 1
  16. 3 minutes ago, ryan said:

    @Jonathan Lahijani If I understand what you are asking for correctly, I think it's actually the next item in the class to-do's here -- does this sound like the same thing you are talking about? If so, I've actually reached the next step on that one along with some other updates, and may have it committed this week, so it's definitely on the way.

    Perfect. Yes that's it.

    • Like 3
  17. Hi Ryan,

    Just gave 3.0.187 a whirl along with the new version of Matrix and it's looking really great.

    I wanted to get your thoughts about a potential optimization to repeaters (which would also apply to matrix).

    Right now, if you add a repeater field (let's call it 'my_repeater') to a template, then create a new page (let's call it 'p1'), ProcessWire will create a "for-field" page and "for-page" page in the following fashion:

    • /admin/repeaters/for-field-123/
      title = my_repeater
    • /admin/repeaters/for-field-123/for-page-456/
      title = p1

    That's all good, but when utilizing RepeaterMatrix as a page builder in the way that I do, it can get a little insane with how many 'for-page' pages get automatically created, even if a repeater field is not being used for a particular matrix-type.  In my advanced setup, if I apply a single matrix type to a page, then as a result of having 6 different repeaters as part of my overall matrix field, 6 'for-page' pages will get created behind-the-scenes no matter what.  Now imagine a page with 20 instances of various matrix-types used, that means there will be at least 20*6 pages that have been utilized behind-the-scenes which can lead to performance issues (deleting a page like that takes some time). I could demonstrate this with a video, but I think you know what I mean.

    So in short, is it possible to somehow improve repeaters so it's more efficient with the creation of 'for-page' pages?

    • Like 9
×
×
  • Create New...