You are here

README.txt in Slick extras 7.2

Slick Example
================================================================================
Provides samples for Optionsets, Image styles, Slick Views blocks and a few
supported alters.

Please do not use this module for your works, instead clone anything, make it
yours, and use it to learn how to make the most out of Slick module.
This module will be updated at times to reflect the best shot Slick can give,
so it may not keep your particular use.


QUICK STEPS
--------------------------------------------------------------------------------
Assumed you already installed Slick example, Image and Devel generate modules.
If not, please install and enable them at "admin/modules".

Visit the following pages:

1. admin/structure/types/add
   Create a dummy content type, say "Slideshow", or use an existing one.
   Hit "Save and add fields", landed to #2 page.

2. admin/structure/types/manage/slideshow/fields
   Add two field types of image named exactly as below for now:
   o Image (single value).
   o Images (multiple values).
   Later can be Media file, Field collection, etc.

3. admin/config/development/generate/content
   Generate "Slideshow" contents.

4. admin/structure/block
   Place the Slick example Views blocks, prefixed with "Slick X:", at any wide
   region at a particular testing page, and see your slicks there.


Enjoy!


To learn more about the slicks, go to:
  A. admin/structure/views
     Find "Slick example", and hit "Edit" or "Clone", and make it yours.
     Only "Block: grid" is expecting "Image" from "Article". The rest "Images".
     Adjust and change anything.

  B. admin/structure/types/manage/slideshow/display
     Find "Images" and add a formatter "Slick carousel" under "Format".
     Play with anything and see the changes at its full page.

Be sure to disable "Cache" during work, otherwise no changes are visible.
Use the pattern with different field names and paths to any fieldable entity
later for more complex needs.


SLOW STEPS
--------------------------------------------------------------------------------
The Slick example is just providing basic samples of the Slick usage:
- Several optionsets prefixed with "X" available at "admin/config/media/slick".
  You can clone what is needed, and make them disabled, or uninstalled later.

- Several view blocks available at "admin/structure/views".
  You can clone it to make it yours, and adjust anything accordingly.

- Several slick image styles at "admin/config/media/image-styles".
  You can re-create your own styles, and adjust the sample Views accordingly
  after cloning them.


REQUIREMENTS
--------------------------------------------------------------------------------
Adjust content type to any fieldable entity: node, user, paragraphs, Media, FC,
etc.
- field_image, as available on Article content type of Standard install.
- field_images, must be created before seeing this example useful immediately.
- node/3 containing field_images.

See "admin/reports/fields" for the list of your fields.


MANAGE FIELDS
--------------------------------------------------------------------------------
To create the new field "Images":
  1) Go to: admin/structure/types
     Choose any "Manage fields" of your expected content type, for easy test
     I recommend Article where you have already a single Image. Basic page is
     fine too if you have large carousels at Basic pages. Or do both.
  2) Add new field: Images (without "field_" as Drupal prefixes it automatically)
  3) Select a field type: Image
  4) Save, and follow the next screen.
     Be sure to choose "Unlimited" for the "Number of values".

You can also do the similar steps with any fieldable entity:
  o admin/structure/field-collections
  o admin/structure/paragraphs
  o admin/config/people/accounts/fields
  o etc.

All requirements may be adjusted to your available instances, see below.

To have various slick displays, recommended to put both "field_image" and
"field_images" at the same content type. This allows building nested slick or
asNavFor at its very basic usage.

You can later use the pattern to build more complex nested slick with
video/audio via Media file fields or SCALD atom reference when using with Field
collection module.

Shortly, you have to add, or adjust the fields manually if you need to learn
from this example.


VIEWS COLLECTION PAGE
--------------------------------------------------------------------------------
Adjust the example references to images accordingly at the Views edit page.
 1) Go to: admin/structure/views
 2) Edit the Views Slick example before usage, adjust possible broken settings:
    admin/structure/views/view/slick_x/edit
    The first block depends on node ID 3 which is expected to have
    "field_images":
    admin/structure/views/view/slick_x/edit/block

    If you don't have such node ID, adjust the filter criteria to match your
    site node ID containing images.
    If you don't have "field_images", simply change the broken reference into
    yours.

    
