Displaying file details – sizes and prices

You can configure the way file information is displayed on several pages. There is a number of settings in Back office and you can also use CSS to hide or change the appearance of the elements that are used. Please read the articles about File collections and download sizes and Linking files to suppliers first.

Displaying file information on the preview pages

If a file is part of a RF collection, a table is displayed showing a row for each size that you have configured via File collections and download sizes. Note that the collection is determined by the supplier or the group that the supplier is part of. Or the collection that is marked as Default if both the supplier and the group have no collection assigned.

If you have selected “File info” to be displayed for the available sizes (you can change this for each size separately) then the size in pixels, the print size in cm and in inches, and the size on disk will be displayed. If not, only the labels will appear (e.g. High res, Medium res and so on). Each of the file info elements is displayed inside a div with the class “sizeinfo”. You can use CSS to hide details that you don’t want or to change the appearance of what is displayed.

Note that which file sizes are available for a particular file, is determined by a number of things – which is explained in this article: File collections and download sizes.

The file information is displayed using the following HTML:

<div class="sizeinfo sizelabel">
<div class="sizeinfo sizelpixels">
<div class="sizeinfo sizecm">
<div class="sizeinfo sizeinches">
<div class="sizeinfo sizedisk">

The labels that are added are inside spans so that you can easily manipulate the labels too. For example:

<div class="sizeinfo sizecm">
        62.31 x 41.59 <span class="lcm"> cm <span class="dpi">(300 dpi)</span></span>
</div>

Hiding properties

To hide or show specific properties, go to Site configuration, Metadata display, Collection file size settings – and select the properties that you want to show or hide.

This is the recommended method. Alternatively, you can use CSS to manipulate the HTML output:

• If you don’t want the label cm to show, then add css to hide it. E.g. span.lcm {display:none}
• If you don’t want the label (300 dpi) to show, then add css to hide it. E.g. span.dpi {display: none}
• If you don’t want the printsize in cm information to at all, then add css to hide that element. E.g. .sizeinfo.sizecm {display:none}

And you can do the same for the other sizeinfo elements as shown above.

Print sizes

Note that the print sizes (in inches and cm’s) are calculated with the DPI settings (normally 300 or 72) that are configured for the selected file sizes.

If you have configured a size setting to not display file information, then the class .info0 is applied to hide the information. It is however still available in the HTML. The class can be changed as required:

#rfsizetable .info0 {
     display:none;
}

CM’s and Inches

Note that you can hide print sizes via Site configuration, Metdata display, Collection file size settings. This hides both the print size in inches and in cm’s. If you want only to hide either the size in inches or in cm’s, then you’ll have to create a CSS rule.

Size on disk / Download size

The sizedisk element displays the file size in MB rounded to 1 decimal. The sizes for smaller/derived files are estimates only, calculated using the size in MB of the master file and the number of pixels on the longest side. Due to jpeg compression algorithms it is not possible to calculate accurate sizes. If you have enabled display of File info, but you don’t want to show the download sizes, then change the settings via Site configuration or add a CSS rule to hide the element.

Displaying prices and currencies

The second column of the RF file information table shows the prices that you have configured for the collection of which the file is part. If you use currencies, the price is displayed in the main currency and if the user’s currency is different then it is displayed in the user’s currency underneath.

If you want to display prices using the site’s currency only or the user’s currency only, then (in Back office, Price calculator & collections) click on File Collections in the side bar to list the collections. The toolbar at the top shows radiobuttons next to the label Display prices:

• User’s currency
• Base currency
• Both currencies

Select the option that you want to use and then click on the Save currency setting button.

You can also change the appearance by use of CSS. The main currency price is inside a span with the class name pricemaincurrency, additional currencies are displayed inside a span with the class name priceusercurrency. If the user’s currency is not the same as the main currency, then the main currency span element also has the class hasothercurrency1. You can use this to for instance hide the main currency and to show the price in the user’s currency only. For example:

span.pricemaincurrency.hasothercurrency1 {display:none}