Topic Closed
juergen
1.5K Posts
54.4K Downloads
16 Plugins
design, web development & visual effects

Great to see 4.4b1!

I'm currently making headway with my SectionWrapper plugin.

Wrappers are the last missing piece of the puzzle to unleash the magic of grid-based layouts and other nice design enhancements in gpEasy.

But there is one thing I cannot resolve without a modification of the Render() function in /include/tool/SectionContent.php and that's the recursion for nesting sections.

Maybe it could be done with a new Hook but I cannot imagine if/how.

Josh (and of course anyone interested), would you please check the current plugin -> SectionWrapper_0.3a.zip.
If a Hook is possible to achieve the recursive rendering without modding the core system, it would be great to have it in a future gpEasy version.

Another option would be to include my modified rendering (or sth. similar) into the gpEasy core. Impact on rendering speed and memory consumption is hardly measurable in my tests.

The current approach to replace SectionContent.php is not exactly a useful solution.


Some notes about how to use the plugin:

  • Install (and replace SectionContent.php in /include/tool/)
  • New content type "SectionWrapper" is now available. Create one.
  • Edit the new Wrapper. Now you can drop other sections into it
    (you can also drag other sections around, this can also be done in the editor's tree view).
  • Save

"Move up" and "Add Section" do not yet behave as expected. That's what I'm currently working on.


The current default style of the wrappers is for testing purposes. I'm planning to add some useful presets and helpers for that later.

Any feedback is much appreciated. Thx

 

5 years ago#7352

Josh S.
2K Posts
283K Downloads
16 Themes
18 Plugins
Thanks Juergen. I took a quick look at the code in your addon to see if I could figure out how it works. It appears you use a SectionType to insert the beginning of the wrapper in one section and the end of the wrapper in another section. Is that about right?
5 years ago#7353

juergen
1.5K Posts
54.4K Downloads
16 Plugins
design, web development & visual effects

Hi Josh,

I took a quick look at the code in your addon to see if I could figure out how it works. It appears you use a SectionType to insert the beginning of the wrapper in one section and the end of the wrapper in another section. Is that about right?

No, this is what I did and discussed with Eric some 2 years ago :-)
If you downloaded the code from this website http://gpeasy.grafikrausz.at/SectionWrapper - forget this one, its old.

The new one (attachment: SectionWrapper_0.3a.zip) is completely different. It stores wrapper as single sections within the flat page structure.
The nesting is done…
A) in Admin mode using Javascript/jQuery with DOM manipulation
B) in normal viewing mode on the server side. And this is where my recursive GetSection() funtion jumps in.

The whole concept is like this:

Storage:

[section (any type)]
[section type="wrapper_section" contains=2]
[section (any type)]
[section (any type)]
[section (any type)]

Rendering:

<section></section>
<wrappersection>
      <section></section>
      <section></section>
</wrappersection>
<section></section>

So, wrappers simply store the count of following sections they will contain at rendering time.
The recursive nested rendering method will allow even multi-level wrapping. The trick is quite simple.
The complex part is to keep section indexes and Area Ids in order so they won't mess up when things are being stored. But the latter is done by the plugin and it works quite nicely.
It's only the server-side rendering which I cannot influence without a Hook or monkey-patching (which isn't possible in PHP).

The Render() function changed from a foreach to a do/while utilizing a counter and calls GetSection() for each page section.
GetSection() checks if a section is a wrapper. If it is, it will render the wrapper and does a recursive GetSection() inside, incrementing the counter and returning the content.

My changes in SectionContent.php have comments about that.

Edited: 5 years ago#7354

juergen
1.5K Posts
54.4K Downloads
16 Plugins
design, web development & visual effects

So, if GetSection() was a Hook, it would have to be called within the Render() loop.
The problem is: If GetSection() does multiple recursions, which is it's purpose, it would have to return both the content and the count of already included sections to the Render() funtion. The already processed sections would have to be skipped inside the Render() loop to avoid double rendering.
I could not find an elegant way to do that within a foreach iteration, so I changed it to a do/while using the $sectionCounter value to target the sections individually.

( /edit: My current mechanism uses a technique which would be called "pull processing" in the context of XSLT, which means to target nodes specifically. Of course, a much more elegant way was to use "push processing", which means to always pass a remaining subset of nodes/sections to a recursion - this could avoid the sectionCounter. While I always use push processing in XSLT, I lack the experience of array and iteration methods to do so in PHP ;-)

