Layout Presets Fine-tuning


Each Smart Countdown FX widget or a countdown inserted to a post or page is formatted according to “Layout preset” selected in widget options or as a shortcode attribute. Some standard presets are already included into the plugin package and are available right after you install it.

Smart Countdown FX layouts are very flexible but the built-in presets cover a vast majority of scenarios. But if some day you wish to add new layouts, it will be quite an easy task if you follow the instructions below. An FTP access to your WordPress installation is required, in order to proceed make sure you can copy and edit plugin files.

First locate “layout” sub-folder in plugins directory: “/wp-content/plugins/smart-countdown-fx/inculdes/layouts”. All “.xml” files in this directory are layout presets. A sample if a layout preset (“shortcode_compact_titles_inline.xml”):

<?xml version="1.0" encoding="UTF-8"?>
<layout>
 <paddings>
  <years>1</years>
  <months>2</months>
  <weeks>1</weeks>
  <days>2</days>
  <hours>2</hours>
  <minutes>2</minutes>
  <seconds>2</seconds>
 </paddings>
 <layout>horz</layout>
 <event_text_pos>vert</event_text_pos>
 <labels_pos>bottom</labels_pos>
 <labels_vert_align>middle</labels_vert_align>
 <hide_highest_zeros>1</hide_highest_zeros>
 <allow_all_zeros>0</allow_all_zeros>
 <responsive value="1">
  <scale value="0.5">
   <layout>vert</layout>
   <labels_pos>row</labels_pos>
   <event_text_pos>vert</event_text_pos>
  </scale>
  <scale value="0.8">
   <layout>horz</layout>
   <labels_pos>col</labels_pos>
   <event_text_pos>vert</event_text_pos>
  </scale>
 </responsive>
</layout>

Basic settings

  • paddings: define the minimum number of digits displayed for each counter unit. If a unit value requires more digits they will be added automatically. If actual unit value requires less digits than set as its corresponding padding value it will be left-padded by zeros.
  • layout: the counter block layout. “Horz” stands for horizontal (i.e. row, inline) layout, “vert” – for a column layout.
  • event_text_pos: “vert” (i.e. vertical, title before counter displayed on the top of the counter block, title after counter, if any, displayed below the counter block) is recommended. “horz” (i.e. horizontal, inline) will work for very short titles and only if there is sufficient horizontal space for the widget.
  • labels_pos: define where unit lables should be displayed. Possible options are: right, bottom, top, left.
  • labels_vert_align: only has effect for right or left labels positions. Default setting is “middle” but you can change it to top, bottom, high, low, superscript or subscript.
  • hide_highest_zeros: hide higher counter units if their value is zero. Even if all units are allowed for display but a counter interval is less than e.g. a month, both months and years will be hidden. Default “1”. Change it to “0” if you prefer to display all counter units checked in widget configuration.
  • allow_all_zeros: if lower counter units are not displayed (unchecked in widget configuration) and the event is in close future, the time interval may become less than the lowest unit displayed, thus causing a “blind” effect, e.g. “Time left: 00 hours”. This is somewhat ambiguous as not good looking. With allow_lowest_zero “0” (default) the lowest unit with a zero value will be automatically replaced by the next one which has a meaningful value, so in the example above the counter will display “Time left: 59 minutes”, etc. or even “59 seconds”, etc. if less than one minute is left before event.
  • responsive is a group of settings. It defines responsive behavior rules for the widget. responsive value=”1″ enables responsive feature, value=”0″ will disable it. If disabled (value=”0″), the content of “responsive” node will have no effect.

Saving custom layout presets

Layout preset modification directly in “/wp-content/plugins/smart-countdown-fx/inculdes/layouts” folder comes handy for a quick test but is not suitable for a long-term use scenario – all modified files in “smart-countdown-fx” will get overwritten on every plugin update.

Starting from version 1.4.7 custom layouts are protected from being erased after plugin update.

