Since version 3.4.0 WordPress File Upload plugin became responsive, through fitmode attribute.
When fitmode is set to “fixed” (default), the plugin behaves as before, maintaining backward compatibility.
When fitmode is set to “responsive”, drawing of elements is totally different and improved as follows:
- dimensioning of the plugin’s elements using the percent (%) symbol is accurate
- elements wrap when they do not fit to the width of the plugin
To demonstrate, here is a very simple implementation of the plugin, using the following 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 plugin’s total width has been set to 75% of the page width, while its elements have also percentage widths, in relation to the plugin. If the plugin’s width changes its elements will also adjust to fit the new width. Here is an example where the plugin’s width is 100%:
Here is another example of how the plugin will look in iPhone 6 screen portrait mode:
In the above example, the plugin’s elements had a percentage width in relation to the total plugin width. Suppose that Select and Upload buttons have a fixed width of 120px as in the shortcode:
[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%"]
which generates the following upload form on the screen of a desktop computer:
The same shortcode in an iPhone 6 portrait mode looks like this:
while in an iPhone 4 which has a smaller screen looks like this:
Notice that in mobile screens the Select and Upload buttons wrap because they do not fit in the same line, as should a fully responsive plugin do.
Responsiveness is ideal when adding the plugin in a sidebar as a widget, where it needs to have a small width.
For any questions, problems or more information just contact us.
The Iptanus Team