Views: 6576
Last Modified: 10.10.2012

Customizing The Form Fields And Behavior

To make adding a large number of information block elements easier, you can configure the form the website users will open for creating elements by, for example, assigning default values to the fields or preconfiguring the field value types. To customize the element creation form for a certain information block type, open the information block properties form (Content > Information Blocks > Information Block Types > [information block name]) and click the Fields tab.

Remember: you will use the Field tab controls to set the default field values.

Click to Enlarge

This form shows the following three columns.

  • Element Field: specifies the name of the field you can configure;
  • Req.: specifies that this field must have a value. If a user fails to provide an entry in such field, the element will not be created and the system will alert a user to provide a valid field value.

    Note: there are fields that are always required (by design). You cannot toggle the Required checkbox for such fields.
  • Default Value: specifies the text or other input a field will contain when a user opens the element creation form.

You can use the text fields in the Default Value column to give hints for the content managers. For example, you can type in the following brief instructions in the Preview Text and Detailed Description fields: Short news headline here and Full news text, respectively.

Image Processing

Generally, the websites use different size variants of the same image for an information block element: for example, a preview image and a detailed photo. Adding multiple elements with images of different size versions is a tedious task consuming much time and effort. However, with the Information Block module features, you can easily do without having to resize images manually: just upload a large size image, and specify the image processing parameters.

As an example, the following settings configure an information block in such a manner that adding a large scale image will result in the two image sizes, each with specified quality and size.

  • Check the Auto-create preview image from detail image box;
  • Check the Auto-resize large images box. The uploaded images will be rescaled to not exceed the dimensions set in the next two fields;
  • In the fields Maximum width and Maximum height, specify the thumbnail size. The resizing algorithm processes an image with respect to its proportions. Setting the maximum dimensions guarantees that the thumbnail does not mess up the page layout;
  • Check the Ignore scaling error box to print the image “as-is” if it fails to be processed correctly.

    Note: The system can process the most common Web image formats: jpg, gif, png. Images in other format will not be processed; the system will either leave an image untouched, or return an error, which is defined by the Ignore scaling error option.

The following options can be used to control the image quality, which might require more server processing power.

  • Check the Preserve quality when scaling box;
  • Set the required quality (0-100). Note that values close to 100 will increase file size, sometimes significantly.

The same scaling parameters apply to the Detailed image field group.

For both preview and detailed texts, in the Description Type fields, set the type of the text editor a user will use to enter the text. Plain text is commonly the best option for the previews, while the detailed description usually requires rich text formatting, so use HTML here. This will also enable you to import HTML descriptions from CSV files.

Customizing The Element Creation Form

An element creation form can be adjusted to match user preferences of the website content manager. After having been configured, the form appears in a customized layout in Control Panel as well as in the public section.

You can move any form field between the form tabs thus providing the best user experience for each information block depending on the content an information block contains.

To customize the form, do the following.

  • Open any information block element for editing. Click Settings on the context toolbar:

    Click to Enlarge

  • The Customize form appearance dialog box will show up;

    Click to Enlarge

  • Customize the form as required by adding or removing the fields to/from the appropriate tabs.

Once you have done adding and removing fields, click Save. The following screenshot pictures an example of the customized element editor form:

Click to Enlarge

Whenever you want to revert the form layout to default, click the button Switch to default form view at the top right.

Courses developed by «Bitrix», Inc.