gantry / gantry5

:rocket: Next Generation Template / Theme Framework
http://gantry.org
1.03k stars 207 forks source link

How to add a section to a existing outline? #1499

Open newjie opened 7 years ago

newjie commented 7 years ago

In docs, there is only a tutorial about how to add sections to a preset layout, but I think a more common scenario is people wants to add section to an existing outline. How to do this?

blizam commented 7 years ago

Outlines are still comprised of a Layout... you load the Layout Preset at the bottom of your Layout Manager... so you'd still need to either create a new Layout with the Sections you want, then load that newly created Layout Preset into your existing Outline

or

Override you're existing Layout

Copy the Layout YAML file to your Custom folder then make your changes

theme/custom/layouts/

http://docs.gantry.org/gantry5/advanced/file-overrides#gantry-theme-files

mahagr commented 7 years ago

Adding section to existing outline isn't possible from the UI; you need to follow the same instructions as with layout presets. File format is the same.

AmibeWebsites commented 7 years ago

@mahagr what is the technical limitation preventing building the capacity into the UI to add sections in Layout? I seem to recall you saying it wasn't possible but I'm curious to know more...

mahagr commented 7 years ago

There is no technical limitation, we actually had this feature implemented in early version of Gantry 5. The reason why we decided not to support it was that Layout UI became too complicated and hard to use. Another reason was that the sections really needed some CSS and settings, which needed template designer to implement extra logic to handle that. So the decision was not to allow user to change the layouts by requiring files to be changed directly.

Its not really that different from any other templates requiring you to modify their html if you want to add sections into them. Modifying files isn't that hard once you understand the basics:

http://docs.gantry.org/gantry5/advanced/creating-layout-presets

All of this said, we do have some plans to maybe add a new page for changing layout structure, but there are some features we'd like to finish before that (multi-language and frontend editing).

AmibeWebsites commented 7 years ago

Thank you @mahagr - this is the information I was looking for.

