Question about Customizing Component Placement

[Sam Jones]

Hello Everyone!

I'm new to the group, new to Hippo, fresh out of the training, and I have a big question.

I'd like to be able to have zones in the layout within which I can freely place and scale components, and I'd like to have a WYSIWYG interface so that people can drag components in, like they do from the page editor, but also place components exactly within that zone, like they can't from the page editor.

We need to produce these layouts on a page-by-page basis. Each page needs one and often more of these zones with custom placed components.  I was thinking that possibly there would be another component that could place a div and display its content but also style those contents within that div.  Does anyone know if this has been done?  Does anyone have an opinion as to whether this task is practical?

Thank you very much for your help, and I hope to hear from you soon.

-Sam Jones

[Ard Schrijvers]

Hey Sam,

On Thu, Mar 12, 2015 at 8:32 PM, Sam Jones <samgu...@gmail.com> wrote:
> Hello Everyone!
>
> I'm new to the group, new to Hippo, fresh out of the training, and I have a
> big question.

A big welcome and always good to start with fresh big questions :)

>
> I'd like to be able to have zones in the layout within which I can freely
> place and scale components, and I'd like to have a WYSIWYG interface so that
> people can drag components in, like they do from the page editor, but also
> place components exactly within that zone, like they can't from the page
> editor.
>
> We need to produce these layouts on a page-by-page basis. Each page needs
> one and often more of these zones with custom placed components. I was
> thinking that possibly there would be another component that could place a
> div and display its content but also style those contents within that div.
> Does anyone know if this has been done? Does anyone have an opinion as to
> whether this task is practical?

IIRC for a customer (other devs hopefully chime in here) they created
a page prototype grid with just a lot of rows and columns. When
creating a new page from a prototype page [1], [2] in the channel
manager, they just see a large grid of many rows and columns, in which
they can drag drop container items. The rows they keep empty I think
were skipped when visited by real website visitors outside the channel
manager.

A bit of a similar but bit different approach I tried in a sandbox
project about a year ago, is to have prototype pages with many empty
container rows in which you could drag drop container items. The
container items themselves would scale automatically (as in get the
bootstrap span1, span2, span3, span4, span6 or span12 style) depending
how many other items there are in the row. This worked out pretty
well. Next step was to also be able to specify on some container items
a fixed width (as in span1, span2, span3 etc) via the component
properties window in the channel manager. Unfortunately, I never made
it to actually do this last step, but expect no more than two hours
(if you know where to look :-) ) to be able to add this as well.

It looks as in the screenshot I attached. You see 4 rows, all
containing the exact same 'list' container item, but depending on how
many there are in the row, they auto scale.

Let me know if this is along the lines of what you need. I just tried
my old sandbox project which I created against the trunk back then, so
it doesn't completely work, but if needed, can provide a working one.

Regards Ard

[1] http://www.onehippo.org/library/concepts/hst-configuration-model/prototypepages-configuration.html
[2] http://www.onehippo.org/library/concepts/template-composer/page-management.html

>
> Thank you very much for your help, and I hope to hear from you soon.
>
> -Sam Jones
>

> --
> Hippo Community Group: The place for all discussions and announcements about
> Hippo CMS (and HST, repository etc. etc.)
>
> To post to this group, send email to hippo-c...@googlegroups.com
> RSS:
> https://groups.google.com/group/hippo-community/feed/rss_v2_0_msgs.xml?num=50
> ---
> You received this message because you are subscribed to the Google Groups
> "Hippo Community" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to hippo-communi...@googlegroups.com.
> Visit this group at http://groups.google.com/group/hippo-community.
> For more options, visit https://groups.google.com/d/optout.



--
Hippo Netherlands, Oosteinde 11, 1017 WT Amsterdam, Netherlands
Hippo USA, Inc.- 745 Atlantic Ave, Eight Floor, Boston MA 02111,
United states of America.

US +1 877 414 4776 (toll free)
Europe +31(0)20 522 4466
www.onehippo.com

[Minos Chatzidakis]

Hi Sam,

Welcome first of all, secondly, I also have some big questions!

On Thu, Mar 12, 2015 at 9:43 PM, Ard Schrijvers <a.schr...@onehippo.com> wrote:

Hey Sam,

On Thu, Mar 12, 2015 at 8:32 PM, Sam Jones <samgu...@gmail.com> wrote:
> Hello Everyone!
>
> I'm new to the group, new to Hippo, fresh out of the training, and I have a
> big question.

A big welcome and always good to start with fresh big questions :)

>
> I'd like to be able to have zones in the layout within which I can freely
> place and scale components, and I'd like to have a WYSIWYG interface so that
> people can drag components in, like they do from the page editor, but also
> place components exactly within that zone,

I don't understand what you mean with "place components exactly within that zone". Are you looking for some way of "fixing" particular components into particular areas? "Fixing" in the sense that no editor can move them or remove them or change their parameters in the page editor. 

Or are you trying to restrict what components can be dragged where?

 

like they can't from the page
> editor.
>
> We need to produce these layouts on a page-by-page basis. Each page needs
> one and often more of these zones with custom placed components. 

Custom placed components? Like in "fixed"? Or custom as in, "the editors can customise them" ? Whom is this placement custom for? The developers or the editors?

 

I was
> thinking that possibly there would be another component that could place a
> div and display its content but also style those contents within that div.

It's not very clear to me what you mean with "another" component. 

Any component, draggable or not, can have an html output, like the div you mention. Also the component's template (jsp) has access to the component parameters that you set in channel manager, so you can simply create the parameters that you need to affect styling. But I guess this isn't what you're asking... can you elaborate a bit perhaps?

 

> Does anyone know if this has been done?  Does anyone have an opinion as to
> whether this task is practical?

IIRC for a customer (other devs hopefully chime in here) they created
a page prototype grid with just a lot of rows and columns. When
creating a new page from a prototype page [1], [2] in the channel
manager, they just see a large grid of many rows and columns, in which
they can drag drop container items.

We actually didn't go for a grid cause that would limit you in case a component needed to be rendered to the full width of your html page. So we didn't define columns. What we did was that each page contained 12 rows and editors would drop components in and then select (from a drop down list in the component parameters) the width of the component. The values that the editors were presented with in the drop down, were like "half width", "one quarter", "two thirds" etc. They were using bootstrap for layout, so this selection was resulting in simply rendering the proper span (span1, 2, 3 etc). 

 

The rows they keep empty I think
were skipped when visited by real website visitors outside the channel
manager.

Indeed

 

A bit of a similar but bit different approach I tried in a sandbox
project about a year ago, is to have prototype pages with many empty
container rows in which you could drag drop container items. The
container items themselves would scale automatically (as in get the
bootstrap span1, span2, span3, span4, span6 or span12 style) depending
how many other items there are in the row.

This sounds very nice Ard! But yes as you mention later in your answer, it's very probable that you need particular components to have a specific width.

thnx,

Minos

--

--

m.chat...@onehipo.com

Amsterdam - Oosteinde 11, 1017 WT Amsterdam
Boston - 745 Atlantic Ave, Eight Floor, MA 02111