Jump to content
Haseeb Jamal

Displaying Images along Text with Field Options

Recommended Posts

Haseeb Jamal

Hi Fellas

 
To be able to produce fields as shown below, which have an image displayed along corresponding field text, following steps are needed to be taken.
post-25733-0-77971500-1435444040.png
Single Select Fields:

  • Assign images/icons to every field by going to the "Field Options" area.
  • Place the assigned images in the folder "components/com_jreviews/jreviews/views/themes/{selected theme}/theme_images"
  • Turn the "Show Option Images On"
  • In the "Output Format" area paste the following code:
{FIELDTEXT} {jr_country|valuenoimage}

Result:
post-25733-0-37347700-1474028095.png
Multi Select Fields:

  • Assign images/icons to every field by going to the "Field Options" area.
  • Place the assigned images in the folder "components/com_jreviews/jreviews/views/themes/{selected theme}/theme_images"
  • Turn the "Show Option Images On"
  • In the "Output Format" area paste the following code:
{fieldtext}
  • In the "Click2search Output Format" area paste the following code:
<a href="{click2searchurl}" target="_blank">{optiontext} {opt_text}</a>
  • Paste the following code in the PHP Output Format area:
$res='';
$res .="<ul class='jrFieldValueList'>";
foreach($output as $key=>$val){
$res .="<li>";
$opt_text=$text[$key];
$res .=str_replace('{opt_text}',$opt_text,$val);
$res .="</li>";
}
$res .="</ul>";
return $res;

Remember that the image name must be the same as the field name e.g. if a field option's name is dry-cleaning, image name must be dry-cleaning.png
 
Results:
post-25733-0-51700400-1474028665.png 
Your results can be more elegant and neat if more proper images/icons are used as opposed to mine. The bullet dots can also be removed by tweaking CSS code.
 
May be Alejandro, Kristian or any other expert in PHP could check the code and method described here to give suggestions/alternatives on how to optimize this implementation.

post-25733-0-37347700-1474028095_thumb.png

post-25733-0-51700400-1474028665_thumb.png

Edited by Haseeb Jamal

Share this post


Link to post
Alejandro

This section is only visible with a valid subscription. If you have a valid subscription, please login.

Share this post


Link to post
Mark Whitmore

This section is only visible with a valid subscription. If you have a valid subscription, please login.

Share this post


Link to post

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. Please refer to our Privacy Policy.