I hear you that it's easy to edit files and have no problem with that myself - my interest is in what the UI can do, and can explain more if you're interested. I feel this one request gets raised often in various forms and is certainly a big one for me (I've raised it before but with a different approach).

I'd like to mock-up how I see it working in a way that doesn't make the UI hard to use, covers the CSS requirement, and adds incredible flexibility for less technical users who don't find it easy to modify files. If you already have existing code from earlier versions I'm hoping it'll be relatively easy to implement - you'll be able to let me know once I've supplied a mock-up.

As an aside, where can I find out what you're planning for frontend editing?

mahagr commented 7 years ago

For myself I have been thinking of an approach where you are either editing the layout structure or adding particles into there. That would separate those two actions from each other and would offer simple interfaces to do both. The approach would also allow locking some of the functionality to designer only (ACL). What comes to section specific settings, I'm thinking of generalizing the CSS a bit so that you can choose how the section looks like from a few preset options. I think there has been a few issues on this before where there has been some discussion about the approaches, but nothing has been implemented this far.

There's really not much plans on frontend editing except that users would love to modify particles and particle module from the frontend.

AmibeWebsites commented 7 years ago

I wouldn't separate them, especially if one starts thinking about it from the frontend. I sat with a complete novice user yesterday, never even seen Wordpress, so I could see how they responded to stuff, the things they struggled with etc - the most obvious difficulty was wanting to edit the site directly and getting frustrated with the distinction between administrator and website. I've heard this many times since the years of Joomla.

But this feels like a whole big discussion and thinking about the potential of frontend designing both excites and boggles my mind... for now, I'll see what I can propose for addressing the request from @newjie (because I really want it to) and perhaps I can rethink it slightly in a way that can progress it towards frontend editing without it feeling complex, busy or overwhelming.

mahagr commented 7 years ago

You're now talking about frontend editing, right? I wouldn't separate particles from particle modules either -- except that the logic needed to implement this is different in both of them.

The main issue with frontend editing is really the security aspect; its much easier to attack against frontend, which is why all CMS'es tend to have separate backend with its own login.

newjie commented 7 years ago

I create a new test.yaml file under custom/layout folder, but when "load preset", it doesn't appear. Also I tried copy one of the layout presets from THEME_DIR/layout and rename it, but the UI still doesn't get it. What's do I need to do?

AmibeWebsites commented 7 years ago

@newjie do this... go into outlines, duplicate any existing outline (call it <_newname_>) and then 'edit' it... i.e. click the little Edit icon for that outline. Then select the Layout tab for your new outline and 'load' whichever existing preset is closest to what you are wanting. Now find the file under custom/config/<_newname_>/layout.yaml and edit that adding or removing whatever you want.

blizam commented 7 years ago

I think you just need to add an 's' to your folder... should be

custom/layouts/

AmibeWebsites commented 7 years ago

Here's a picture (see below). Please don't get too concerned by all the differences. My main objective is to get functionality to add a section.

So, just like there's a 'plus' icon for sections to add a new row, there can be one to add a new section. Perhaps a modal pops up asking a name and type, or to inherit from an existing section in another layout. Moving sections and deleting sections can work in a similar way to rows.

As for section CSS, I feel this should be brought into section settings in the modal that appears when clicking the cog icon on the right - that way everything that is part of 'setting up' or configuring a section happens in one place. I've made another suggestion that would facilitate this: #1498

Why all the other differences? A few reasons. One is that there's a concern about it adding too much complexity for the user - I'm hoping to show that the complexity could be reduced. It's not perfect but at least a starting point for consideration. Another reason is that by consolidating like this it should be very easy to apply the exact same thinking to provide full WYSIWYG front-end layout editing using overlays.

So what's happened?

Obviously all the Outline functionality has come in.

Particles are put into a draw. As soon as a particle is dragged the draw can slide away again. Particle Defaults becomes Particle Settings in the draw (consistent with the rest of the UI). Having a draw for particles would also provide a lot more flexibility for displaying particles as there is no longer a narrow column limitation.

Page Settings become Layout Settings (consistent with the rest of the UI). Potentially Style (as it relates to the layout, not sections), Content and Assignments also fall under Layout Settings (because that's what they are) but understandably this becomes unwieldy and would require further thinking. Assignments could anyway do with a little rethink.

Potentially the entire top blue bar could also fall away with Menu, About and Extra's being Plugin/Component sub-menu items utilising the standard functionality of the applicable CMS.

add_section

AmibeWebsites commented 7 years ago

With this feature request to (re)implement functionality to add a new section into a layout, along with the ability to reorder sections using drag-and-drop, it would be very good if the drag and drop also allows a section to be moved next to (left or right within a 'container') in addition to above and below. I see that width adjustment for this already exists.

Thank you.

w00fz commented 7 years ago

Sorting and adding new sections, including side-by-side sections, was some we had initially and later removed because it was too confusing.

Back at the first beta release of Gantry, after having discussed at length, we opted for not allowing insertion of new sections via admin. We felt that such option is something that adds too many unknown variables for a theme developer and maintenance of a theme would become a nightmare. Every section should be accompanied by a set of styles and that's something only a theme developer can decide how to deal with. There are also the cases where you want to have two sections vertically adjacent, with nothing in between, because a design might call for it. If the user was able to add any section anywhere it would produce pure chaos.

That said, I like your approach to Particles. I've grown annoyed myself by the sidebar dedicated to Particles. I think it takes too much room and makes the whole UX clunky. I love the idea of a drawer instead, that's something I will consider for a later release, for sure.

In the future I'm also willing to considering reordering of sections, at least the top level ones, and only in a vertical fashion.

AmibeWebsites commented 7 years ago

Understood.

Yes, I agree regarding the particles.

With adding sections not there, reordering is not such a big thing for me, but maybe the need comes up in the future. Certainly I would imagine there are other things that are more urgent.

alisamii commented 7 years ago

I agree with the Drawer idea. I also think that it would be nice if the top menu (where you can switch between outlines) would remain sticky to the top. On long layouts with lost of sections and particles, for example, if you are all the way at the bottom (footer) and need to make changes to multiple layouts footers, you send up spending a lot of time scrolling up and down after saving and applying.

w00fz commented 7 years ago

Made some progress with this. The sidebar is gone and with it a lot of the nasty logic I had for keeping it sticky which was a request long time ago and never really liked.

The drawer is fixed at the bottom and contains all the particles/positions like it did before. It's also collapsible so that it doesn't stay in the way if focusing on something else.

With this I also managed to fix a few issues that were related to the drag of the items whose position was somehow getting out of whack when scrolling.

gantry 5 dev - administration 2016-09-11 17-26-44

I still need to decided whether to add back the "Filter" input and if yes, where to put it as there's not much room in the drawer :) Although I think that it's valuable to have.

blizam commented 7 years ago

I gotta say I like the particle sidebar as-is... you can see all the possible particles better and vertical scroll > horizontal scroll... the point of the Layout Manager, mostly, is to add (and configure) particles to the Layout... so why hide them in a drawer? I'm not a fan of the now un-even width particles either... and the particle cateogory header (positions, system, particles) is now kind of lost...

Dragging left to right always felt natural to me... you have less space with a bottom draw and a top delete bar now than you did previously... you'll have to keep your view pane very centered to drag/drop efficiently

more horizontal space is always nice...

http://img.picturequotes.com/2/52/51739/sure-its-convenient-but-at-what-cost-quote-1.jpg

//2 cents

w00fz commented 7 years ago

Thanks for your feedback @blizam I'd really love to hear more on this matter by the community. So please share.

I think the flow feels more natural if you can drag and drop from the drawer upwards because it feels like you are in the layout already. When you drag from the sidebar you have to travel quite a lot more.

Centering your layout before dropping a new particle is not a bad thing, it's actually good because it forces you to acknowledge where exactly in the layout you want to do the manipulation. It is like focusing on an input field, in fact, it is a dynamic focusing. Your attention should be drawn to the portion of the layout you are planning your modifications.

So far it's always been that you align your particles list to the Particle you are planning to use, start dragging as that's where your focus is, and then scroll up/down until you find the portion of the layout you want to drop in. Often times, at least this happened to me, you have to let go because you realize you want a new empty grid, so you add that and then start over again.

I think the flow for this should be different, you should first align your layout to the portion your focus is meant to be and then deal with adding the new particle.

I want a new Particle in Header vs. In Header I want a new Particle.

I did some very rough time measuring and the drawer speeds up the process quite a bit. Mostly this is noticeable when dealing with far-right portions of the layout. When in sidebar, you have to travel across the whole screen to reach the right-most endpoint. With the drawer you always start from the middle and the vertical distance is always less than the horizontal.

Also, the benefit of the drawer and the automatic widths of the particles, is that now you have more Particles in view to choose from. On my screen (set to 1304px width), I get 12 Particles in view vs the 9 I get with the sidebar.

This is not to say that Drawer is right and Sidebar is wrong, I'm just explaining based on my little research what it felt more right and ultimately more optimized (UX and code wise). At the end of the day I feel like this is going to be one of those implementations where "personal preference" kicks in, but we can only provide one and I'd like it to be the one people agrees with the most.

So please, once again, do share your thoughts on this.

EDIT: Also a few other observations. With the drawer and the collapse/expand stored in a cookie so that it remembers your last state, you finally also have the option to completely ignore dealing with new particles. For example if you are done with a site and you just want to adjust size or settings. This is not at all possible with the sidebar, as that is omni-present no matter what you are trying to do in the LM.

ItsNatoriousB commented 7 years ago

From the looks of things, it looks like it would allow things to flow better. I can see how it could get in the way if you have a lot of particles loaded.

Would it be possible to have an option that allows the user to pick if the want the sidebar or drawer?

What about a drawer that scrolls vertically instead of horizontally?

Feasible to allow user sorting of the particles? Would being able to change the order to your liking cut down on having to scroll?

JoomFX commented 7 years ago

I really don't know if I'm for or against this change. Both the current and the Drawer implementations have their pros and cons.

That being said, I've never had any issues with the current implementation, but I'm not really using the Particle Sidebar that much - I built a universal layout filled up mostly with module positions and we use it in all our templates.

The trickiest part with this change is that the Layout Manager is used in many different ways - totally different approach on Joomla compared to Wordpress and, as you said, "personal preference" plays a big role here. Some people will love this change, others will overwhelm you with negative comments like "why do you change something that is not broken" and so on...

The only thing (for now) that makes me like the Drawer implementation is the better code (the nasty logic for keeping it sticky that you have removed). But this better code will never be noticed and appreciated by anyone.

As mentioned above, I also do not like much the uneven particle size, but again, it's most probably because I'm used to the current layout.

Djamil, you know that I'm all-in for a better UX but I'm not sure that we'll have it in the Drawer implementation - for sure it will be better experience for some of the users but it will be worse for others.

For me, personally, the current implementation looks better, more advanced, modern and interesting. The Drawer implementation looks more "basic" and I've also never been a fan of the horizontal scrollbars. The current implementation gives you a better overview of the available particles while in the Drawer you need to (horizontally) scroll a lot in order to see what's there. In my opinion, the current implementation gives you better overview of what the whole Layout Manager is about.

Djamil, I know that you've already put some time and work into the Drawer and you are probably keen on implementing it. Even though my comment might look like as I'm against it, I'm not - I'm just not sure if this change will bring a better UX and if it is needed in general. You know very well that it is impossible to satisfy everyone.

I'm really interested in what @adi8i , @newkind and the other WP users will say.

w00fz commented 7 years ago

Thanks @JoomFX, noted. This is the kind of feedbacks I'm looking for.

Like I said, I'm not totally set on this and willing to revert back if that's what the majority of people wants. I also haven't pushed the change in for this very reason.

If anyone is interested I could branch this implementation and make a custom CI Build out of it, for anyone to test out. Just let me know.

alisamii commented 7 years ago

Hi Djamil. I have been thinking about this issue since I last commented on it, and I think I am somewhat in the same space as Ivo.

The drawer has its benefits that are clear, from a better and cleaner code to a more layout-focused approach as you explained above. Having said that, the sidebar has other benefits, especially on larger screens such as my 27" iMac. Currently, with the sidebar, I see 21 particles. However, with dynamic-sizings particles in a drawer, I am not sure I will see more particles and may see fewer. And that brings about the question of horizontal scrolling, which is not ideal, especially when using a mouse rather than a trackpad.

If it would be possible for the user to adjust the height of the drawer (display 2, 3 or more rows), and have that be remembered in a cookie, that would greatly improve the drawer concept as it would allow users of larger screens to take advantage of their larger viewport.

I also like the idea of being able to reposition the drawer. Much like the Inspector in Google Chrome and Safari can be displayed on the side or below, it would be nice if the drawer position could be on the side or below (and still collapsible).

Although not related directly to the particles drawer, one thing that I find frustrating is having to scroll all the way to the top or bottom to save the layout (although apply and save is a huge timesaver here, so this is not as important), but even more frustrating is having to scroll all the way to the top to switch to a different outline. On a long layout, with lots of rows and sections, that means a long way to scroll to switch outlines. This is a personal pet peeve because if you are working on multiple different outlines, you sometimes have to implement similar (but yet not clone-able or inheritable) changes on multiple outlines, so you waste a lot of time scrolling up and down.

However, this could potentially be solved if rather than just a particles drawer, we could have a control drawer with content that changes according to the display.

That would then take the gantry navbar (outline picker, styles, defaults, settings, layout tabs), the various buttons according to the selected tab (load, clear, recompile css, undo, redo, etc) and in layout mode, the particles and place then all in a drawer where they would be accessible at all times without the need to scroll. If the drawer could be resized as well (could have a drawer settings), that would help avoid the issue of horizontal scrolling.

AmibeWebsites commented 7 years ago

Thank you @w00fz for exploring this. A few thoughts...

If the main issue is horizontal vs vertical scrolling then move it to the left rather than the bottom. That would also make it less of an adjustment from how it currently is so the "I like it the way it was" is minimized.

Also, why not have many lines rather than one so that when the draw opens there's a good chance of seeing all particles at once? The moment you start to drag a particle the draw can slide away showing the layout again. This would then also accommodate the filter if still needed.

The different length particles should not be too much of an adjustment as that's how it is when adding a particle (or widget/module) in Menu Editor and adding widgets/modules in Layout.

Either way there's no loss of screen space but a gain in horizontal space and less visuals on the screen at one time.

Happy to play with a CI version once ready...

mahagr commented 7 years ago

I just played with the new drawer particles picker and I kind of like it, especially on smaller devices (and vertical display). On normal screen resolutions (1920p and 2560p) you can see about the same amount of particles at once and the new implementation feels slightly more responsive, though the difference isn't that huge. On the other hand particles are harder to find in the new implementation as you cannot memorize the location of the particle anymore.

I think this is a great improvement on smaller devices (read tablets), but on larger screen there's really no obvious gain unless there was something extra like undo/redo/load/clear/save on the sticky area as well. In fact in large screen it makes more sense to have particles on the left as they were before to save some vertical space.

Still, I think the new look makes much more sense if you use mobile devices and as such makes it a good change to have.

PS: What if we moved Positions/Particles titles to be 2 separate tabs? In that way most particles would show up without scrolling even in smaller screens.

JohnMica commented 7 years ago

While I haven't used the framework in a while (waiting for it to be on grav stable :) ) I can say that developing on mobile is not really a good option no matter how you look at it so I guess the argument about. Ericka scrolling and stuff doesn't really hold that much value. Having a sidebar or drawer, it really doesn't matter that much visually, it's personal preference that makes it different. So my 2 cents goes as it follows: What if the drawer/sidebar was to autohide when not in use and have a narrow bar labelled particles / modules thus giving a larger view of the layout? Like admin on grav type of thing? If sidebar - is simpler to achieve the scroll to right. For drawer slide up could be done as well - overlay, change focus, hide other parts while active type of thing ? I was fine with the sidebar as visually it was "there"

blizam commented 7 years ago

Having read through the comments here I like the idea of having the drawer on the side the best... while making changes on mobile is a nice to have, I gotta believe that most designers are using a desktop to build out a site and so I don't see the improved mobile experience here outweighing the desktop experience.

I'm still very against horizontal scrolling.

I do like the collapsible idea in general, especially as mentioned when you're done building a site and mostly want to edit existing Particles... If you could drag the drawer to the left right or bottom (pop-out even?) I think that would satisfy everyone and then some but I say that without knowing at all what would be involved in that.

If I forget to add a Grid in advance, that's on me... and I don't see how having the bottom drawer would make that easier... and if I didn't perfectly center the Section I want to add something to I do like being able to hold a particle with my mouse and I can still scroll up and down by holding the particle against the top or bottom of the screen... would I lose the ability to scroll downward with the drawer being there?

Particles feel like a natural sidebar item to me... my content lives in the large vertical scroll space and my Particles are like my available toolset, easily grab'able/accessible on the left like the tools bar in Photoshop or just about any other design software... I guess I just like left to right over bottom up

marktaylor46 commented 7 years ago

I personally don't like the drawer idea for the particles picker - as suggested above I'd rather that we just add the ability to close and open the existing sidebar - this would give the screen real estate that people seek on mobile.

As another suggestion for mobile maybe we could shrink the lozenges down a lot more to just the icon and then a tooltop over the particle to state what it is when you think you have the right one.... we could evern then have multiple icons per line too?

Just an idea.

ghost commented 7 years ago

I am not too fused about this changes. I don't like horizontal scroll also fixed sidebar is kind of hacky.

The truth is that users compare everything with what's popular. Nowadays they compare everything with Visual Composer, most of the feedback i see is based on it. Which I don't fully agree, but you can't fight against market.

Maybe a vertical drawer will work too ;). Is true that horizontal drawer looks good on mobile. A vertical drawer which goes full width on mobile will looks good too.

On WordPress can be guessed, you have to use multiple outlines there's no choice, anyway the other options is to create pages. I still think a mix of outlines and modules / widgets is the way to go, based on each project.

What matter most is the code itself, i am a bit crazy about clean code, drawer or fixed sidebar... particles will work the same way.

bevvels commented 7 years ago

Horizontal scroll is messy. Section 'Positions' and 'Particles' with tabs. Offset '+' to left (or right )so it doesn't obstruct the workspace. If you end up adding more particles than the space can handle, add vertical scroll to the tab :)

gan-mck

w00fz commented 7 years ago

That actually looks pretty good. My only worry is that now it would cause the opposite problem, where too much of the vertical space is taken and it could out focus the target location when one intended to drop the new particle.

AmibeWebsites commented 7 years ago

Am I missing something? I understood it would be a draw and so slide away when not needed, taking up practically no space, whether vertical or horizontal... admittedly I've never coded drag-and-drop interfaces so am unfamiliar with the intricacies.

w00fz commented 7 years ago

Yes that is correct, when the drawer is closed. What I meant is that if you scroll your layout at a certain point, when you open the drawer, being this tall, it might cover up the section where you were looking at, forcing you to scroll down again to put that section in view.

If that makes sense.

MaksymJ commented 7 years ago

hi, i like current layout and agree to @JoomFX i don't like horizontal concept ... for testing purposes i think maybe if it will better to be added as a "Second option", i mean switchable option somewhere in settings :) also i like @marktaylor46 idea!

A-Kasaaian commented 7 years ago

I have an idea. I'm not good at drawing but I tried to show a concept in the attached sketch. I think it would be the best if we have three buttons which show a scroll-able list of particles, atoms and positions. csfumwfwiaam6qk

w00fz commented 7 years ago

Thanks for taking your idea here from twitter, @A-Kasaaian!

I really like this concept. The thing I like the most is how Particles and Positions are separated into their own containers. I can see the list being a little taller and perhaps in two columns. There's even room for a filter with this concept.

We don't really need Atoms anymore in this view, as they have been taken out since v5.3 (I think it was that?) and they now reside in Page Settings.

I also like how very little footprint this offers. It's there in your face but doesn't interfere much with the layout. We would still benefit from cleaner code and full width Layout.

Also, while discussing with @rhukster, he basically proposed the same idea as @bevvels but on a vertical mode. A permanent fixed and floating sidebar, similarly in look and feel as it is the current sidebar we have now, but collapsed and expandable only on hover (or touch). As the user starts dragging the floating sidebar would collapse.

I think overall there are a lot of similar concepts and very good ideas in here and I thank you all for having taken the time to discuss this matter. I think we all agree that we should have a way, somehow, to benefit of a full width Layout, rather than what we have today.

I will be looking at taking some of your guys concepts and ideas and put them together into one implementation.

I will post back with updates when I have some.

Thank you so much!

A-Kasaaian commented 7 years ago

@w00fz it's my pleasure. Yes you are right, atoms are not there since v5.3 . I love your idea about filter, it would be amazing if there be a search box on top of the list in my concept to search for particles which will be a great help to us. I thought about buttons on left or right side but I think that's not handy. On left we have info of last particle of sections and on right we have option icon of sections, so that I preferred to place them on the bottom. In my opinion moving them to top, below the top menu is good too.

alisamii commented 7 years ago

@w00fz I like the idea of a vertical drawer on the left that collapses. As mentioned previously by someone else, the particles can be looked at much like as tools in Photoshop. Granted that the tools in Photoshop are by default just icons, so the footprint is really small, but by making it a hide-on-drag drawer, we resolve the footprint issue. It could possibly also allow pinning the drawer in an open position (which would in effect replicate the current layout.

I still think that it would be valuable, while rethinking the LM, to explore ways of keeping the Outline Switcher, the Save, Undo, Redo and other "action items" visible at all times rather than having to scroll all the way up to get to them. I mentioned this before in my earlier reply to his topic, but I think it fell through the cracks, so I am hoping to underscore it to see if anyone else agrees with me, and if so, what opinions there are about how best to implement this.

A-Kasaaian commented 7 years ago

I think giving fixed position to the Outline Switcher, the Save, Undo, Redo and having them stuck to the top of page after scrolling is another good idea in my opinion. something like the way I styled in the screenshots below (first one before scroll and second one while scrolling). It will make them accessible throughout the page and will cover @alisamii request too.

before-scroll

after-scroll

alisamii commented 7 years ago

Hi @A-Kasaaian . I was referring more to the actual Outline Switcher (In your first screenshot, the dropdown menu which currently displays Home).

As regards the Load, Clear, Save Layout, Undo and Redo buttons, I like your idea, but having floating buttons like that is visually disturbing. They would need to be in some sort of block with an opaque background rather than floating freely.

I think it would make more sense to move the Gantry logo into the blue bar, moving the buttons into the grey bar, and having that whole block remain sticky (or even show/hide on scroll as headroom.js does).

LukeDouglas2 commented 7 years ago

Just my two cents but having the Positions and Particles in their own collapsible accordian slider on the left would work better for me. If you decide to move to the bottom, then I would definitely recommend having a Position and Particle dynamic sliders (expanding upwards) to show the different options. I live by the motto of 'the more the merrier' like JoomFX! When I first install Gantry's Hydrogen template, I delete the home template, go to the Base Outline Layout and load up the Gantry 4 layouts, then populate them with three module positions each (usually works for most of my sites) and then make the default section inherit the Base Outline. If I find a need for a 'specific' layout that this doesn't fit, I duplicate the template, load the layout that fits my need or manually create my own by editing the files directly which I assign to the menu link that needs the special layout.

I do have some suggestions but those can wait for another thread!

AmibeWebsites commented 7 years ago

I'm enjoying hearing how others work with Gantry. Such diversity of creative perspectives

I completely do away with Widgets and Widget Positions (Wordpress), and am about do drop the Page Content one also in favor of a particle I use that accounts for 80% of anything I want to do in a layout. I've noticed also that while typically I have just the default and home layouts, this is changing such that I can easily have up to ten different layouts - inheritance makes that so easy and versatile.

One thing that would clear up the particle space a little is if the ones I disable are not shown. Of the ones that come with Hydrogen, Positions and Particles, I only use 7 (and would still love it to slide away).

mahagr commented 7 years ago

You can disable them from particle defaults tab and they shoudln't be showing up (unless they are already in the layout).

AmibeWebsites commented 7 years ago

I've been subtle about my suggestions so far. For me this is less about whether particles are horizontal or vertical and more about getting it off the screen, or more specifically, getting EVERYTHING off the screen.

Please allow me to be more direct and explain: https://wptavern.com/godaddy-launches-new-onboarding-experience-for-wordpress-customers - watch the 2nd half of the onboarding video where the site is edited in a WYSIWG, real-time fashion.

It's a game changer.

In one of my conversations with @mahagr there was mention of editing the theme in the front-end. For me this is now urgent. And my feeling is that it's really just an adaptation of the layout manager, with all functionality off the screen in draws that can be pulled out when needed or accessed when mousing over a section or particle area (just like you can see in the onboarding video).

No matter what page being viewed on a website (front-end) I imagine being able to:

  1. [Layout draw] See what layout is being applied
  2. [Layout draw] Edit settings for the currently applied layout, including Styles, Content, Page settings and Assignment (these can all load in a light box modal)
  3. [Layout draw] Duplicate the layout (and assign to current page or edit assignments for new layout as part of duplication process)
  4. [Particles draw] Add new Section (I know, I know!) or Particles/Positions (that affect the currently applied layout)
  5. [per Section in layout] Add new row in Section or edit Section Settings
  6. [per Particle in layout] Resize or edit Particle Settings ... as well or Sort or Move the Grid

Some reading possibly motivating this topic:

JoomFX commented 7 years ago

The video that @dudewithamood posted above reminds me of the Page Builder that my friend Marius Hogash built for their quite popular Kallyas WP theme. So I'm pasting a video of this Page Builder just so you can see how it works and eventually get some inspiration from it 😉

TonyTheTech commented 6 years ago

@newjie Were you ever able to figure this out? I am in the same boat. Created a wordpress child theme based on helium, followed the gantry5 docs section titled "Creating Layout Presets".

I even changed the "present" settings in the yaml file to have single quotes around the "image:" value and adding a "name:" property and value. Not sure if these are needed as they do not exist in the docs, but they exist in yaml files that come with the themes.

But when I go into the gantry theme admin, my custom preset doesn't exist in the list. Tried deactivating/reactivating the theme and still no luck. I feel like I am missing a crucial step that may have been left out of the docs, spent several hours googling with no luck.

Also tried following these steps provided by @AmibeWebsites but no new folders or files are created in the custom folder. However, not sure if this functionality was removed in a newer gantry5 version.

do this... go into outlines, duplicate any existing outline (call it ) and then 'edit' it... i.e. click the little Edit icon for that outline. Then select the Layout tab for your new outline and 'load' whichever existing preset is closest to what you are wanting. Now find the file under custom/config//layout.yaml and edit that adding or removing whatever you want.

LukeDouglas2 commented 6 years ago

I've added sections many times but only in Joomla as I am a Joomla shop. Don't have a clue on WordPress. Sorry! :(

mahagr commented 6 years ago

Presets aren't outlines so you need to create a new outline from preset and check the drop-down in there.

Pixelpaule commented 6 years ago

Hey guys,

at first i want to thank you for your awesome work on gantry 5. For me it is one of the best template frameworks ever. But I think the layout builder/manager could need some awesome more features. In example the page builder 3 from joomshaper is an awesome tool for creative ones. Especially the possibility to work in the frontend via drag and drop editor is so great. And you can add, move or remove sections and addons how you want. Gantry working with such an editor would be the perfect tool in my opinion.

What are your future plans?

Have a nice day! Pixelpaule

oxido21 commented 1 year ago

Hi, What if we can have a toggle button, to switch between Sections & Rows + Particles? And to keep it simple, you can add a new section only to right and under of each already existing sections. Similar to what I did here: