Howto configure NewsStylist

LEGEND AND TERMINOLOGY

Please have a look to the image to undestrand the blocks and configure the output accessing to plugin news > tab Newsstylist:

Insert the news plugin

  • edit the page where you want to insert your News plugin
  • insert the  News plugin

Edit the news plugin

    You can change the default settings editing the News plugin as follows:

    • tab General:
      • news below v.11.3- select List view or List of selected Items 
      • news v.11.3 or greater - select News article list (incl. detail view)or News article list (incl. detail view) or News article list (curated)
    • tab News Stylist -  select the desided layout and change the settings below. This is useful to get a static view of the news items.
    • tab Swiperslider -  here you can enable the slider (https://swiperslider.js), under MIT license, to get dynamic output, with some effects (default slide, fade, flip, coverflow). You can enable or not the slider and configure it. Note that the value of field background color (colorpicker) is always used (doesn't matter if you have enabled or not the slider).

    Layouts

    You can select the desired layout under News StyList tab -> layout:

    • default  (static, no slider) - this layout is useful to hide/show or move some elements in  List view mode. Also, you can get an output until 4 columns. Default output also works with swiper slider.
    • cards - you can select 1,2,3,4 columns and according to the maximum news to display (see news configuration) you can get one or more rows
    • carousel / carousel big text centered - configure it with default mode (static) or with slider enabled. If you activate the slider please select fade effect or flip and from Appearance tab select no frame to get the image full page. The news image will be used as background, centered verically and horizontally. If needed, change the height of the frame.
    • newsletter-plain - this can be useful to obtain an output on a particular page where you can copy the text (dragging the mouse) and then paste it into a textarea (ie. Direct Mail) to send plain format newsletter

    Now you can play around the options and change the values until the output fits your needings.  The demo pages show, for each layout, the options used.

    Although there are many combinations of options, some results may be unexpected.

    Image and text settings

    To reach the right output you have to configure two settings: Text columns size (style)   and Image columns size (style)  under the newsslider tab as follows:

    • horizontal align of text and image: the sum should be equal to 12 if you need to have i.e. an image aligned to right (col-md-4)  and the text to the left (col-md-8)
    • vertical align set the two fields with the value of  12 as,follows: Text columns size (style (col-md-12)  and Image columns size (style (col-md-12)

    In this way you can assign more or less space to any item. The sum should be always 12

    Trick & Tips

    Please pay attention to the layout selected; the output depends on the other parameters configured via news tabs, i.e.;

    • some output is restricted to one item at time. I.e. swiperslider > fade or swiperslider > flip. 
    • cards: if you put the plugin with one card with flip/fade effect within a large column, the output keeps 100% of available space.
      To avoid this, card elements  configured as follows, will be larger maximum 540px:
      • tab: newsstylist > layout Cards (card menu style)
      • tab: newsstylist >  Items per row:  1
      • tab: swiperslider > Items per slide: 1
    • to limit the news displayed on the page configure the Plugin via Additional tab, filling the fields:
      Max record displayed and Items per page
    • these fields will work togheter with the newsstylist fields, so you can "combine" them to get the desired  output: Cards/default layout, number of items per row (ignored if swiper slider active) or if you selected layout Cards, use the field Cards, swiper slider: number of news items per slide  
    • however some fields are not available for all layouts i.e. when you disable show extra info (all extra info disappears, not matter if you selected or not show extra time, etc.