If you wish to make your custom layout persistent you will have to create “smart-countdown-custom-layouts” folder in “/wp-content/plugins/” directory and move your layout(s) there. All layouts from both plugin and custom folders will be available in widget configuration “Layout preset” drop-down and also as shortcode “layout_preset” attribute value.

Do not forget to give your custom preset a descriptive file name. For example, if you have modified “shortcode.xml” and changed default padding for “weeks” unit to 2 (so that counter intervals show “02 weeks”, “00 weeks” etc. instead of “2 weeks”, “0 weeks” etc.) a suggested file name for this preset would be “shortcode_with_padded_weeks.xml” or similar. The full path to this file should be “/wp-content/plugins/smart-countdown-custom-layouts/shortcode_with_padded_weeks.xml”. Your custom preset will then appear as “Shortcode with padded weeks” in widget configuration.

More about responsive settings

Smart Countdown FX implements its own responsive algorithm and doesn’t depend of theme responsiveness. Unlike themes, which base their responsive behavior on device type / screen width, Smart Countdown FX responsive action depends on the width of its parent container so that the widget fits best into the space provided.

Knowing screen / browser width is not enough for correct responsive behavior. For example, on a desktop with a browser running in full screen mode a widget can be published to a narrow theme position (e.g. 1/3 part of the footer), but a widget inserted into a post can have more horizontal space available (especially if no sidebars are displayed) even when viewed on iPad portrait which has significantly smaller width.

Smart Countdown FX uses the following strategy:

  • Try to render the widget exactly as set in widget options or shortcode (layout, digits sizes, etc.)
  • If the widget fits into the space in theme position (i.e. counter elements do not wrap when laid-out from left to right), no action required.
  • If counter elements have to wrap, Smart Countdown FX scales down the whole widget so that it fits into position without wrapping.
  • The effective calculated scale is used then to decide if we have to adjust widget layout. Nodes in “responsive” section of layout XML document define alternative layouts to apply if resulting scale is less or equal to the node “value” attribute.
  • If the right scale node is found all layout rules listed in the node are applied to the widget, otherwise widget settings rules are applied.
  • After alternative layout is applied the widget is re-scaled to a maximum size which is not bigger than original (from widget settings) and still fits into theme position.

This method guarantees that the widget will always fit in the page flow and its elements will be visually big enough for good reading experience.

Three alternative layout rules are supported:

  • layout: available options are – “horz” and “vert”. “Horz” (horizontal) – display counter units inline, from left to right. “Vert” (vertical) – display counter units in a column, from top to bottom (typical for sidebar).
  • labels_pos: available options are – “row” and “col”. They are not direct synonyms of “right” or “bottom”. There are 4 options for label placement in basic layout settings, two of them (“left” and “top”) render the labels before digits in page flow, the other two (“right” and “bottom”) render the labels after digits. Responsive adjust options “row” and “col” will not change elements order, so that “right” will become “bottom” and “left” will become “top” when “col” rule is applied. When “row” rule is applied, “top” will become “left” and “bottom” will become “right”.
  • event_text_pos: available options are – “horz” and “vert”. Most layouts use vertical event texts (titles) placement, i.e. “title before” – on top of the counter block and “title after” – below the counter block. However if event title is short and there is enough horizontal space for the widget, event text can be placed inline with the counter block. Use event_text_pos “vert” value to take titles out of “all inline” display and thus free more space for the counter block.

Review the sample XML document above:

  • If after scaling the widget loses less than 20% of its size, layout will not change. All widget elements will look slightly smaller (80% of original size) but should be readable.
  • If resulting scale is between 0.51 and 0.8 the only rule we actually change is “event_text_pos” – set it to “vert”.
  • If resulting scale falls to 0.5 or below we also change counter “layout” – display counter units in a column.

Creating new layout presets

I would advise to use one of the existing presets as a starting point. Make a copy of the preset XML file and place it in the same directory giving it a meaningful name (this name will appear in “Layout preset” dropdown control in widget options, so it should be descriptive). Make appropriate changes and save the file.

You can then select the recently created preset as current layout in the widget options or use its file name as “layout_preset” attribute in shortcode (do not forget .xml extension).