[Resolved] Showing repeating file type fields

[Author]

Posts

[lucaP-14]

Hi there,

I've created a post-type called Bandi. For this post-type I have a group of custom fields where you can upload files.

I'm now creating a template where I would like the files to display in a way similar to what you can see in the screenshot

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

Thank you for waiting, while I performed some tests on my website.

In order to achieve a layout similar to the screenshot, you can follow these steps:

1. You can start by inserting a "Grid" block in your content template, which has two columns and 3 rows, as you have 3 field type custom fields.
( ref: https://toolset.com/block-item/grid/ )

2. On the left column of each row, you can type the title text, that you'd like to show before the file links.

3. On the right column of each row, you'll insert the "Single Field" block for the file type fields which can only have one file, and the "Repeating Field" block for the fields which can have multiple files.

Example screenshot "Single Field" block:
hidden link

Example screenshot "Repeating Field" block:
hidden link

4. Please also include a special class "special-link" class into the "File link extra classes" field of these two blocks, as can be seen in the last two screenshots.

These classes will help in targeting these links through custom CSS and JS code.

5. Next, in the "JS editor" field of the content templace, you'll include some custom script, so that it can get the file's extension type and add a special class in the generated links (e.g. pdf-type, xls-type etc )

jQuery(document).ready(function(){
   jQuery('a.special-link').each(function(){
      var link = jQuery(this).attr('href');
      var extension = link.substr( (link.lastIndexOf('.') +1) );
      if (extension){
        jQuery(this).addClass(extension+'-type');
      }
   }); 
});

6. You can upload the icon/image files in the media library for the default/fallback icon and other type of file types and copy their links for example:

yourwebsite.com/wp-content/uploads/2020/09/default-file-icon.jpg
yourwebsite.com/wp-content/uploads/2020/09/PDF-file-icon.jpg
yourwebsite.com/wp-content/uploads/2020/09/XLS-file-icon.png

7. The last step would be to include some custom CSS code in the content template "CSS editor", to link these file type icons with each type of file link and show them as a background image:

a.special-link {
    color: transparent;
    display: block;
    background-image: url(yourwebsite.com/wp-content/uploads/2020/09/default-file-icon.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
    float: left;
}

a.special-link.pdf-type {
    background-image: url(yourwebsite.com/wp-content/uploads/2020/09/PDF-file-icon.jpg);
}

a.special-link.xls-type {
    background-image: url(yourwebsite.com/wp-content/uploads/2020/09/XLS-file-icon.png);
}

Please replace the icon image URLs with the actual ones from your website.

Example screenshot of the result:
hidden link

I hope this helps and please let me know if any step is not clear.

Note: The custom code examples from our forum are shared to get you started in the right direction. You're welcome to adjust them as needed and for more personalized customization assistance, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar

[lucaP-14]

Hi Waqar,
thank you for you help.
I've come across these problems, though:
1. Even though I uploaded different images for the different doc types, it only shows the fallback icon for all documents.
2. Where can I add the _blank attribute so that pdfs open in a new tab when you click on them?
3. I've used the Grids and columns as you suggested but this way, on small screens the right column falls underneath the left column behaving like a column and not a row. I'm not sure I've been able to set up rows correctly as I'm new to Gutenberg and it's no so straightforward...
I'll appreciate your help once again, thanks

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thanks for the update and glad that it worked.

1. I noticed that some extra special characters were saved in the custom script added in the content template. I've added it again and it is now working properly to add the correct file type class and hence show the correct file type icon.

2. I've updated the custom script slightly so that it also adds the target="_blank" attribute to these special links:

jQuery(document).ready(function(){
   jQuery('a.special-link').each(function(){
      jQuery(this).attr('target', '_blank');
      var link = jQuery(this).attr('href');
      var extension = link.substr( (link.lastIndexOf('.') +1) );
      if (extension){
        jQuery(this).addClass(extension+'-type');
      }
   });
});

3. User experience-wise, it is a good idea to stack-up the grid columns on smaller screens, as the width is limited.

I've noticed that you've placed the text and the field blocks for both file fields in a single row. I've moved them into their separate rows, so that, when the grid blocks are stacked up on smaller screens, each field's file(s) show below the correct text.

Back-end screenshot: hidden link
Front-end screenshot: hidden link

[lucaP-14]

Oh wow! Worked like a charm, thanks.
One question: if I add a separator, for example " | " in the Repeating field block>Display settings>Separated by>Separator, it does add a separator but not between the custom fields (So, in my case, between the custom images for the documents) but at the end... How can I add a separator or space between them?

New threads created by Luo Yang and linked to this one are listed below:

https://toolset.com/forums/topic/how-can-i-add-a-separator-or-space-between-the-custom-fields/

[lucaP-14]

Also, I added some conditions so that all the fields (except the ones in the first row) only show if the field is not empty. It's working well, but as you can see in the example, the fourth row (Allegato 3) is not displaying anything, which is correct, but the background coloured row is still showing on the front end with no content.. of course. Is there a way to add a condition to the columns or to these areas so that if they have no content to display, they also don't show any background?
There will be more "rows" like these, even up to 10-12, so it wouldn't be nice to have them on the frontend with no content..

Thanks again

New threads created by Luo Yang and linked to this one are listed below:

https://toolset.com/forums/topic/is-there-a-way-to-add-a-condition-to-the-columns-or-to-these-areas-so-that-if-they-have-no-content-to-display/

[Luo Yang]

Hello,

Waqar is on vacation, I will take care of this thread.

According to our support policy
https://toolset.com/toolset-support-policy/
we prefer one ticket one question, I assume the original question of this thread is resolved.

For your other new questions, please check the new threads here:
https://toolset.com/forums/topic/is-there-a-way-to-add-a-condition-to-the-columns-or-to-these-areas-so-that-if-they-have-no-content-to-display/
https://toolset.com/forums/topic/how-can-i-add-a-separator-or-space-between-the-custom-fields/

[lucaP-14]

My issue is resolved now. Thank you!