FLEXIcontent - FAQ - Frequently Asked Questions

Breadcrumbs

Home / Documentation / FAQ / Creating a drop down select that is displayed to as an image

Creating a drop down select that is displayed to as an image

Published by

Georgios Papadakis
Last modified

29 January 2012
Up to date

Yes
Profile concerned

End user, Webdesigner, Developer
Concerns
Since Version

1.5.4
Voting
1

2

3

4

5

(2 votes)
Favourites

[1 users]

It is possible to create a field that appears as drop down select in item edit form, but in item display it appears as an image.

This is possible without creating (programming) a new field type. For this you will need to

place your images in path inside joomla root folder, for example: images/stories/manufacturer/
and use as display text for the select field the name of your images without their filename extension

e.g. if your images are: image_name1.jpg, image_name2.jpg, cannon.jpg, hp.jpg, lexmark.jpg,
you can create this output in your frontend (the html code bellow displays an image)

<img width="80" src="images/stories/manufacturer/cannon.jpg" />

Create a new select field
Set "Remove Space" to YES

Enter as Field elements (Set "Use SQL query" to NO)

1::image_name1%% 2::image_name2%% 3::cannon%% 4::hp%% 5::lexmark

In prefix text enter:

<img width="80" src="images/stories/manufacturer/

In suffix text enter:
" />

NOTE 1: the above is not 100% strict html compliant, since the image does not have a title (alt tag parameter) but it will work in any browser NOTE 2: In above code you can specify width (width="80") and height if you want, but the images are shrinked to the specified width without creating any thumbnails, so take care not to use too big images, and thus add delay to your page, plus if your images are of correct size they will appear better.