Panel: Better way to display an alignment grid?

The CMS Questions
1

As a little bit of background - I have a field in the panel which allows my client to specify how the image should just positioned/justified on the site. These images are background images inside a responsive element - so I’m using the background-position CSS declaration to control how it appears. The actual image is not cropped, only contained within the element fixed to the defined position.

So all that works fine. It’s the panel field which I’m using that I’m not totally sold on. I’ve used a 3x3 set of radio buttons with arrows as their labels. Can’t help but feel there could be a better way of displaying this.

Any suggestions/advice? Thanks.

53%20PM
53%20PM604×554 34.4 KB

2

What about using the focus field (you can use the values the field creates without actually cropping the field). Or even go the extra mile of translating those exact values into something more general like top/left etc. The beauty of that field is that you don’t have to think to translate arrows into something meaningful.

Or you the illustrated radio field with images demarking the area where the image should be aligned.

3

Well thats fancier then my effort, I used two select boxes, one for vertical position and the other horizontal position. worked great.

The focus field sounds like the way to go but what it really needs is thing similar to the bit of focus field that allows you to select the focus point, but with radios round the edge and one dead center (so you can only select those, rather then an arbitrary point on the image). I wonder how hard that would be.

4

I thought that as well, but as I said above, you can calculate something like top/left from an arbitrary point in the image. And use an overlay with a grid.

5

Thanks @texnixe,
I thought about using that field. I’ve actually had it starred on Github waiting for a project to use it on. For this one though I don’t think it would work. I would anticipate push back from the client (I know how specific they are) if they for example ‘focused’ something that’s somewhere between the center and edge of the image. I would have to pick one - either center or edge) to justify it to. So there could be (a very rare) chance that whatever they ‘focused’ would not remain the main focal point under certain viewports.

I think the main problem I have with my solution is the radio fields themselves. It would be great i there was a “button” field where it acts like a radio but only contains text.

6

You can fake it. Remember that clicking label activates the radio/checkbox it belongs to. You can safely hide the radio with css and do your styling on the label to make it look like a button, or use pseudo elements to make fancy radios (or in your case replace it with an arrow image). In fact there is a mixin in my Sass framework that does just this. Feel free to borrow the code if its helpful. It’s skinned easily via a sass variable map.

7

Thanks @jimbobrjames , good idea. Worked up a proof-of-concept and it seems like it will do nicely. I wanted to keep with the HTML structure coming from Kirby so I move the field border from it’s LABEL to the SPAN so I could use adjacent sibling selector.

https://jsfiddle.net/louiswalch/7mfqaj4b/

8

And here’s the final product incase anyone wants to use it.

Screenshot:

Blueprint:

I couldn’t get YAML to paste in here nicely so you’ll have to pull it from here:
https://jsfiddle.net/louiswalch/k4neqe3o/

CSS:

BODY.ltr  .field-name-crop_alignment .field-grid {
    margin-left: -0.5em;
}
BODY.ltr  .field-name-crop_alignment .field-grid-item {
    padding-left: .5em;
}
.field-name-crop_alignment .field-grid-item-1-3 {
    width: 33.3333333% !important;
}

.field-name-crop_alignment .input-list-item {
    position: relative;
} 
.field-name-crop_alignment .input {
    padding: 0;
    border: 0;
}
.field-name-crop_alignment .input INPUT[type="radio"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    cursor: pointer;
} 
.field-name-crop_alignment .input SPAN {
    padding: .5em;
    font-size: 1em;
    line-height: 1.5em;
    font-weight: 400;
    border: 2px solid #ddd;
    background: #fff;
    display: block;
    -ms-appearance: none;
    appearance: none;
    border-radius: 0;
    min-height: 2.75em;
    text-align: center;
    cursor: pointer;
    position: static;
    left: 0;
    right: 0;
}
.field-name-crop_alignment .input INPUT[type="radio"]:hover + SPAN {
    border-color: #8dae28;
}
.field-name-crop_alignment .input INPUT[type="radio"]:checked + SPAN {
    border-color: #8dae28;
    background-color: #8dae28;
    color: white;
}