Kirby builder problem - images width

Kirby 3 Solved ✅
1

Screenshot_2020-08-06_20-07-02
Screenshot_2020-08-06_20-07-021400×822 176 KB

have been playing around with builder v2.0.15.
somehow the image seems to have only 50% width.
i don’t think it’s right this way.
how can i fix this?

2

Could you please post the blueprint for this field? Have you set a preview snippet? If yes, then please post that as well.

3

as you wish.

this is how it looks like in the preview.

Screenshot_2020-08-06_21-18-56
Screenshot_2020-08-06_21-18-561322×840 257 KB

in blueprints/pages/default.yml

title: Default
options:
  title: false
  duplicate: false
  status: false
  url: false
  delete: false
tabs:
  content:
    fields:
      modules:
        label: Modules
        type: builder
      fieldsets:
        grid: fieldsets/grid
     images:
       sections:
         images:
           type: files
           label: Images
           layout: cards
           size: small
           info: "{{ file.dimensions }}"
           template: image
        image:
          ratio: 1/1

in blueprints/fieldsets/grid.yml

name: Text Grid
preview:
  snippet: blocks/grid
  css: /assets/css/styles.min.css
fields:
  status:
    extends: fields/status
  heading:
    label: Heading
    type: text
  columns:
    label: Text Columns
    type: builder
    columns: 3
    fieldsets:
      text:
        extends: fieldsets/text
        name: Column

in blueprints/fieldsets/text.yml

name: Text
fields:
  cover:
    label: Image
    type: files
    layout: cards
    max: 1
    uploads:
      template: image
    image:
      ratio: 2/1
      cover: true
    width: 1/1
  heading:
    label: Heading
    type: text
  text:
    label: Text
    type: textarea
    size: medium
    buttons: false
  buttonurl:
    label: Button URL
    type: link
    options:
      - page
      - url
    settings:
      text:
        width: 1/1
      popup: false
      hash: false

in templates/default.php

<?php snippet('header') ?>
<?php snippet('navigation') ?>

<?php foreach ($page->modules()->toBuilderBlocks() as $block): ?>
  <?php snippet('blocks/' . $block->_key(), ['data' => $block]) ?>
<?php endforeach?>

<?php snippet('footer') ?>

in snippets/blocks/grid.php

<div class="" style="background-image: linear-gradient(136.18deg,#eee 0,#ccc 100%);">
  <div class="cf cxs12 pvxs128">
    <div class="center mwxs1440">
      <div class="fl tacxs cxs12 phxs24">
        <?php if ($data->heading()->isNotEmpty()): ?>
        <h2 class="mbxs32 lxs10 fsxs40 fw700 tc-555555"><?= $data->heading(); ?></h2>
        <?php endif ?>
      </div>
      <?php foreach ($data->columns()->toBuilderBlocks() as $column): ?>
        <?php snippet('blocks/' . $column->_key(), ['data' => $column]) ?>
      <?php endforeach ?>
    </div>
  </div>
</div>

in snippets/blocks/text.php

<div class="fl clg4 cmd12 cxs12 paxs24 button">
  <div class="pr oh tacxs maxsa mwxs480 br9 shadow71">
    <?php if( $image = $data->cover()->toFile() ): ?>
    <img class="icover" src="<?= $image->url() ?>" alt=""> <!-- <?//= $image->url() ?> -->
    <?php endif ?>
    <div class="cxs12 hmd350 hxs420 paxs32 bg-ffffff">
      <?php if ($data->heading()->isNotEmpty()): ?>
      <h3 class="mbxs32 lxs10 fsxs24 fw700 tc-555555"><?= $data->heading(); ?></h3>
      <?php endif ?>
      <p class="lxs10 lhxs26 fsxs20 fw400 tc-555555"><?= $data->text(); ?></p>
      <?php $link = $data->buttonurl()->toLinkObject(); ?>
      <?php if( $link ): ?>
      <a href="<?= $link->href(); ?>" class="pa hcenter b36 fsxs18 fw7 wxs288 paxs12 br9 bg-333333 button shadow5"><?= $link->text(); ?></a>
      <?php endif ?>
    </div>
  </div>
</div>

and this is how it looks like on the website

Screenshot_2020-08-06_21-36-34
Screenshot_2020-08-06_21-36-341294×732 240 KB

i think the error is in the index.css of the builder but don’t know how to fix.

4

Hm, looks like you are providing styles for your previews, so you should be able to fix those image widths there? Without checking in dev tools, I can’t really tell what’s happening, though.

5

look at the demokit microsite.
add image field to the text.yml.
then change the index.css of the builder plugin with the index.css of the newest builder version.
now you will see.

but maybe timoetting can help.

6

Not sure if I understand your problem correctly. But isn’t this just about the files field?

You could add size: huge to the files field and it should be 100%.

cover:
    label: Image
    type: files
    layout: cards
    max: 1
    size: huge # 👈
    uploads:
      template: image
    image:
      ratio: 2/1
      cover: true
1 Like
7

that’s exactly what I didn’t find.
now it works. thank you.