The New Responsive Iptanus File Upload Plugin

The Iptanus File Upload plugin has been responsive since version 3.4.0, through its fitmode attribute.

Left at its default of “fixed”, the form behaves as it always did, so nothing breaks on an existing site.

What “responsive” changes

Set fitmode to “responsive” and the elements are laid out differently in two respects:

1. widths given as a percentage (%) are accurate;
2. elements wrap when they no longer fit across the width of the form.

A worked example

Here is a simple form, built from this shortcode:

[wordpress_file_upload fitmode="responsive" placements="title/filename+selectbutton+uploadbutton/filelist/message" selectbutton="Select" uploadbutton="Upload" widths="plugin:75%, filename:50%, selectbutton:23%, uploadbutton:23%, filelist:100%, message:100%"]

which generates the following upload form on a page:

The form occupies 75% of the page width, and each element takes a percentage of the form. Change the form’s width and the elements follow. At 100%:

And on a phone screen in portrait:

Mixing fixed and percentage widths

Every element above was sized as a percentage of the form. Now give the Select and Upload buttons a fixed width of 120px instead:

[wordpress_file_upload fitmode="responsive" placements="title/filename+selectbutton+uploadbutton/filelist/message" widths="plugin:100%, filename:58%, selectbutton:120px, uploadbutton:120px, filelist:100%, message:100%"]

On a desktop screen that gives:

The same shortcode on a phone in portrait:

and on a smaller phone screen again:

On the narrow screens the Select and Upload buttons wrap onto their own line, because they no longer fit beside the filename — which is what being responsive means.

This matters most when the form goes into a sidebar as a widget, where the space it has is narrow to begin with.

If you have questions or problems, or would like more information, please contact us.

The Iptanus team