Search the Community

Last week I mentioned the new Actions menu on MediaHub input fields. I started with Copy to field function. Next up is Palette. It's a free companion module that analyses image colours and lets you copy a hex value from a photo. Why I built it I was building a site with a hero banner consisting of a photo on the left and a solid colour block on the right. I needed colour options that complemented the image and a quick way to grab a hex code and paste it into a block colour field. Nothing in my usual workflow did that without leaving the admin or opening the image through external tools. What it does Palette analyses an image and surfaces the most prominent colours, with an indication of how much of the image each one accounts for. In the module settings you can choose how many swatches to show (anywhere from 1 to 10). Click a colour to copy its hex code to the clipboard, then paste it wherever you need it (a colour field, theme token, inline style, etc.). It does not write to a field for you. That part is still manual for now. There are also a few colour-wheel views if you want to explore alternatives, plus a custom picker if you already know roughly what you’re after. How to use it Install the MediaHub Palette companion module (see below). Set your preferred swatch count in the module config. On a MediaHub field card, open Actions → Generate palette on an image. Pick a swatch, copy the hex, paste it where you need it. It also appears on library asset page so you can explore a palette from the MediaHub library. Get it Palette is free for Media Hub users. It will shortly live as a separate download in your licence account area. Because it's fairly niche, I didn't bundle it inside the main MediaHub package. What’s not in it (yet) Extracted colours are not stored on the asset and are not exposed through the MediaHub API at the moment. I’m considering that for a future release. E.g. saving a palette against an asset or piping a chosen colour into a custom field automatically. For now it’s a practical “analyse this image and give me copyable hex codes” tool. Cheers P

Hi everyone, here's the problem I'm trying to solve. I have a config area in my PW admin that is locked down for admin use. I use pages to store a bunch of settings that I'll use for my clients website. It's mostly used for visual things like colours and theming. This list could be tiny or large, depending on the sites requirements, but its great because I can store any information I want to. So the page tree could look something like this: ADMIN SETUP Home Config Aesthetics Colours Red Field: Custom Label - "Red" Field: Class name - "theme--red' Green Field: Custom Label - "Green" Field: Class name - "theme--green' Blue Field: Custom Label - "Blue" Field: Class name - "theme--blue' etc... Sizes Small Field: Custom Label - "Small" Field: Class name - "sm' Medium Field: Custom Label - "Medium" Field: Class name - "md Large Field: Custom Label - "Medium" Field: Class name - "lg" etc... Icons Target Field: Custom Label - "Hands shaking Icon" Field: Icon SVG - "[svg code]' Target Field: Custom Label - "Target icon" Field: Icon SVG - "[svg code]' Success Field: Custom Label - "Happy face icon" Field: Icon SVG - "[svg code]' etc... HOW I USE THIS I'm then able to set up page reference fields for colour, size and icons. I'll use these fields on particular pages so that my clients can select a particular colour, size or icon, or anything really. Currently, with the page reference field I can create a custom label for the options. So for something like colour I can label the field "Theme" and present a list of colours like "Red, "Green" and "Blue" using the custom page label label format of the colours page. This of course means that I can use this to do some lovely presentation on the front end of the site. With a colour selected I'll then be able to use the page reference to get the class name for that colour theme so that I can update the page's look and feel. So in my markup I'd end up with "theme--red" or "theme--green" etc. THE PROBLEM I have this all working which is great and it's really flexible for the client which they love. However, I'd love to be able to make things more visual for the client. Is there a way to be able to output more than just text in the page reference field? I might have a bunch of different blue colours, so instead of a list like so: Navy Blue Deep Blue Bright Blue Sea Blue ... it would be great to be able to output actual colour swatches, which is a lot mor visual for the client. Taking the icon selector, I would ideally like to show the actual svg that I've stored against that icon as a selectable image instead of seeing text options like: Hands shaking icon Target icon Happy face icon Just a couple of scenarios here, but as you can see there could be any number of reasons to display a more visual method of selection. ANY SOLUTIONS? I've looked at modules like FieldtypeColorPicker which could help in solving the colour issue, but it doesn't allow me to select a colour and then use a particular class name assigned to it the way I describe above. Considering the other use cases I mention above, does anyone know if anything exists already that would help me to create custom presentaion for page reference lists, or if there's anything planned? Thank you in advance for anyone who's read this far and has any words of wisdom! Dave