Jump to content

jploch

Members
  • Posts

    347
  • Joined

  • Last visited

  • Days Won

    8

Posts posted by jploch

  1. My new module PAGEGRID can be a good alternative to website builders like Pinegrow or Webflow. This way you don't have to convert your design to ProcessWire templates and can design and edit pages directly in the backend.

     

    • Like 1
  2. On 1/19/2023 at 10:43 AM, gebeer said:

    As I understand it from the docs, every block is being wrapped inside a <div> element.

    @gebeer Every block gets wrapped by an element. The default is a "<div>", but the wrapping element can be changed to something else than div. See here. You can even let users change the element tag in the Style Panel. (Note: The markup inside the wrapping element is based on the template file the developer created in the "site/templates/blocks" folder).

    For me using "<div>" as an element for layout/design seems semantically fine. Divs are defined to not convey any meaning (i.e. they don't alter the "structure" of the document). Actually a lot of (CSS) frameworks and websites are build like this. Having those HTML5 tags like article, section, nav, etc. inside divs. But yes you can change it 🙂

    • Like 4
  3. PAGEGRID – A visual page builder for ProcessWire.

    Design fully responsive websites (or parts of them) without writing any code. Use ProcessWire's native templates (and fields) to create your own blocks. Rearrange and resize items in a visual way and use inline or modal editing to quickly edit the content of your website. 

    spacer.png
    (The demo uses AdminThemeCanvas but it will work just fine with the core Uikit Theme)

    Try PAGEGRID for free

    Checkout the online demo.

    PAGEGRID is not free software. However, you can try PAGEGRID on your local machine or on a test server as long as you need to make sure it is the right tool for your next project. … and when you’re convinced, buy your license.

    Get it here

    Download from GitHub
    Download from Module Directory

    Requirements

    • ProcessWire 3.0.210 or greater
    • Currently the dev version of ProcessWire 3.0.216 or greater has some bugs with PG. (I have a working fix, and it will be comming soon). Please use the latest master release of ProcessWire for now)

    Installation

    1. Go to “Modules > Site > Add New“ in your admin
    2. Paste the Module Class Name "FieldtypePageGrid" into the field “Add Module From Directory“
    3. Click “Get Module Info“
    4. On the overview, click “Download And Install“
    5. On the following screen, click “Install Now“

    More install options

    Get up and running

    What's PAGEGRID?

    • page-grid.com – Get to know PAGEGRID.
    • Documentation – Read the official documentation.
    • Issues – Report bugs and other problems.
    • Forum – Whenever you get stuck, don't hesitate to reach out for questions and support.

    Why I build it

    ProcessWire is super flexible in itself and lets me build whatever I want. But building a custom website can be a lot of work. For some projects, I've ended up using a lot of templates and fields. To make my pages more flexible, I sometimes build my own little page builder based on the RepeaterMatrix or PageTable module. While these page builders were great for the specific site I was building them for, they were never flexible enough to be used for new projects, so I ended up customizing them frequently. The more complex they became, the harder it became to use them for my clients. After playing around with some WYSIWYG page builder tools, I realized that while they can save me a lot of time, they can also be very limiting or have expensive subscriptions and somehow tie you to their ecosystem. So I decided to build my own page builder based on the most flexible CMS I knew.

    Concept

    This fieldtype Renders block templates and adds drag and drop functionality in admin, as well as enable inline editing for text, and file fields. It also let's you manipulate CSS in a visual way to design fully responsive websites (or parts of them) without writing code.

    The fieldtype comes with an optional style panel to manipulate CSS properties directly on the page. You can customize the panel or disable it completely from the module settings (and just use a CSS file that you include in your template). The data to style the items is stored directly on the item using PW's meta data (no extra fields are created).

    Don't want to give your client all that power? Use ProcessWire’s powerful permission system to control what your clients can edit. You can then also grant access individually to the style panel, resize or drag functionality using ProcessWire's build in permission system.

    Features

    • Blocks are just pages
    • Blocks are defined by native PW templates and fields
    • Manipulate CSS grid or flexbox based layouts in a visual way to design fully responsive websites (or parts of them)
    • Encapsulated frontend code (PAGEGRID renders the template of your frontend inside an iframe in the backend)
    • Design and editing features can be disabled for certain roles (using ProcessWire's build in permission system)
    • Inline editing of text, textarea, TinyMCE (supports latest version), ckeditor and file fields
    • Simply drag and resize to manipulate grid items directly inside the backend
    • Manipulate grid columns and rows directly on the page (use any number of columns you want)
    • All style manipulations are saved as JSON and used to generate dynamic styles that you render in your main template (no inline styles)
    • Nested groups/grids (child pages of nested blocks are created under group parent)
    • The style panel supports adding custom classes and assigning styles to them. These classes can be used globally on all pages (a css class is also a page)
    • The style panel supports selecting html tags to style tags globally across the whole site
    • Global blocks work with page reference field (changes on one page, changes all blocks on all pages)
    • Manual and auto placement of grid items
    • blocks and nested blocks can be cloned 
    • Redo/undo and copy/paste shortcuts
    • Editing block items in modal sidebar immediately updates frontend (Ajax Save).
    • Define custom icons for your blocks via native template settings (template -> advanced -> icon)
    • Automatic page save (Changes are getting saved via ajax, no need to click the save button)
    • NEW: Option to automatically load lazysizes lazyloader (V 0.1.0)

    Changelog

    • V 0.1.0: Feature: Option to automatically load lazysizes lazyloader (Module Settings > Plugins).
    • V 0.1.5: Fixed bug: Tabs not working when editing items via modal panel.
    • V 0.1.6: Fixed bug: Setting height in VH unit was not working.
    • V 0.1.7: Feature: Option to hide save button (and use automatic ajax save ) if there are no other fields than PAGEGRID on the content tab (Module Settings > Interface).
    • V 0.2.0: Fixed bug: Custom block wrapper element <p> was not working with inline editor.
    • V 0.2.0: Fixed bug: Inline editor would sometimes not save after clicking cancel and then edit item again.
    • V 0.2.0: Feature: Now it's possible to add classes to elements inside richt text fields via style panel.
    • V 0.2.0: Fixed bug: Inline editor was not working after first item was added to the page (needed reloading the page).
    • V 0.2.1: Feature: Updated PageGridBlocks Module: Using TinyMCE as the default editor.
    • V 0.2.1: Feature: Updated PageGridBlocks Module: Group/container wrapper element can now be changed to <div>, <section>, <article>, <header>, <footer>, <nav>.

    Thanks to everyone who helped me improve my coding skills and for the support of this great community! Special thanks to @diogo for the valuable feedback and @ryan for this great CMS and his support for the PageFrontEdit module!

    • Like 26
    • Thanks 8
  4. @ryan I really like the implementation of the custom style formats!
    One thing I noticed: If you insert a custom class for a link in the module settings, it will remove the class once the href attribute is set:

    #Inline a.button { color: white; background-color: black; } /* Button */

    I can select the new class in the dropdown, but once I add a href attribute with the link icon the class will be removed.

  5. 13 hours ago, Robin S said:

    You could apply the purify sanitizer when the field value is saved by hooking InputfieldTextarea::processInput().

    Hey @Robin S thanks for your advice! I think you are right, it's not really possible to protect against a malicious superuser account (e.g. If it got hacked). Since the code is saved as a string anyway, I don't think it would cause harm, even if there would be php or javascript code in the field right?

    But I feel better to use the hook you mentioned. Here is the code, wich works nicely:

    public function __construct() {
    	$this->addHookBefore('InputfieldTextarea::processInput', $this, 'sanitizeValue');
    }
    
    public function sanitizeValue(HookEvent $event) {
    	$input = $event->arguments(0);
    	$input->customStyles = strip_tags($input->customStyles, '');
    	$event->arguments(0, $input);
    }
    • Like 2
  6. Hey folks,

    I am currently building a module where the user can input css code inside a InputfieldTextArea on the module configuration.
    Normally I would just let the user insert a path to a file, but in this case I want the user to be able to insert css code.

    I am outputting the value of the field like this:

    <style> <?= $this->sanitizer->purify($myModule->customStyles); ?> </style>

    How would you guys prevent malicious code getting saved to the database? Or is ProcessWire sanitizing the value automatically on save? (The module setting will only be available to superusers).

  7. I just stumbled across this post and wanted to share a very simple solution if you create a InputfieldTextArea with the API and want it to automatically resize based on the content:

    $f = $this('modules')->get('InputfieldTextArea');
    $f->name = 'myText';
    $f->label = 'Text';
    $f->attr("oninput", "this.style.height = ''; this.style.height = this.scrollHeight +'px'"); // this line
    • Like 1
    • Thanks 1
  8. On 11/5/2022 at 1:56 PM, Andy said:

    I was able to install without errors. With the configuration utf8 MyISAM

    When a delete COLLATE=utf8mb4_0900_ai_ci

    Other way with configuration utf8mb4 MyISAM - gives an error:

    A SQLSTATE[42000]: Syntax error or access violation: 1115 Unknown character set: 'utf8mb4mb3'

    My version MySQL 5.5.62

    I can replicate the install error with the configuration "utf8mb4". Using "utf8" with either "MyISAM" or "InnoDB" works for me.
    Deleting the line "COLLATE=utf8mb4_0900_ai_ci" in install.sql is not working for me. I will have to investigate further. For now please use "utf8" instead of  "utf8mb4".

    • Like 1
  9. @Andy Thanks for reporting back!

    I just pushed an update (0.8) which should fix the issue with the file uploader. The file uploader now respect the extensions setting of the corresponding file field and shows an allert for unsupported file types. By default the video file field that comes with the profile (pg_video) only allows the extension mp4 (See screenshot). But you can add webm here if you want.

    1028994732_Bildschirmfoto2022-11-08um12_12_02.thumb.png.4b3e2adcf11437ade9b426cfa010627b.png

    • Like 1
  10. Hi @Gideon So

    Thanks! This will be fixed in the next version, you can ignore them for now, these errors should not break anything.  

    2 hours ago, Gideon So said:
    Failed to load resource: the server responded with a status of 404 (Not Found) fieldsettings.css

    This file is not needed anymore, I will remove the call for the next version.
    The rest of the errors are webpack related. I must have used the wrong build command, so should be an easy fix..

  11. @alexm Sorry for that! Not sure what is causing this. Can you please redownload the files and try again (in your gumroad mail click "View content" and than the button "View content" on the product). Also make sure to unzip the folder first and than upload the content to the location were you want to install the profile. The profile already comes with the wire folder included so no need to include ProcessWire yourself.  

  12. 12 hours ago, MarkE said:

    Pretty much! The only difference is that I was using a page ref field for the template, rather than a parent.

    Thats a great concept! I have to think about this.  You can also use a page reference field in a PAGEGRID block template to store a reference to a PAGEGRID item page. This allows you to render a PAGEGRID item on multiple pages (e.g. useful for headers or footers). If you change the content or styling of the referenced page it will update across your whole site.

    • Like 1
  13. @MarkE More options/tools are always great. But there might be some overlapping between our modules, I will send you a test version and you can see for yourself. PAGEGRID is no longer limited to CSS grid, it also supports flexbox and most common CSS properties. It's like ProcessWire and webflow had a baby, but that baby is still very young ?

    15 hours ago, MarkE said:

    One thing my design has is “pro-forma” pages - ie pages with pre-defined layout and dummy content that you can use to create similar pages.

    Maybe this?

    • Like 1
  14. @thausmann Thanks for your quick reply! 

    This was very helpful! It seems like filePutContents works great, but you have to give it the full path:

        <?php
    	//create ics file
        $icsgen = wire()->modules->IcsGenerator;
        $icsgen->set('date', '2033-12-24 12:00');
        $icsgen->set('dateEnd', '2033-12-24 14:00');
        $icsFileContent = $icsgen->getString();
        $icsFilePath = wire()->config->paths->assets.'files/'.$page->id.'/event.ics'; // use full path to create the file
        $icsFileUrl = wire()->config->urls->assets.'files/'.$page->id.'/event.ics'; // use relativ url to set the link target
        wire()->files->filePutContents($icsFilePath, $icsFileContent);
    	?>
    	
    	<!-- Link to file -->
    	<a href="<?= $icsFileUrl ?>">ICS File</a>

     

    • Like 3
  15. Hi!
    This is exactly what I need for a project I am working on.
    But the module is not generating any files for me. Maybe I am doing something wrong?

    Here is my code (testet locally on laravel valet and on a shared hosting server):

    function icsLink() {
      $icsgen = wire()->modules->IcsGenerator;
    
      // set single properties (date strings)
      $icsgen->setArray(array(
        'date' => '2033-12-24 12:00',
        'dateEnd' => '2033-12-24 14:00',
        'summary' => 'Event title',
        'description' => 'Event description',
      ));
    
      $icsPath = $icsgen->getFile();
    
      $out = '<a href="' . $icsPath . '">Merken</a>';
    
      return $out;
    }

    The function returns the link successfully, but when I click the link I get a 404. While the link points to a file (site/assets/cache/WireTempDir/.icsgenerator/0/ics-1663226011-413791867.ics), it seems like the file is never created. Any ideas?

×
×
  • Create New...