Twill: Custom Block with Slideshow Component Won't Save

Created on 12 Mar 2019  Â·  14Comments  Â·  Source: area17/twill

Hi @ifox @yanhao-li

I've had this problem for a while - not sure if there is a bug. I've created a brand new block called 'slideshow' which contains a single form element:

@formField('medias', [
'name' => 'slideshow',
'label' => 'Slideshow',
'max' => 5,
'note' => 'Minimum image width: 1500px'
])

I'm able to select images but then nothing saves or writes to the DB, so if I refresh my page then the images have been lost. Is there something I'm missing?

image

Most helpful comment

Hi guys,

It's sorted - I was just missing the 'gallery' section from the crops.

            'gallery' => [
                'default' => [
                    [
                        'name' => 'Uncropped',
                        'ratio' => null,
                        'minValues' => [
                            'width' => 100,
                            'height' => 100,
                        ],
                    ],
                ],
                'desktop' => [
                    [
                        'name' => 'desktop',
                        'ratio' => 16 / 9,
                        'minValues' => [
                            'width' => 100,
                            'height' => 100,
                        ],
                    ],
                ],
                'tablet' => [
                    [
                        'name' => 'tablet',
                        'ratio' => 4 / 3,
                        'minValues' => [
                            'width' => 100,
                            'height' => 100,
                        ],
                    ],
                ],
                'mobile' => [
                    [
                        'name' => 'mobile',
                        'ratio' => 1,
                        'minValues' => [
                            'width' => 100,
                            'height' => 100,
                        ],
                    ],
                ],
            ],

All 14 comments

Hi @jkhamler have you configured the crops in config/twill.php?

For my custom image blocks I use this

  'crops' => [

                'gallery' => [
                    'default' => [
                        [
                            'name' => 'Uncropped',
                            'ratio' => null,
                            'minValues' => [
                                'width' => 100,
                                'height' => 100,
                            ],
                        ],
                    ]
                ], 
            ],

Hi @tbrasington I've added this and it makes no difference. The problem seems to be that nothing is persisting in the database, even though the payload seems OK.

Will just trace through the controller action and see what's going on. Any tips would be much appreciated - thanks all.

Uploading image.png…

Just to check you renamed galley to slideshow?

Other things I stumbled on was using local storage over aws.

Hi @tbrasington,

Actually I just renamed slideshow to gallery to be consistent with your config. I just spend the past hour grappling with XDebug config (finally got it working) so I should be able to see what's going on. For reference, my 'gallery' block is as simple as this:

@formField('medias', [
'name' => 'gallery',
'label' => 'Gallery',
'max' => 5,
'note' => 'Minimum image width: 1500px'
])

The gallery fields are coming through but still nothing is getting saved. It's quite hard to debug as the debugger just sends me deep into core Laravel code...

image

Hi @jkhamler ,

Could you confirm the crops parameter is placed at the right place in config/twill.php, means block_editor => crop, check the documentation.

The other thing is, does the Ajax call succeed when you clicked the update button?

Hi @yanhao-li

Ah. My 'crops' was out by one level on the config array, but I put it in the right place, cleared the config cache and alas no change. Here is my twill/config.php:

<?php

