Jens - Hi, I'm trying Twill for the first time ... Twill #❓questions

Jens - Hi, I'm trying Twill for the first time ...

Jens

04/14/2023, 1:22 PM

Hi, I'm trying Twill for the first time and creating a basic block that has an image will not work for me. After saving and reloading the asset is no longer connected. I was trying to follow the "Building a simple page builder with Laravel Blade" guide but are stuck on Fix the preview-step as I'm not able to render images.

https://cdn.discordapp.com/attachments/811986149064441927/1096425299077501019/Screen_Recording_2023-04-14_at_15.19.44.mov▾

ifox

04/14/2023, 1:23 PM

Hi @Jens what's the name of your image field in the block?

Jens

04/14/2023, 1:24 PM

Copy code

@twillBlockTitle('Text Image')
@twillBlockIcon('text')
@twillBlockGroup('app')

@php
    $selectOptions = [
        [
            'value' => 'left',
            'label' => 'Image | Text'
        ],
        [
            'value' => 'right',
            'label' => 'Text | Image'
        ]
    ];
@endphp


<x-twill::medias
    name="image"
    label="Image"
/>

<x-twill::select
    name="imagePosition"
    label="Image Position"
    placeholder="Select an option"
    :options="$selectOptions"
/>

<x-twill::input
    name="title"
    label="Title"
    :translated="true"
/>

<x-twill::wysiwyg
    name="text"
    label="Text"
    placeholder="Text"
    :toolbar-options="[
        'bold',
        'italic',
        ['list' => 'bullet'],
        ['list' => 'ordered'],
        [ 'script' => 'super' ],
        [ 'script' => 'sub' ],
        'link',
        'clean'
    ]"
    :translated="true"
/>

ifox

04/14/2023, 1:25 PM

and you didn't make any change to your

twill.php

config file yet, correct?

Jens

04/14/2023, 1:27 PM

I've added some crops:

Copy code

<?php

return [
    'default_crops' => [
        'page_cover' => [
            'default' => [
                [
                    'name' => 'default',
                    'ratio' => 16 / 9,
                ]
            ]
        ],
    ],
    'block_editor' => [
        'crops' => [
            'square' => [
                'desktop' => [
                    [
                        'name' => 'desktop',
                        'ratio' => 1,
                    ],
                ],
                'mobile' => [
                    [
                        'name' => 'mobile',
                        'ratio' => 1,
                    ],
                ],
            ],
        ],
    ],
];

ifox

04/14/2023, 1:27 PM

alright, so your image field name should be one of those crops key

ifox

04/14/2023, 1:28 PM

if you don't override

block_editor.crops

there is a default

image

key

ifox

04/14/2023, 1:29 PM

so to make it work with this configuration you should use

square

as the name of your

medias

field

Jens

04/14/2023, 1:31 PM

Ah that's much better!

Jens

04/14/2023, 1:31 PM

any idea why I'm getting 404's for the image?

https://cdn.discordapp.com/attachments/1096425299345952769/1096427525212753950/image.png▾

Jens

04/14/2023, 1:32 PM

Thanks for you fast response and help! 😄

Previous Next