Opening File Link in a new tab

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to display a link to download a file stored in a custom field. That link should open a new tab in the same window, and should show an icon instead of the file name. Ideally, the icon would change depending on the file type.

Solution:
The variable file type icon is not a built-in feature of Toolset, and would require your own custom code. However the rest of the link could be constructed like so:

<a href="[types field='your-field-slug' output='raw'][/types]" target="_blank"><img src="path/to/icon.png" /></a>

Relevant Documentation: https://toolset.com/documentation/customizing-sites-using-php/functions/#file

This support ticket is created 6 years, 7 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Setting up custom fields, Types plugin

This topic contains 2 replies, has 2 voices.

Last updated by theW 6 years, 7 months ago.

Assisted by: Christian Cox.

Author

Posts

October 7, 2017 at 8:32 pm #577057

theW

Tell us what you are trying to do?
Hi,
I'm using the "File" Custom field.
After a value (a PDF) it's added in the post editor, when it gets clicked in the front end, the file opens in the same window.
I would like the link to open in a new tab in the same window.

Also, how can I display this file, as an icon with a name instead of link?
Ideally, if users would upload an excel file, or word file, the icon would change accordingly with the name under it.
But I could settle for one generic Icon with the name under, that opens the file in a news tab when clicked.

Currently this is how my shortcode looks in my views template:
[types field='file' link='true' class='target-new:tab;' separator=', '][/types]

Is there any documentation that you are following?
No

Is there a similar example that we can see?
Yes, following this link, when people click the green button, a PDF opens in a new tab.
hidden link

What is the link to your site?
hidden link

October 8, 2017 at 3:22 pm #577112

Christian Cox

Ideally, if users would upload an excel file, or word file, the icon would change accordingly with the name under it.
This would require some custom code, which falls outside the scope of the support we provide here in the forum. The file field stores a URL, but doesn't parse that to determine file type. You could write a custom shortcode to look at the URL file extension and return a CSS class to append to your link tag or return a different image URL for your img src attribute.

Also, how can I display this file, as an icon with a name instead of link?
If you want to use an icon instead of a text link, you can construct your own a tag using the file URL as the href attribute, then style the a tag using CSS and the image of your choice. See below.

I would like the link to open in a new tab in the same window.
Apply the target attribute to the link tag manually as shown below.

<a href="[types field='your-field-slug' output='raw'][/types]" target="_blank"><img src="path/to/icon.png" /></a>

More information about the formatting options for the file field type can be found here. Click the orange "+ More" button to show examples:
https://toolset.com/documentation/customizing-sites-using-php/functions/#file

October 11, 2017 at 4:11 pm #577956

theW

Thank you very much Christian!

This ticket is now closed. If you're a Toolset client and need related help, please open a new support ticket.