return [
    'admin_app_url' => 'cms.darwin.test',
    'admin_app_path' => env('ADMIN_APP_PATH', ''),

    'block_editor' => [
        'blocks' => [
            'case_studies' => [
                'title' => 'Case studies',
                'icon' => 'text',
                'component' => 'a17-block-case_studies',
            ],
            'text' => [
                'title' => 'Body text',
                'icon' => 'text',
                'component' => 'a17-block-wysiwyg',
            ],
            'image' => [
                'title' => 'Image',
                'icon' => 'image',
                'component' => 'a17-block-image',
            ],
            'offers' => [
                'title' => 'Offers',
                'icon' => 'image',
                'component' => 'a17-block-offers',
            ],
            'gallery' => [
                'title' => 'Gallery',
                'icon' => 'image',
                'component' => 'a17-block-gallery',
            ],
            'testimonial' => [
                'title' => 'Testimonial',
                'icon' => 'image',
                'component' => 'a17-block-testimonial',
            ],
        ],
        'repeaters' => [
            'case_study_item' => [
                'title' => 'Case Study',
                'trigger' => 'Add case study',
                'component' => 'a17-block-case_study_item',
                'max' => 10,
            ],
            'offer_item' => [
                'title' => 'Offer',
                'trigger' => 'Add offer',
                'component' => 'a17-block-offer_item',
                'max' => 10,
            ],
        ],
        'crops' => [
            'gallery' => [
                'default' => [
                    [
                        'name' => 'Uncropped',
                        'ratio' => null,
                        'minValues' => [
                            'width' => 100,
                            'height' => 100,
                        ],
                    ],
                ]
            ],
        ],
    ],

    'media_library' => [
        'disk' => 'libraries',
        'endpoint_type' => env('MEDIA_LIBRARY_ENDPOINT_TYPE', 's3'),
        'cascade_delete' => env('MEDIA_LIBRARY_CASCADE_DELETE', false),
        'local_path' => env('MEDIA_LIBRARY_LOCAL_PATH'),
        'image_service' => env('MEDIA_LIBRARY_IMAGE_SERVICE', 'A17\Twill\Services\MediaLibrary\Imgix'),
        'acl' => env('MEDIA_LIBRARY_ACL', 'private'),
        'filesize_limit' => env('MEDIA_LIBRARY_FILESIZE_LIMIT', 50),
        'allowed_extensions' => ['svg', 'jpg', 'gif', 'png', 'jpeg'],
    ]
];

By 'update button' do you mean the 'Save as Draft' button?

image

I'm not getting any errors but nothing is persisting in the 'mediables' table. Any suggestions would be highly appreciated - thanks guys!

Do other types of block save?

@tbrasington thanks for coming back to me - yep no probs with the other blocks, including repeaters!

@jkhamler

Could you upload another request payload screenshot as you did in the earlier reply?

image

Ok, last few debugging questions

  1. I see you have an image block from the screenshot. If you configure that in crops does it save?
  2. If you use the HasMedias trait and add a cover image does that save? See my model for reference
    https://github.com/tbrasington/jam-twill/blob/master/app/Models/Entry.php
  3. What is the xhr response when you hit Save as Draft ?

Guys,

I’m loving the support - thanks so much. Will have to get back to you in the morning as I’m home for the evening without a computer.

Cheers!

Jon

Hi guys,

It's sorted - I was just missing the 'gallery' section from the crops.

            'gallery' => [
                'default' => [
                    [
                        'name' => 'Uncropped',
                        'ratio' => null,
                        'minValues' => [
                            'width' => 100,
                            'height' => 100,
                        ],
                    ],
                ],
                'desktop' => [
                    [
                        'name' => 'desktop',
                        'ratio' => 16 / 9,
                        'minValues' => [
                            'width' => 100,
                            'height' => 100,
                        ],
                    ],
                ],
                'tablet' => [
                    [
                        'name' => 'tablet',
                        'ratio' => 4 / 3,
                        'minValues' => [
                            'width' => 100,
                            'height' => 100,
                        ],
                    ],
                ],
                'mobile' => [
                    [
                        'name' => 'mobile',
                        'ratio' => 1,
                        'minValues' => [
                            'width' => 100,
                            'height' => 100,
                        ],
                    ],
                ],
            ],
Was this page helpful?
0 / 5 - 0 ratings

Related issues

milewski picture milewski  Â·  4Comments

brammittendorff picture brammittendorff  Â·  6Comments

dafyd picture dafyd  Â·  3Comments

karneaud picture karneaud  Â·  3Comments

newvladimirov picture newvladimirov  Â·  3Comments