GRID
--------------------------------------------------------------------------------
Slick grid set to have at least 10 visible images per slide to a total of 40.
Be sure to have at least 12 visible images/ nodes with image, or so to see the
grid work which results in at least 2 sets of grids.

Change the numbers later once all is set, and get a grasp of it.

To create Slick grid or multiple rows carousel, there are 3 options:

1. One row grid managed by library:
   Visit admin/config/media/slick,
   Edit current optionset, and set
   slidesToShow > 1, and Rows and slidesperRow = 1

2. Multiple rows grid managed by library:
   Visit admin/config/media/slick,
   Edit current optionset, and set
   slidesToShow = 1, Rows > 1 and slidesPerRow > 1

3. Multiple rows grid managed by Module:
   Visit admin/structure/views/view/slick_x/edit/block_grid from slick_example,
   Be sure to install the Slick example sub-module first.
   Requires skin "Grid", and set
   slidesToShow, Rows and slidesPerRow = 1.

The first 2 are supported by core library using pure JS approach.
The last is the Module feature using pure CSS Foundation block-grid. The key is:
the total amount of Views results must be bigger than Visible slides, otherwise
broken Grid, see skin Grid above for more details.


READ MORE
--------------------------------------------------------------------------------
See slick_example.module for more exploration on available hooks.

And don't forget to uninstall this module at production. This only serves as
examples, no real usage, nor intended for production. But it is safe to keep it
at production if you forget to uninstall though.

File