Edited: 5 years ago#7355

Josh S.
2K Posts
283K Downloads
16 Themes
18 Plugins

Really nice functionality, I think we need to make this a part of gpEasy!

The section sorting within the popup window is really slick.

I'm thinking we might replace the "Options", "New Section", "Copy" and "Remove Section" links with a single "Edit Sections" or "Manage Sections" link. This would bring up your interface with some additional functionality for adding/copying/removing/.. sections.

What do you think?

5 years ago#7368

juergen
1.5K Posts
54.4K Downloads
16 Plugins
design, web development & visual effects

What do you think?

Awesome!
But give me 1 day or so to think about it. Primary objective surely is to keep the UI/UX simple for simple user cases.

5 years ago#7369

Josh S.
2K Posts
283K Downloads
16 Themes
18 Plugins
I'm actually already a good ways into it. I hope to have a beta release out later today!
5 years ago#7370

juergen
1.5K Posts
54.4K Downloads
16 Plugins
design, web development & visual effects

…release out later today!

OMG ;-)

BTW: I've made up a pic of a - as I think - typical user case utilizing wrappers and grid elements.
see: gpeasy.grafikrausz.at/Wrapper_userCase.jpg

On the right is the CSS needed to make such a layout work. This would have to be part of the theme.
For the grid elements i used bootstrap col-md classes.

The main problem with wrapper IMO is:
Most people who actually understand how grid layouts work, will have at least a clue of CSS. These folks could also use CKE Source to code their grid elements within a single section (.row)

Making wrappers + grid layouts usable for people without coding skills is a real challenge.
It definitvely needs some helper tools, which could be

  • selectable grid classes
  • real-time visual feedback
  • some sort of easily accessible explanation (at least a good weblink)

Assuming, we're using Bootstrap/Bootswatch themes, almost all classes are already available, but custom coded themes are way clearer/smaller/faster.
I wonder how this could be brought together...
 

5 years ago#7371

Josh S.
2K Posts
283K Downloads
16 Themes
18 Plugins

OK, just released 4.4b3 with your section wrapper content type with section options, copy, new section and remove section built in.

Note, the output of a section wrapper is a little different from your plugin. It doesn't use <div class="section_wrapper_inner">.

Most people who actually understand how grid layouts work, will have at least a clue of CSS. These folks could also use CKE Source to code their grid elements within a single section (.row)

Certainly, though the wrapper makes it easier to put a gallery section in the same row as a text section

It definitvely needs some helper tools, which could be

  • selectable grid classes
  • real-time visual feedback
  • some sort of easily accessible explanation (at least a good weblink)

I think the real-time visual feedback is pretty well set with the new interface.

Selectable grid classes is a bit more difficult since a user might not be using a Bootstrap theme. I think it would be extremely helpful, but I'm not sure how to go about it.

The documentation would be a good place to start explaining. I'll try to make some time for that.

5 years ago#7372

juergen
1.5K Posts
54.4K Downloads
16 Plugins
design, web development & visual effects

It's 2 am here but I immediately gave it a go. 

Josh, man, that's fantastic!

 

sth. like …

#section_sorting {
  max-height: 412px;
  overflow-y:auto!important;
}

…will be needed, otherwise the list could grow out of bounds.
Or even better…

$(window).on("resize", function() {
  setSectionSortingMaxHeight();
});

function setSectionSortingMaxHeight() {
  var  listMaxHeight = window.height() - $("ckeditor_area").offset().top - 180;
  $("#section_sorting").css( { "max-height", listMaxHeight + "px" } ) ;
}

setSectionSortingMaxHeight() should also be bound to the ckeditor_area draggable stop callback.

 

Edited: 5 years ago#7373

juergen
1.5K Posts
54.4K Downloads
16 Plugins
design, web development & visual effects
And for that matter: "Manage Sections…" translates to "Abschnitte verwalten…" in German language.
5 years ago#7374

Josh S.
2K Posts
283K Downloads
16 Themes
18 Plugins

Awesome, glad you like it!

Hadn't even thought about the max-height. I'll add that and the translation tomorrow.

5 years ago#7375

