Column selection for editor

[kaz]

I would like to give an editor the ability to specify the width of columns in a section. The template may have 2 columns, which have now the with of quarter spacing.

How do I set it up to make the most sense? If the editor sets the left column to 4, the right column should automatically be 8.

Is there a way to do such a setting. I have no idea which field is best suitable for this? I had a look at FieldtypeOptions, but I don't think that's right? maybe InputfieldFloatRange, but then I have only one width.

Has anyone implemented something like this before and can give a tip? It would be great if the editor could change the widths uk-width-1-*@m.

Here an example of how I do it statically at the moment.

<div uk-grid>
    <div class='uk-width-1-4@m uk-width-1-1@s'>
        <figure>
            <img src='{$page->image->url}' alt=''>
        </figure>
    </div>
    <div class='uk-width-3-4@m uk-width-1-1@s'>
        $page->body
    </div>
</div>

 

[gebeer]

I'd go with FieldtypeOptions. Let's say your field is called "colwidth" and your options are:
1=1
2=2
3=3
Then you could do something like

<?php
$w1 = $page->colwidth;
$w2 = 4 - $w1;
?>
<div uk-grid>
    <div class='uk-width-<?= $w1 ?>-4@m uk-width-1-1@s'>
        <figure>
            <img src='{$page->image->url}' alt=''>
        </figure>
    </div>
    <div class='uk-width-<?= $w2 ?>-4@m uk-width-1-1@s'>
        $page->body
    </div>
</div>

 

[kaz]

@gebeer I will try that, it looks easy. Thanks!

[BrendonKoz]

This might also be able to do what you're looking to do (if you want something out-of-the-box)? It's a commercial module.

kongodongo's Dynamic Selects.

[bernhard]

3 hours ago, gebeer said:

I'd go with FieldtypeOptions. Let's say your field is called "colwidth" and your options are:
1=1
2=2
3=3

I'd find it more intuitive to use these labels:

Quote

# select column width option:
1-3 (25% - 75%)
2-2 (50% - 50%)
3-1 (75% - 25%)

But it could use the same code as yours ? 

[kaz]

@gebeer

I have sadly an error message with the minus operator, the passing of w2:

Notice: Object of class ProcessWire\SelectableOptionArray could not be converted to number in /Users/Sites/localhost/domain.com/site/templates/fields/matrix.php on line 26

Line 26 is
$w2 = 4 - $w1;

The operator is correct, the error is probably in the position of the lines? It's part within a repeater matrix, here's the full code:

if($item->type == 'twocols_content') {
    $w1 = $item->colwidth;
    $w2 = 4 - $w1;
    echo "<article uk-grid>
            <div class='uk-width-{$w1}-4@m uk-width-1-1@s'>
            …
            </div>
            <div class='uk-width-{$w2}-4@m uk-width-1-1@s'>
                $item->content
            </div>
    </article>";
}

w1 is passed correctly after selection, the Options/Select field colwidth is passed.

I have applied it this way (InputfieldRadios):
1=1
2=2
3=3
4 I don't need, 4 results in zero, when the minus operator works ?

[gebeer]

Sorry, my fault. Try $item->colwidth->value

[kaz]

sorry, I don't understand?
w1 = $item->colwidth;
the value is passed,
$w2 = 4 - $w1;
needs to change something on this line?

[DV-JF]

1 hour ago, kaz said:

sorry, I don't understand?
w1 = $item->colwidth;
the value is passed,
$w2 = 4 - $w1;
needs to change something on this line?

If you echo $item->option a string will be echoed and you can't calculate with a string.

In order to do the math you have to echo $item->option->value to get the value of the selected field which is in your case an integer.

To be precise you could do

$w1=intval($item->colwidth->value);

See: https://www.php.net/manual/de/function.intval.php

[kaz]

@DV-JF The value then is passed with NULL, when 1 is selected:
w1 = uk-width-0-4@m
w2 = uk-width-4-4@m

[DV-JF]

What does your Select Options Fieldtype looks like in backend? Is it

1
2
3

or

1=1
2=2
3=3

 

[kaz]

Now it works. I had to think about what 'value' is. I take the ID, maybe it was the same lake the values, and it works.

$w1=intval($item->colwidth->id)

My Options are
1=1
2=2
3=3