feature: allow selection of different collage layouts

[andi34]

Prerequisites checklist

• I have read the contributing guidelines.

What is the purpose of this pull request? (put an "x" next to an item)

• Documentation update
• Bug fix
• New feature, closes [FEATURE]: Support different collage options from frontpage instead of admin #562
• Other, please explain:

What changes did you make? (Give an overview)

Allow to enable collage selection on start page.
Take frames and backgrounds depending on collage layout (prefix).
Choose disabled layouts.

Is there anything you'd like reviewers to focus on?

To-Do:

• [ ]needs documentation
  • Take frames and backgrounds depending on collage layout (prefix) description/info

[reloxx13]

Add touch-friendly collage layout modal and unify selection flow

[dasGOLE]

I've tested it on my PB and it looks good. Maybe it would be even better, if we can add a preview of the Layout in addition or instead of the Layout name, so users know how the result would look like. Maybe the Previews / Pictures from the Collage test. 🤔
It's something I'm considering for the Designer as well (for the dropdown selection).

[andi34]

Needs collage limit to be adjusted after selecting . Currently Throwing an error because using the count of default defined layout

[andi34]

Moved layout specific frame & background detection to src/Collage, handle centralized and make reusable function.
No need to adjust collage test page now to use matching frame if possible.

[andi34]

Docs changed might need formatting, will try checking later today.

Anything else left?

[dasGOLE]

should we not implement the Background and Frame config within the json file? Therefore one Background could be configured for multiple Layouts, without the need to dublicate the Picture for each layout.

Something like this:
{
"name": "1+2 Layout",
"author": "PhotoboothProject",
"aspect_ratio": "3:2",
"width": "1800",
"height": "1200",
"layout": [
["x0.02810", "y0.0800", "x0.4978", "y0.4978", "0"],
["x0.02810", "y0.6178", "x0.3052", "y0.3052", "0"],
["x0.34736", "y0.6178", "x0.3052", "y0.3052", "0"],
["x0.66662", "y0.6178", "x0.3052", "y0.3052", "0"]
],
"text_alignment": {
"mode": "zone",
"x": "x0.55",
"y": "y0.1",
"w": "x0.42",
"h": "y0.42",
"align": "center",
"valign": "middle",
"rotation": 0,
"padding": 0
},
"Background": "demopic.png",
"Frame": "frame.png"
}

[andi34]

I'd keep this as is.
If layout specific frame or background not exists, it's taking the default defined anyway. You can upload layout specific, but don't have too. You can define one per layout without prefix.

[andi34]

Where the implemented solution helps, background in most cases won't be needed as the frame can cover the whole image (you onlyneed the transparent parts specific for the layout).

Adminpanel config:

• Apply frame to collage once
• Define frame without prefix, let's sayframe.png.

Now upload frame.png and frame.png with prefix for every allowed layout with specific transparent parts (e.g. 1+2-1_frame.png and 2+2-2_frame.png).

While processing the collage it'll take {layout}_frame.png if exists without defining it explicitly. IMO more user-friendly and more advanced as you can still define a frame with unique name via Json file.

[andi34]

Also see https://photoboothproject.github.io/faq/custom-collage/#extended-collage-object-v499 , already supported via json.

[andi34]

Still Docs formatting not fitting, also collage.json_{layout} needed (needs adjustment)... Else looks good IMO and ready once this is done.

[reloxx13]

nice idea with the preview blocks in the selection!
so far works fine, code looks good. i found some left over console logs which are removed now.