feniweb
298 Posts

For the customer it needs a declaration table of the possible values css

It would be nice if man could write this as admin directly into the Section Attributes window.

You picture it. I have written directly to the file, however, is not the very ideeal.

Here are some links to very good solutions.

http://www.layoutit.com/build?r=94395674
http://gridster.net/#demos
http://innovastudio.com/builderdemo/example1.html

Thank you for your valuable work.

Edited: 5 years ago#7376

juergen
1.5K Posts
54.4K Downloads
16 Plugins
design, web development & visual effects

Eric and me discussed that topic some 2 years ago here http://gpeasy.com/Feedback?id=100
My proposal to put selectable class declarations into the theme css would be convenient for theme designers but AFAIK not so easy to implement technically.
An additional SectionClasses.ini in the theme directory could also do the trick and would be easier to process.

But if we had a hook/filter for the section attributes I could imagine to make a plugin with an Admin GUI for setting up available classes to be used by editors.

Layoutit and builder are good examples of simple content layout UIs. I'd imagine sth. like this. The main difference to gpEasy is, that those engines provide droppable section combos (like 2 text columns, text + image, etc.). Hmmm.

BTW: Feniweb, the websites you create look good, have you considered showing some of them them here?
 

Edited: 5 years ago#7377

Josh S.
2K Posts
283K Downloads
16 Themes
18 Plugins

I'd say InnovaStudio is my favorite of those three. The menu of available sections is very intuitive.

Here's my breakdown of what gpEasy would need to accomplish something similar:

  • Ability to provide droppable section combos as Juergen suggests
  • Editor with visual representations of sections instead of just "Editable Text", "Image Gallery" etc
  • Default content for a section to include images
  • Ability to customize available droppable sections for theme designers

 

5 years ago#7378

juergen
1.5K Posts
54.4K Downloads
16 Plugins
design, web development & visual effects

I already tried such things in the past and they worked... well, not all that bad.
I made section types with default content like image+text or others using grid classes. I also used custom ckeditor templates.
The problem in all those cases - with default content like floating images or positioned divs - is, that CKEditor allows to delete or change these elements.

So section combos would be a good solution.  Sth. like
<wrapper_section><image_section/><text_section/></wrapper_section>

 

BTW: I fiddled a bit with the new wrappers. Wrapper-in-Wrapper, yeah! See http://www.grafikrausz.at:8080/sites/gpEasy4.4b3/
(Er... and… don't focus too much on the text, it's just quick and dirty and I told search engines not to index it :-)

I found that copying sections with the new section manager will lose the content of the copied sections after saving. I'm uncertain if this always happens or only in some situations.

5 years ago#7379

Josh S.
2K Posts
283K Downloads
16 Themes
18 Plugins

Yeah, ckeditor templates definitely aren't what we need. I think you're dead-on with section combos

http://www.grafikrausz.at:8080/sites/gpEasy4.4b3/

That looks awesome!

I found that copying sections with the new section manager will lose the content of the copied sections after saving.

Thanks, just fixed it

 

5 years ago#7380

Josh S.
2K Posts
283K Downloads
16 Themes
18 Plugins
Before trying to add more features the section manager, I think we should release gpEasy 4.4. Anything that needs attention before doing that?
5 years ago#7381

juergen
1.5K Posts
54.4K Downloads
16 Plugins
design, web development & visual effects

Anything that needs attention before doing that?

I find "0 DB Queries" in the new performance panel quite amusing. Are you planning sth. with DB?

5 years ago#7382

juergen
1.5K Posts
54.4K Downloads
16 Plugins
design, web development & visual effects
Off-topic and just a minor CSS thing:

#gp_admin_html pre could benefit from adding word-wrap:break-word;
to make CKedtior Current Config break long lines that don't contain whitespace.
5 years ago#7383

Topic Closed

 

News

elFinder 2.1.50 in Upcoming Release
12/28/2019

A new release for Typesetter is in the works with a lot of improvements including the ... Read More

Typesetter 5.1
8/12/2017

Typesetter 5.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

More News

HH-Support

Company located in T├│rshavn, Faroe Islands. * Webpage Design * Consultant & Provider of a wide range of programs for visually impaired and dyslextics.

Find out more about our Provider Spotlight

Log In

  Register