#How to max an image picker where I limit the images that can be chosen?

1 messages · Page 1 of 1 (latest)

wintry apex
#

I need to make a picker to give my editors the option to chosoe between the "Gold", "Silver", "Bronze", and "Platnium" medial images. I want to make it so they can't upload new images and have to pick one of those options. Is this a possible, and kind of easy, to do?

next abyss
#

can you create a new mediaType, add your three as that new type, then remove permissions to allow adding anymore and use MNTP to limit the selection to that type and only 1?

Maybe also have a companion newMediaTypeFolder for targetting MNTP to a start point in the tree?

wintry apex
#

MNTP? What media type would I be cloning? Just the image picker?

next abyss
#

not a data type.. add a new media type 🙂 and use the multinodetreepicker datattype for your picker

#

same as you create document types, you can create you own media types (maybe as simple as copying image core mediatype but depends on what format you B/S/G are as could well be SVGs?)

#

and your MNTP can only allow that mediatype to be chosen (allow items of type) and min and max limits to one and mandatory one...

#

looks like media node type means you can't target a starting folder though..

#

Just a thought.. would a mandatory dropdownlist of B/S/G accomplish the same thing (with some additional coding to fetch a media item by key depending on the option chosen)... I know your users don't see an image in the back office... but is it really necessary?

wintry apex
#

I was thinking a radio select or dropdown but I don't know how to write the code on the template side to rended the right media image for the selected item. I mean, yes, a simple case statment but how do I point to the right media item since foldernames are randomized and how would I deal if the image is later replaced?

next abyss
#

Off the top of my head
var mediaUrl = Umbraco.Media(new Guid("e3b091e7-77ad-46bc-9a3b-d46f70a4c83b")).MediaUrl();

#

though you might want to use GetCropUrl() too for responsive bitmap images.

#

the guid will not change when changing the image source.. and USync will persist guids between environments.

#

or an appsetting for your b/s/g guids? for environmental differences prod/uat/dev

lapis wyvern
lapis wyvern
#

You can probably use the Contentment Data List, for example we use it to create this sort of picker:

image.png
wintry apex
#

Unfortunatlly I am not skilled enough to make a custom property and after looking at the Contentment it looks like it would work if I was just not using images.

lapis wyvern
#

Hi Matthew, it might be to complicated for you if you don't know how to code JS / C#, however Paul Seal wrote a good blog post that shows you how you can extend the contentment data list with your own picker interface ( he displays image thumbnails of authors )

https://skrift.io/issues/creating-an-author-picker-using-contentment/

Skrift Magazine
Creating an Author Picker Using Contentment by Paul Seal | Issue 73

The best Umbraco packages are ones that make your life easier as a developer and an editor. Lee Kelleher's Contentment is one such package that offers a collection of data editors. For Paul Seal, the editor that stood out was the Data List, which he demonstrates by creating an Author Picker.

wintry apex
# lapis wyvern Hi Matthew, it might be to complicated for you if you don't know how to code JS ...

Thanks I will take a look at that. I can do C# but I have not touched JS in like 20 years and know nothing about Angular. I would love to learn but it is a call between delaying a major project for an unknown amount of time while I learn or hobble something together that works but is not pritty. I may just direct upload the images I need to use and hardcode a path. I don't see the images changing ever but maybe one day I can afford to pay a pro to fix my bad code 😛

lapis wyvern
#

@wintry apex - A combination of ChatGPT & Copilot and reading though the links I just sent you would probably get you 98% of the way there 🙂