Jump to content

gmclelland

Members
  • Posts

    565
  • Joined

  • Last visited

  • Days Won

    6

Posts posted by gmclelland

  1. If anyone else is interested, I started researching different ways to try to solve this problem(not just with Processwire.)  You can view the Google doc here.  Feel free to copy/edit or whatever.

    I wonder if we can simplify things?  Do we really want a layout editor in the Processwire backend where you can adjust the grid widths and so on, or do we just need some UI modifications to the tools we already have?

    Here's an example where I think the backend page editor is too complex.

    from:https://getkirby.com/ and https://modmore.com/contentblocks/

    image.thumb.png.5a26e6dd04b49ce04a027b390eaabdad.png   image.thumb.png.aa9cb6e9a7d1541ee18f4c69f9481507.png

    • The page editor could slow down and be clunky from trying to render all the DOM elements?
    • Too complex to work on mobile
    • Content editing gets smushed into small columns
    • Dragging and dropping across layout regions requires a lot of dexterity for the end users - think accessibility.
    • requires taking up the whole page for editing

    A page/layout editor will have to somehow visually represent your frontend layout in the backend.  That seems problematic to me.

    Instead of having a complex page/layout editor where the user has to drag and drop columns, how about we simplify the interface so that it works on mobile as well?  While the YooTheme demo looks cool, I don't think it would work good on mobile?  I think the YooTheme UI is still too complex.

    How about we just allow the user to choose from prebuilt sections or components?  Those prebuilt sections/components could then be edited in the Processwire sidebar panel like the Processwire ProDrafts sidebar editing.

    It would be cool if the RepeaterMatrix, Page Reference, Page Table, Repeater fields got rid of all the cluttered "Add New" type links and instead had one "Add new" button/link that would give the option to choose a template visually in a Processwire Sidebar Panel. 

    154311667_ScreenShot2021-01-25at09_09_51.jpg.dab3d43ec5264a001c5a7758426db6ad.jpg

    Maybe also add another option to RepeaterMatrix, Page Reference, Page Table, Repeater fields to edit pages in the Processwire Sidebar Panel instead of the inline expand/dropdown editing?  Just like the Processwire ProDrafts module does with Live Preview?

    image.png.3d2b5df34b67b34e7ba926fc9a602fd8.png

    This is how Godaddy.com's website builder works.  You can try it for free.  When you click the plus icon to add a new section, it shows this selector in the sidebar.

    image.thumb.png.af90943e66900b1ef5b79b22b4b86642.png

    This is also how https://froont.com/ sidebar works.  A user selects a prebuilt section or component/widget.

    852538739_ScreenShot2021-01-25at12_21_33.jpg.de32bcb5e0d1103abc015ba706e2104a.jpg

    Also http://cards2.webflow.io/ and https://froala.com/design-blocks  and https://www.brizy.io/brizy-design-kit-2/ you can see how a page is built from these widgets/components that stack on top of each other.

    Imagine if I were to create a Processwire "Landing Page" template. It would probably only have 3 fields:

    • Page Header - Single Select - to override the default site header
    • Page Sections - Allow Multi Select - to add layout rows 
    • Page Footer - Single Select - to override the default site footer

    That would give a lot flexibility of the page design without allowing a user to screw up the design.

    When looking at the processwire page editor, it could show the three fields each containing a preview graphic of the element that was selected.  Maybe @bernhard 's module would allow the visual selection of the templates somehow or maybe @ryan could add a representative/template preview image option to all the templates?  

    The Sections field would allow multiple selections.  Those selections would display in a single column like the Page Table field that allows you to move the preview graphic of the element that was selected up or down in the list.  Maybe Page Table Extended could be used to show that preview graphic from the TemplatePreviewImages module?  I haven't tried.  If you click the preview graphic, it will open that element in the Processwire Sidebar Panel for editing.

    Here is a rough mockup of what it could look like:

    2014967171_ScreenShot2021-01-25at14_55_13.jpg.c903fdf172d4d95ac4a1964dbffff8da.jpg

    That way the page editing is nice and simple, no need to worry about messing with the indentation of nested elements like in this example:

    image.png.d329d6ee6e59d318c7527230d73f38b3.png

    Indentation is too easy for editors to mess up IMHO.

    Now what happens if you click on the "Three Column" item above?  It would open for editing in Processwire Sidebar Panel on the right.  Now that "Three Column" page has other Page Reference fields to components/widgets:

    • Column 1 - contains a RTE Editor widget using a limited/restricted CKeditor or a markdown editor?
    • Column 2 - contains an Art Directed Responsive Image widget
    • Column 3 - contains a Accordion widget with other types of referenced widgets like a Editorjs.io widget or a file downloads listing widget

    So that is where I'm not clear on.  Do we need some mechanism to allow us to "Drill down" to edit other referenced pages in the sidebar?  How do we go deeper?  Could there be some kind of breadcrumbs or back button like on an iphone?  The SilverStripe CMS has drill down editing as seen in this video at the https://youtu.be/IKGUd2dq8XI?t=1022 although it doesn't use sidebar editing.  Technically, I'm not sure how they achieve that?

    Anyways, I don't have the solution, but I thought I would share those concepts as rough as they are. ?

    I also like Bernhard's concept of defining these widget/components in code so they can be shared across sites.  Creating all these fields and templates by clicking in the admin would not be fun.  No disrespect to Processwire.  (I love Processwire and it's admin theme btw)

    I love hearing all the discussion on this.  It's one huge problem that definitely needs solving.  I need to able to give non technical users the ability to create customized landing pages without them knowing html.  They like to be able to switch out a whole section just to see what it would look like.  That's why I would prefer to give them the ability to select prebuilt responsive components instead of allowing them the ability to create grids with rows with margins and paddings and so much other htmly stuff.

     

    • Like 9
  2. Hmm... I'm not sure then.  Are you using TemplateEngineFactory with TemplateEngineTwig?  Did you upgrade TemplateEngineTwig as well?  Did you upgrade your Twig libraries with composer?  Did you clear your site caches with Modules > Refresh?  Just some thoughts...

    If I remember right..after upgrading to 2.x

    throw new Wire404Exception();

    most of the time it would work, but one time it didn't.  I just can't remember the use case.  So maybe that bug isn't fully fixed?  Perhaps you can provide Wanze your code so he can replicate and fix the problem?

  3. Hi elabx,

    On one of my sites, I have:

    if ($input->urlSegment1){
      // unknown URL segment, send a 404
      throw new Wire404Exception();
    }

    and in another place I was using:

    // Don't let search engines index non-existing pages
    // see https://processwire.com/blog/posts/processwire-2.6.18-updates-pagination-and-seo/
    // if(!count($paginated_calendar_postings) && $input->pageNum > 1) {
    if(!count($paginated_calendar_postings) && $input->pageNum > 1) {
    
      // I'm not sure why this line is needed, but it is
      // $session->redirect($pages->get($config->http404PageID)->httpurl());
      throw new Wire404Exception();
    }

    I think I used to have to do this, before a bug was fixed in this module?

    $session->redirect($pages->get($config->http404PageID)->httpurl());

    Hope that helps

  4. Hi Adrian,

    Just wanted to let you know that I'm seeing an error:

    PHP Warning: in_array() expects parameter 2 to be array, string given in .../TracyDebugger/TracyDebugger.module.php:1072

    I'm running php 7.1.33 and Processwire 3.0.159.  TracyDebugger module is at 4.21.16.

    I'm seeing this error on all pages of my site.  I have also done a modules refresh.

    Let me know if you need any more information.

    Thanks for all you do!

  5. So it sounds like you are wanting the ability to select a file from an predefined directory?  Then the user can select the file using some kind of file browser where you can drill down to select the file you want?

    It would be cool if someone made another module that can either extend the core imagefield or create a new fieldtype to allow for different sources to be added via additional modules?

    I've used something like this before in Drupal with the https://www.drupal.org/project/filefield_sources module.  You can see all the modules that integrate with it at https://www.drupal.org/search/site/filefield sources.

    In the screenshot below, you can see the different toggle links/tabs that are added: Upload, File Browser, Reference existing, Remote URL.  Each additional module can add more toggle links to change the input that is used.  Sources are configured per field in the field settings.

    image.png.ec5c8faaca502531494a2b0d0f6fd336.png

    If we had a module like that, then we could create an another integrated module that adds a "File browser" source link/tab that uses an input similar to the "Page List Select Multiple" input field type from the core Page Reference module, but instead of pages show/select files and folders?

    Maybe the input could look something like this??  Taken from PageListImage module at 

     

     

    post-100-0-60777700-1339186188.png

    There is also already a module to select files, but maybe it could be modified to add a new inputfield type similar to image above?

    Or maybe you could have a module like https://www.drupal.org/project/imce and  https://www.drupal.org/project/imce_filefield that just adds a "Open File Browser" link to the image field that opens IMCE or similar to browse a file system?  There is also https://www.drupal.org/project/visual_select_file that has a slightly different UI.

    image.thumb.png.6ea968d6b392b1b37d7632dd9d8888c2.png

    I know this isn't a solution, but these are all rough ideas of me thinking out loud in case any one wants to run with it?

     

×
×
  • Create New...