Looking for the proper approach - Add CSS/Markup-Modules while in Page Edit

[felic]

Hi,

sorry, the title is a bit hazy i am afraid...

I rather have some knowledge in building a proper CSS/HTML Structure for the sites i build. To keep it simple,- i build CSS-Modules in conjunction with the proper Markup. In the processwire context this means, those CSS-Modules are represented through defined groups of (processwire)fields.

What i like to achieve: Make it possible to add various, different Modules on the fly while in page edit mode. And, thats important, make it possible to change there position by drag&drop (reflects the order within the frontend).

As a first approach i though using Repeaters could fit. But all my attempts leads to a dead end in one way or another.

Reading a lot about PageTables, Page References and the like to see if this would be a good approach leaves me a bit stumped.

Maybe one you guys can give me a boot on this... Any suggestions? ?

I hope my description what i like to achieve is precise enough.

Thanks in advance, regards

felic

[bernhard]

13 hours ago, felic said:

I hope my description what i like to achieve is precise enough.

For me: No, sorry. I don't get it or maybe I'm misunderstanding it.

Do you want to add some css modules on the fly in the frontend when you are using some markup (eg add slider.css when using a slider html block)? Markup regions could then be a solution:

<region id="slider">
  <div>your slider markup</div>
</region>
<region pw-append="styles">
  <link rel="stylesheet" type="text/css" href="slider.css" />
</region>

 

[felic]

5 hours ago, bernhard said:

For me: No, sorry. I don't get it or maybe I'm misunderstanding it.

Looking on my yesterdays post with a fresh eye,- how one could possibly understand what i was talking about... Sorry.

No, i don't to add CSS/Markup on the fly to the frontend. Hopefully it becomes more clear if i'll be more descriptive ...

When i build client pages and it's specified what content elements the page needs, i begin writing the Markup/CSS (Plain HTML). This contains different kinds of content elements or/and content element groups which building a meaningful unit. Some call it Modules, some call it Components, some even don't have a name for it...

Examples (for Modules as i like to call them for now):

- Some Text with a Heading and Picture aside
- Picture Gallery with Captions
- List of employees (Picture, Contacts)
- <you name it>

When i am done with writing the markup/css i integrate this into the CMS: create appropriate fields, assign them to templates, populate the template files with the variables a.s.o.

The order and what is displayed on page edit screen is determined. Optional i can create fieldsets to group depending fields (representing the internal module) visually a bit. But that's it...

So, i was wondering if i can find a way that gives me (and the clients later on) a bit more flexibility on adding/reordering predefined content elements (e.g. Modules). 

 

Use case:

I am on a edit screen of some page (backend). Some kind of selection allows me to pick a available module (which represent a bunch of fields) to add to the page. For example the module "List of employees" (s. above). After that i select another available module (e.g. "Picture Gallery") and add it.

So the page looks like this:

<List of employees>
<Picture Gallery>

Next i like (drag&drop) to reorder the former added modules (to make sense,- this should reflect the display in the frontend of course. But that is not important for this use case) . 

So afterwards the page looks like this:

<Picture Gallery>
<List of employees>

Now i like to add another instance of the "List of employees" Module because there some more company divisions.

<Picture Gallery>
<List of employees>
<List of employees2>

Because the Division Boss is a VIP (so he thinks at least), i move the last "List of employees" to the top of page. 

<List of employees2>
<Picture Gallery>
<List of employees>

 

Hopefully this makes it more clear what i meant...

Maybe i am missed something that exist (forum post or in the processwire modules section) yet. 

regards
felic

 

[louisstephens]

I would just go with the page table field. This way, you can create different templates for the many "content blocks" with the appropriate classes/css.  When they are rearranged in the admin, the sorting should take place on the front end as well.

[dotnetic]

Take a look at Repeater Matrix a paid ProFields module, which could be what you want.

Someone here in the forums was building a "page builder", named DesignMe but seems to not have released it yet.

 

[bernhard]

... And search the forum for the term page builder. There have been several posts about this topic in the last weeks. And there are many possible solutions, not one.

See the link in my signature for the forum Search.

[felic]

Thank you all for your input! It helps a lot. As there is a straight deadline for a new client page, i 'd rather go with the matrix repeater for this time. Seems to have all i need. Nonetheless i'll keep an eye on further discussions on other page builder solutions.

bg
felic 

[Macrura]

I use page tables for this

[gmclelland]

See my document "Techniques for flexible page layouts in Processwire."  There are many ways to accomplish this https://docs.google.com/document/d/1peY-FUpevKgy87cKOxIVz8jwcv2-3c61zbiJr3QKO6c/edit#

The notes are rough, but I hope it helps someone.