slick_example/README.txt
View source
  1. Slick Example
  2. ================================================================================
  3. Provides samples for Optionsets, Image styles, Slick Views blocks and a few
  4. supported alters.
  5. Please do not use this module for your works, instead clone anything, make it
  6. yours, and use it to learn how to make the most out of Slick module.
  7. This module will be updated at times to reflect the best shot Slick can give,
  8. so it may not keep your particular use.
  9. QUICK STEPS
  10. --------------------------------------------------------------------------------
  11. Assumed you already installed Slick example, Image and Devel generate modules.
  12. If not, please install and enable them at "admin/modules".
  13. Visit the following pages:
  14. 1. admin/structure/types/add
  15. Create a dummy content type, say "Slideshow", or use an existing one.
  16. Hit "Save and add fields", landed to #2 page.
  17. 2. admin/structure/types/manage/slideshow/fields
  18. Add two field types of image named exactly as below for now:
  19. o Image (single value).
  20. o Images (multiple values).
  21. Later can be Media file, Field collection, etc.
  22. 3. admin/config/development/generate/content
  23. Generate "Slideshow" contents.
  24. 4. admin/structure/block
  25. Place the Slick example Views blocks, prefixed with "Slick X:", at any wide
  26. region at a particular testing page, and see your slicks there.
  27. Enjoy!
  28. To learn more about the slicks, go to:
  29. A. admin/structure/views
  30. Find "Slick example", and hit "Edit" or "Clone", and make it yours.
  31. Only "Block: grid" is expecting "Image" from "Article". The rest "Images".
  32. Adjust and change anything.
  33. B. admin/structure/types/manage/slideshow/display
  34. Find "Images" and add a formatter "Slick carousel" under "Format".
  35. Play with anything and see the changes at its full page.
  36. Be sure to disable "Cache" during work, otherwise no changes are visible.
  37. Use the pattern with different field names and paths to any fieldable entity
  38. later for more complex needs.
  39. SLOW STEPS
  40. --------------------------------------------------------------------------------
  41. The Slick example is just providing basic samples of the Slick usage:
  42. - Several optionsets prefixed with "X" available at "admin/config/media/slick".
  43. You can clone what is needed, and make them disabled, or uninstalled later.
  44. - Several view blocks available at "admin/structure/views".
  45. You can clone it to make it yours, and adjust anything accordingly.
  46. - Several slick image styles at "admin/config/media/image-styles".
  47. You can re-create your own styles, and adjust the sample Views accordingly
  48. after cloning them.
  49. REQUIREMENTS
  50. --------------------------------------------------------------------------------
  51. Adjust content type to any fieldable entity: node, user, paragraphs, Media, FC,
  52. etc.
  53. - field_image, as available on Article content type of Standard install.
  54. - field_images, must be created before seeing this example useful immediately.
  55. - node/3 containing field_images.
  56. See "admin/reports/fields" for the list of your fields.
  57. MANAGE FIELDS
  58. --------------------------------------------------------------------------------
  59. To create the new field "Images":
  60. 1) Go to: admin/structure/types
  61. Choose any "Manage fields" of your expected content type, for easy test
  62. I recommend Article where you have already a single Image. Basic page is
  63. fine too if you have large carousels at Basic pages. Or do both.
  64. 2) Add new field: Images (without "field_" as Drupal prefixes it automatically)
  65. 3) Select a field type: Image
  66. 4) Save, and follow the next screen.
  67. Be sure to choose "Unlimited" for the "Number of values".
  68. You can also do the similar steps with any fieldable entity:
  69. o admin/structure/field-collections
  70. o admin/structure/paragraphs
  71. o admin/config/people/accounts/fields
  72. o etc.
  73. All requirements may be adjusted to your available instances, see below.
  74. To have various slick displays, recommended to put both "field_image" and
  75. "field_images" at the same content type. This allows building nested slick or
  76. asNavFor at its very basic usage.
  77. You can later use the pattern to build more complex nested slick with
  78. video/audio via Media file fields or SCALD atom reference when using with Field
  79. collection module.
  80. Shortly, you have to add, or adjust the fields manually if you need to learn
  81. from this example.
  82. VIEWS COLLECTION PAGE
  83. --------------------------------------------------------------------------------
  84. Adjust the example references to images accordingly at the Views edit page.
  85. 1) Go to: admin/structure/views
  86. 2) Edit the Views Slick example before usage, adjust possible broken settings:
  87. admin/structure/views/view/slick_x/edit
  88. The first block depends on node ID 3 which is expected to have
  89. "field_images":
  90. admin/structure/views/view/slick_x/edit/block
  91. If you don't have such node ID, adjust the filter criteria to match your
  92. site node ID containing images.
  93. If you don't have "field_images", simply change the broken reference into
  94. yours.
  95. GRID
  96. --------------------------------------------------------------------------------
  97. Slick grid set to have at least 10 visible images per slide to a total of 40.
  98. Be sure to have at least 12 visible images/ nodes with image, or so to see the
  99. grid work which results in at least 2 sets of grids.
  100. Change the numbers later once all is set, and get a grasp of it.
  101. To create Slick grid or multiple rows carousel, there are 3 options:
  102. 1. One row grid managed by library:
  103. Visit admin/config/media/slick,
  104. Edit current optionset, and set
  105. slidesToShow > 1, and Rows and slidesperRow = 1
  106. 2. Multiple rows grid managed by library:
  107. Visit admin/config/media/slick,
  108. Edit current optionset, and set
  109. slidesToShow = 1, Rows > 1 and slidesPerRow > 1
  110. 3. Multiple rows grid managed by Module:
  111. Visit admin/structure/views/view/slick_x/edit/block_grid from slick_example,
  112. Be sure to install the Slick example sub-module first.
  113. Requires skin "Grid", and set
  114. slidesToShow, Rows and slidesPerRow = 1.
  115. The first 2 are supported by core library using pure JS approach.
  116. The last is the Module feature using pure CSS Foundation block-grid. The key is:
  117. the total amount of Views results must be bigger than Visible slides, otherwise
  118. broken Grid, see skin Grid above for more details.
  119. READ MORE
  120. --------------------------------------------------------------------------------
  121. See slick_example.module for more exploration on available hooks.
  122. And don't forget to uninstall this module at production. This only serves as
  123. examples, no real usage, nor intended for production. But it is safe to keep it
  124. at production if you forget to uninstall though.