Grid Conditionals - side by side fields - only display if field filled

Question

Perplexed how or if this can be achieved.

I have a grid field e_contact that consists of three field/columns:

Name   Phone   Email

{ename}   {ephone}   {eemail}

My code to display this is:

<span><i class="fa fa-fw fa-phone"></i>
  {e_contact}
    <a href="tel:{e_contact:ephone}">{e_contact:ephone}</a> ({e_contact:ename}) 
  {/e_contact}
</span>

<span><i class="fa fa-fw fa-envelope"></i>
  {e_contact}
    <a href="mailto:{e_contact:eemail}">{e_contact:eemail}</a> 
  {/e_contact}
</span>

Which would display:

[icon] Phone (Name)
[icon] Email

If multiple (let's say 3) rows of info is added, I want it to appear like so:

[icon] Phone1 (Name1)   or   Phone2 (Name2)   or   Phone3 (Name3)
[icon] Email1   or   Email2   or   Email3

So, a couple of things...
If no Email is added, then that (2nd) span should not appear on the page at all.
(A Name and Phone will always get added.)

Also, how do i get the field entries to display next to one another as above, with the word 'or' between each instance.

Similarly, the brackets around the name should obviously only appear if a name is entered in the field. (Multiple 'Phone' numbers may get added (in new rows) but only one 'Name' (in the first row).)

Any help is much appreciated!

Answer 1

That's do-able, something like this should get you going, by using count conditionally you'll only ever get output if something exists:

{e_contact}
  {if e_contact:count=="1"}
    <span><i class="fa fa-fw fa-phone"></i>
      <a href="tel:{e_contact:ephone}">{e_contact:ephone}</a> 
      ({e_contact:ename})</span>
  {/if}
  {if e_contact:count =="2" AND "{e_contact:ephone}" != ""}
    or <a href="tel:{e_contact:ephone}">{e_contact:ephone}</a> ({e_contact:ename})
  {/if}
  {if e_contact:count=="3" AND "{e_contact:ephone}" != ""}
     or <a href="tel:{e_contact:ephone}">{e_contact:ephone}</a>({e_contact:ename})
  {/if}
{/e_contact}      
<!-- This above will spit out on one line 
icon / phone1 name1 or phone2 name2 or phone3 name3
-->

{e_contact}
  {if e_contact:count=="1" AND "{e_contact:eemai}" != ""}
    <span><i class="fa fa-fw fa-envelope"></i>
      <a href="mailto:{e_contact:eemail}">{e_contact:eemail}</a> 
    </span>
  {/if}
  {if e_contact:count =="2" AND "{e_contact:eemai}" != ""}
    or <a href="mailto:{e_contact:eemail}">{e_contact:eemail}</a> 
  {/if}
  {if e_contact:count =="3" AND "{e_contact:eemai}" != ""}
     or<a href="mailto:{e_contact:eemail}">{e_contact:eemail}</a> 
  {/if}
{/e_contact}
<!-- This above will spit out on one line 
icon / email1 or email2 or email 3
-->

I'd probably use stash to capture all the variables and manage the output from there but if your new, this, while a tad verbose it should work the way you want.

UPDATE

Given your replies, I've added extra conditionals that checks to make sure the field isn't empty too. If you haven't read the 'conditionals' docs, here's a link