News StyList

Author: Alessandro Tuveri, University of Udine - DISO, at(at)uniud.it

What is this?

News Stylist is a plugin that expands news system plugin functionalities. All modifications can be made within the news system plugin, where you will find two new tabs (News StyList and Swiper Slider).

With one touch only  you can reposition the elements, enable or disable,change data formats, override the label "read more" and so on.  

Enable slider or not - The slider works in conjunction with newsstylist, with two news layout: List view and List selected items.  Swiper slider has been integrated with some functionalities, have a look to: https://swiperjs.com (MIT license).

You can change the position of header, image, extras, hide or show them via News StyList tab and configure the slider accessing to Swiperslider tab.

Note that the options works too with the other news options so that you can get really a wide variety of output without installing any other plugin.

Multiple sliders on the same page are allowed; keyboard use, mousewheel are activated by default.

Download it from T3 repository

Demo

static (no slider) |  default layout + slider |  card news+ slider |  carousel | carousel big text centered | newsletter, plain text (static) 

 

Requirements

  • bootstrap package official (B. Kott) with scss available
  • news (G. Ringer)
  • TYPO3 v9.5+ 

Notes

  • this  extension works only with scss styles
  • this plugin cannot run under other bootstraps, please use and install bootstrap_package (official version)
  • documentation at the moment is not available, but the use is very intuitive, see demos to adjust your options

Howto install

  • download and install the +ext newsstylist
  • include the library newsstylist from Web > Template > Edit whole template

Warning: as usual there are some constants to set (Web > Template > Edit Consants) that you can modify. These constants are used to fill the form with the default values.

Legend

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

Howto use


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 settings editing the News plugin (enlarge the image below):

  • tab General: select List view or List of selected Items
  • tab News Stylist -  select the desider 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 AVAILABLE

  • 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

Trick & Tips

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

  • 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.

Common problems and solution

  • after update the bootstrap_package to v.10.4.16 if you see this error: "Core: Exception handler (WEB): Uncaught TYPO3 Exception: #1442236317: MenuItem "" is not valid | InvalidArgumentException thrown in file ..."
    Solution: goto Admin Tools > Maintenance > clear all cache. This could appear when you run Extension manager.
  • since v 1.5.0 the file constants.ts was not closed properly.
    Solution: Download the latest  version from repository
  • default layout - since version 1.3.1 the default value for items per raw is configured for 3 news per row as default - instead shoud be "1" news per row. This force TYPO3 to split the news in 2,3 o 4 columns.
    Solution: to avoid this behaviour upgrade to 1.5.4 and if the problem is not solved the only way to fix is to re-edit the plug and ajust the value manually.
  • youtube movie within slides works correctly but the movie is not resized automatically to the 100% of space available. This will be fixed in a new version.
  • some styles should be adjusted
  • the output is not what expected, buttons, etc. are printed out despite of the plugin configuration
    solution: include the library newsstylist editing the whole template
  • image not shown - check the plugin configuration and/or open the image properties and select "Show in all views" or "Show only in list news"
  • images have a different size/proportion, so that are misaligned.
    solution:  open each news and expand the image  selection, then click Open Editor button to crop all the images used in list view  with the same width/height (9:16, 4:3, etc.)
  • image is distorted -  check the news plugin configuration > Template > fields: Max width for media elements or Max height for media elements
    Solution:     remove any value inserted
  • some news are not displayed: check if you filled Items per page and Max record displayed under Additional tab and compare it with the settings of slider/newsstylist

    Tested under...

    • bootstrap package 11.0.2+ (T. Knott)
    • NEWS 8.0.x + (G. RInger)
    • TYPO3 v.9.5.x+

      toDO, developement and ideas

      • a new layout called "events" card style
      • new effects: parallax and vertical scroll
      • new layout: scrollbar

      stay tuned, for ideas, bug and other contact me: at(at)uniud.it