0

I am creating a staff profile page, where I want to display social media icons for any social media sites each staff member may have (see photo).

I don't want to list ALL social media options, but I'd rather have a channel field type "drop-down" with options, and then a corresponding URL field (which can just be a text field). If the user has more than one social media account, there should be a "add another" button on the Publish page, which will add another drop-down and URL field.

The drop-down field will correspond to a Class name (i.e. class="icon-facebook"), which will then place an icon on the published page.

Is this possible, or am I making this too complicated?

Final Product My Code

Is there another, better solution in order to make this work? Or would it be easier for me to hard-code a "Facebook" field, and a "Facebook_url" field, "twitter," "twitter_url," etc.?

THANK YOU!!!

2

Have you looked at the Grid fieldtype?
https://ellislab.com/expressionengine/user-guide/add-ons/channel/grid.html

edit: if you need extra validation based on one of the columns (e.g. if an image is selected, validate that a caption is required), then you can insert some jQuery or javascript in a custom accesoire, or more simple, inside the field instructions. Be careful (and test) because the field-instructions do get formatted a bit (e.g. nbsp; inserted).

<script type="text/javascript">
$(document).ready( function(){
    console.log('hello console');
});
</script>
Other normal instruction text

or

<script type="text/javascript" src="/js/custom_grid_validate.js"></script>
Other normal instructions
4
  • That worked beautifully! Thank you! It took me a few minutes to figure out the field type, but it seems to be working. Now, one more question... I want the URL field to be a required field if one of the drop-downs is selected. Is that possible, or would that require extra coding?
    – Christian
    Aug 2 '14 at 17:49
  • Yes, you can make a column in a grid-field required. But you cannot make a field required depending on a value of another field. However, you can make an accesoire with some javascript to validate this.
    – GDmac
    Aug 2 '14 at 19:10
  • Great, thank you! Very much appreciated!
    – Christian
    Aug 2 '14 at 20:12
  • Or you can add a script tag to the field instructions :-) instead of making a full accesoire. (example added to answer)
    – GDmac
    Aug 3 '14 at 10:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.