0

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!

1
  • If an answer is correct or helpful please mark. Thanks- Apr 13, 2017 at 20:57

1 Answer 1

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

5
  • Thanks very much for that. How would the code change though so that "If no Email is added, then that (2nd) span should not appear on the page at all?"
    – ZEDG
    Apr 12, 2017 at 14:11
  • Because even though that grid field/column is emply, it is still producing <span><i class="fa fa-fw fa-envelope"></i><a href="mailto:"></a></span>
    – ZEDG
    Apr 12, 2017 at 14:23
  • Since there is three columns in the grid field, if only one of the fields is filled then it is still producing code. 'Count' references the row, and not the individual columns in the row.
    – ZEDG
    Apr 12, 2017 at 15:27
  • Just updated my answer Apr 13, 2017 at 0:02
  • Thankyou works great. To close the span 'after' any/all conditionals I removed it from where you had it and added: {e_contact limit="1"}{if e_contact:ephone}</span>{/if}{/e_contact}
    – ZEDG
    Apr 14, 2017 at 8:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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