[Resolved] Repeating Fields with Custom HTML for each item, like icons or list

[Author]

Posts

[simranjeetS-2]

Tell us what you are trying to do?
I have a field - practice areas. It has several values. I want values to be shown in unordered list or in new lines - WITH font awesome in front. But I failed.
I tried this -

<?php echo do_shortcode('[types field="courts" separator="<hr />"] '); ?>

- but I cant use font awesome in this.
tried this -

<ul class="fa-ul">
  <li><i class="fa-li fa fa-legal">
<?php echo do_shortcode('[types field="courts" separator="</li><li>"] '); ?>
</ul>

Failed.

Is there any documentation that you are following?
None
Is there a similar example that we can see?
hidden link
What is the link to your site?
hidden link

[Beda]

To create a list or other HTML structures with Repeating Fields I suggest doing this with the ShortCode in a Post Body or View.

You can use the Separator and the Loop intelligently to combine HTML and opening/closing tags in the Field's separator.

The logic is this:

- get the final HTML you want
- make sure you open the HTML before the actual field renders
- as separator use firstly the closing tags, then, reopen the tags for the next item
- make sure the Loop closes with a Closing set of tags.

Example:

<ul><li>[types field='toolset-line' separator='</li><li>' ][/types]</li></ul>

Note that you need to add this HTML to the "Custom Separator" Field in the GUI when inserting the Repeating Field:

</li><li>

It will then automatically convert to encoded characters when you insert the ShortCode.

The same logical approach can be taken with other HTML or even FontAwesome Items.

I do not suggest to use that in PHP but in what Toolset was created for, which is to display this as a ShortCode.

[simranjeetS-2]

Hi. I already know how to use this shortcode and get result with that. I know how to use

 <ul><li>[types field='toolset-line' separator='</li><li>' id='$post'][/types]</li></ul>

I did that when I created my website with views. But views does not work properly with toolset recommended website themes. This is evident from questions I have asked earlier.

That is the reason I am changing php files. I want php code, not shortcodes. At another place, I was able to get what I wanted. https://toolset.com/forums/topic/in-cred-form-i-want-photos-to-be-accepted-only-if-they-are-of-a-particular-size/

[Beda]

OK.

The toolset is not created with the main purpose of PHP in mind, that is why there it's a little more limited.

Now, with PHP you can do all this, but you will not be able to rely on Toolset API and Support at all time doing so.
https://toolset.com/toolset-support-policy/

In PHP, my example here could look like this:
https://toolset.com/forums/topic/showing-font-awesome-icons-before-field-output-in-unordered-list/#post-621673

$field = types_render_field( 'toolset-line', array("separator" => '</li><li>') );
if (!empty($field)) {
  echo '<ul><li>' . $field . '</li></ul>';
}

Note that the "separator" must be encoded, as seen in my screenshot

[simranjeetS-2]

Thanks for reply. As I have mentioned here - https://toolset.com/forums/topic/showing-font-awesome-icons-before-field-output-in-unordered-list/#post-621537 , I was already able to achieve the same result with another code mentioned in this link. What I could not achieve was to add this before each listed entry instead of checks

 <i class="fa-li fa fa-legal"> 

[Beda]

Each HTML which is in the separator needs to be first converted (at least, in ShortCodes).
You can use this tool here for example:
hidden link

The logic is always the same:
first open, then close/open in the separator, then close.

Hence, adding your Custom HTML in PHP (this is not part of Toolset Support, as stated earlier), it looks like this:

$field = types_render_field( 'toolset-line', array("separator" => '</li><i class="fa-li fa fa-legal"><li>') );
			if (!empty($field)) {
  				echo '<ul><li><i class="fa-li fa fa-legal">' . $field . '</li></ul>';
			}

In any way, at some point "< and >" can become an issue, as well as "" apostrophes.
Eventually one single typo can destroy the whole list.
If there is complex HTML executed within the ShortCode call or types_render_field() this may failt the final output, as WordPress does not really allow this kind of outout, it expects us to add HTML ourselves or outout it directly with the field content.

The above code should work but due to the missing coversion (this forum does conver back) maybe you try the Tool shared above, and try with different approaches.

It is not the reccomended way how to create lists or add the icons.
The Separator accepts HTML, yes, but it is not a "list builder" or "Complex HTML builder".
It is barely intended as separator, which usually is limited to a naroow set of signs.

It may be that complex HTML will not work in that separator, at some extent.

Another point to observe always is to try to ouput the Field as "Raw" value, so the HTML from the Field content itself does not interfere with the sepearator HTML.

For real complex HTML, the right approach is to create posts and list them, or use a View Loop, to list fields of a Post.

[simranjeetS-2]

Thanks a lot