Outputting an image based on text field

This thread is resolved. Here is a description of the problem and solution.

Problem: I have a custom text field that is used to store the name of a country. I would like to display the flag of that country on the front-end of the site, instead of the text name of the country.

Solution: You can construct an image HTML tag using the Types field shortcode as a variable. For example, you can upload images like "Tanzania.jpg" and "Rwanda.jpg" to your server, then build the image tag like this:

<img src="/wp-content/uploads/flags/[types field='country' output='raw'][/types].jpg" alt="[types field='country' output='raw'][/types]" />

It only works if the country names and image file names are identical. If possible, you should use a select field with predefined country names.

Relevant Documentation:
https://toolset.com/documentation/customizing-sites-using-php/functions/

100% of people find this useful.

This support ticket is created 5 years, 9 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Views, Views plugin

This topic contains 2 replies, has 2 voices.

Last updated by johnB-37 5 years, 9 months ago.

Assisted by: Christian Cox.

Author

Posts

January 15, 2019 at 7:53 pm #1184458

johnB-37

HI there,
I don't have a problem, more that I'm looking to see if there is a way to do something.
I have a custom post type called People and one of the custom fields is a one line text field called Country. Is there a way to make it so that if a person's country is inputted as Tanzania, then an image of the Tanzanian flag would display on the front end, instead of the text "Tanzania."
I can maybe see doing it through conditional outputting but that might get too complicated as I'll have multiple countries. If you have any suggestions, please let me know, thank you!

January 15, 2019 at 8:38 pm #1184494

Christian Cox

Hi, there's nothing built-in that would create this for you, but you can use the value of a custom field as a variable in an HTML tag to output the correct image. For example, let's say you create all these flag images:
Tanzania.jpg
Uganda.jpg
Rwanda.jpg
... etc ...
Then you can upload those images to a specific folder on your site (my example is wp-content/uploads/flags), and use the raw Types field shortcode to output the value of the text field in an image tag src path:

<img src="/wp-content/uploads/flags/[types field='country' output='raw'][/types].jpg" alt="[types field='country' output='raw'][/types]" />

This works if the country names are always identical to the corresponding image file name, but people often make spelling errors or capitalization or spacing errors in a single line text field. The same concept should be applied with a select field instead, where people can select their country from pre-defined options. This eliminates the problem with misspellings.

https://toolset.com/documentation/customizing-sites-using-php/functions/

January 15, 2019 at 9:32 pm #1184513

johnB-37

That worked great, thank you!