Adding images to dropdownOptionStyle

[Taha_Al_Dailami]

Hi, I want to add small images (in this example from the Builtin library under “Image Management”) to the options of a dropdown, by scripting.

My Code currently looks like this (image is only an example):

dropdownOptionStyle = {
    "background-image"		: "url('/icon/48/pencil.png')",
    "background-size"		: "48px 48px",
	"background-position"	: "left center",            
 	"background-repeat"		: "no-repeat",               
 	"line-height"			: "50px",
 	"padding-left"			: "50px",
	"fontStyle"				: "italic",
	"color"					: "green",
}

I can see the fonts just fine, but I can´t see the images.

If I try to add them through content: url(...) I´m seeing nothing.

It would be nice if it was possible to assign an image to each option.
What could I do ? Thanks in advance.

[Samuel_Sueur]

Hi,

You need to add "/system/images" as a prefix to your image url.

Not sure you'll be able to insert the image directly before the text without using the advanced stylesheet.css ...

Also, you unfortunately won't be able to specify a different image for each option without some clunky implementation (or develop your own module!)

[victordcq]

Might want to take a look at this one, if you need different icons/images per option.

[FEATURE] Add ability to add Icon and styling to Perspective Dropdown items

put this in the markdown component binding like usual you'll ofc will have to add some python logic to append the style string based on the required labels in de dropdown (idk if everyone has these Builtin/icons or is it from my test project?) styles=".iaDropdownCommon_options [data-label='YourLabel']:before { content: url('/system/images/Builtin/icons/16/check2.png'); }" code = """<style> """+styles+""" \"></style>""".replace("\n", "").replace("\t", "") return code [image]

[Taha_Al_Dailami]

Thank you very much. I can see the image now.
But I did not understand the script completely. I have to use a binding with a markdown-component instead script ? Where exactly do I have to put the binding? If I try:

optionList = []
for option in locals:
	optionList.append({
	"value": option,
	"label": option,
	"style": {"color": "red"}
	})
	
self.getChild("root").getChild("FlexContainer_top").getChild("DD_languageTag").props.options = optionList

It dosen´t accept the style property. which is unfortunate.

[victordcq]

you replied to the wrong person i think
yes on the bottom of the topic there is someone who linked his post where he goes into more depth using my markdown if you are unfamiliar with it

Anyways if its for some static flags, you can just add the styles in stylesheet.css for every flag.

give your dropdownOptionsStyle a class example "cssFlags"

.psc-cssFlags[data-label="de"] {
    color: #FF0000
}

for none static things you'll need the markdown to add these styles

[Taha_Al_Dailami]

Thank you so much, I found something after going though that page : Change color for each option based on some category for Perspective Dropdown Component - #6 by Elizabeth_Engler
In the end my Code looks kind of like this:

# for extra styling of the dropdown content
	dropdownOptionStyle = {       
		"background-color"		: "transparent",
   	 	"line-height"			: "50px",
   	 	"padding-left"			: "10px",
    	"fontStyle"				: "italic",
    	"color"					: "green",
    }
    
    # define the variable here to "save" complete HTML string
	markDownStyle= ""
	
	#Get locals
	locals = package.getAvailableLocales()
	
	# import all needed images from the Image Management (pictures have to be uploaded FIRST !)
	imgUrlUK = '/system/images/contryIcons/united-kingdom.png'
	imgUrlDE = '/system/images/contryIcons/german.png'
	
	# create an optionlist with all locals
	optionList = []
	# for each option 1.build the option and 2. add style
	for option in locals:
		# cast java.Locale to string
		option = str(option)
		optionList.append({
		"value": option,
		"label": option,
		})
		
		# choose imageUrl depending on option
		imgUrl = ""
		if option == "de":
			imgUrl = imgUrlDE
		elif option == "en":
			imgUrl = imgUrlUK
			
		markDownStyle = markDownStyle + """.iaDropdownCommon_options [data-label=""" + option + """
						]:before { content: url(""" + imgUrl + """);}"""
	
	# build the styling with the accumulated markDownStyle
	markDowncode =  """<style>
				""" + markDownStyle + """
				</style>"""
	
	# format the string nicer, to make sure the HTML is valid
	markDowncode = markDowncode.replace("\n", " ").replace("\t", "")
	
	# set the properties
	self.getChild("root").getChild("FlexContainer_top").getChild("DD_languageTag").props.options = optionList
	self.getChild("root").getChild("FlexContainer_top").getChild("DD_languageTag").props.dropdownOptionStyle = dropdownOptionStyle
	self.getChild("root").getChild("FlexContainer_top").getChild("Markdown").props.source = markDowncode

Thank you very much for your help.
Edit: forgot to add image: