nested block, link group possible?

[joe_g]

I found that it's possible to render nested blocks!

I was hinting at this already, but wanted to double check:

So, I was wondering if it would be possible to make a "link group"? A visual group that I can drag other blocks into (image, text, video) that wraps the element in an <a> tag, then I could use subgrid to place the nested items according to the real grid - but i think ...not possible, right?

It would be amazing if i could place some image and text anywhere in the grid, group them and link them (so the hover can affect both the image and the text) - but I'm guess this is a bit too much at the moment? Just checking.

If I make a custom block, then the relationship between the text and the image has to be fixed, somehow.

[jploch]

This is definitely possible and would be relatively easy to integrate into the group template. I like the idea, but I'm a little concerned that users might accidentally create invalid markup. 

With this feature it would theoretically be possible to nest links. So if a group is linked and there is another text/image link in the group, that would not be valid HTML markup. It may be sufficient to display a corresponding warning in the link option for the group.

I will look into it and keep you posted.

[jploch]

@joe_g I added a link option to the group block. Please update the FieldtypePageGrid and PageGridBlocks modules to try it.

Let me know what you think and if this works for you please mark this thread as [SOLVED].

[joe_g]

Fantastic! Looking forward to try this somewhere this week!

[joe_g]

Hey I tried it and right now and it works. Thanks for this!

Some quirks i encountered

- The group block uses its own 12 col grid, and isn't a subgrid of the main grid. Not a huge problem

- the link field seems to be a string, such as "/link". I got around this by adding my own page reference field. 

- The biggest issue is that the thing you have selected isn't the same thing you resize. So if if you select an image that is a child of a group, it's not sure you are resizeing that child, it could be that you are resizing the group. Which one it picks for resizing is a bit random so for this i need to use the styling panel.

 

[jploch]

  14 hours ago, joe_g said:

- The group block uses its own 12 col grid, and isn't a subgrid of the main grid. Not a huge problem

Expand  

You can control this through CSS. Either using the style panel, or in code:

/* use pg class to control all wrappers */
/* E.g. Use 6 equally sized grid columns */
.pg {
    grid-template-columns: repeat(6, 1fr);
}

/* main wrapper */
/* optional set main wrapper to display block (default is grid) */
/* to only allow vertical dragging/sorting of direct children */
/* useful if blocks can have children */
.pg-main {
    display: block;
}

Please take a look here, for more styling options.
 

  14 hours ago, joe_g said:

- the link field seems to be a string, such as "/link". I got around this by adding my own page reference field. 

Expand  

Not true. It's using an autocomplete input that lists all your pages and saves an ID into a hidden field when you select one or write an URL. So it works like a reference field, but gives you the convenience that you can also add external links as a string (e.g. https://www.google.com/).
 

  14 hours ago, joe_g said:

- The biggest issue is that the thing you have selected isn't the same thing you resize. So if if you select an image that is a child of a group, it's not sure you are resizeing that child, it could be that you are resizing the group. Which one it picks for resizing is a bit random so for this i need to use the styling panel.

Expand  

Not sure what you mean with this. Sometimes it helps if you put a padding on the group so it's easier to select the group when it has items in it.

Another option is to use the item list and select it there:


Or use the item breadcrumb menu (located at the bottom of the page when you select an item):

[joe_g]

  13 hours ago, jploch said:

Not true. It's using an autocomplete input that lists all your pages and saves an ID into a hidden field when you select one or write an URL. So it works like a reference field, but gives you the convenience that you can also add external links as a string (e.g. https://www.google.com/).

Expand  

ah clever, 

if i look in the template i have these fields. There was only a text and an int-field.

Is it because i tried to upgrade from an older version? I just replaced the files, but maybe i need to uninstall/reinstall?

 

Or did you perhaps make your own autocomplete field? I dont get any suggestions when i try to write in the field:

 

/J

 

[jploch]

  11 hours ago, joe_g said:

Is it because i tried to upgrade from an older version? I just replaced the files, but maybe i need to uninstall/reinstall?

Expand  

The hidden field that saves the page id is called "pg_group_link_page" (int), which is present on your screenshot. So it should work as expected without any additional setup.
 

  11 hours ago, joe_g said:

Or did you perhaps make your own autocomplete field? I dont get any suggestions when i try to write in the field:

Expand  

The autocomplete feature is added with a hook from the group module. What happens when you leave the field empty and just click and focus the field? It should suggest all the pages that are viewable and published (Make sure you have created some pages). When you start typing a letter. E.g. If you have a page with the title "Test" and you type "Te" the page should be suggested. If this is not working maybe try a fresh install with the latest FieldtypePageGrid and PageGridBlocks modules and see if it works there. It's working for me (tested in Chrome Browser) so maybe it's something wrong with your setup.