Thumbnail development is done in branch #SWIK-147_ext.
Three components are created. Two are thumbnail components and one is controlling component. ThumbnailCreate is for creating a new thumbnail image, and ThumbnailShow is for showing a thumbnail, and ThumbnailOptions for some parameters to control previous two thumbnails.
ThumbnailCreate:
The ThumbnailCreate component should be used whenever a slide is saved. It does not matter, whether a slide is new or old or in whether it is in draft mode or published. Each thumbnail is saved by its slide id. Slide id is supposed to be unique across all slides in the platform. The syntax of the ThumbnailCreate is as follows:
<ThumbnailCreate slideId={...} slideTitle={...} slideContent={...} createNew={...} />
Component properties:
slideId: Ideally, it should be slide id along with its version number, e.g., 16-1.
slideTitle: As it is retrieved from deckservice, without removing associated HTML fragment.
slideContent: As it is retrieved from deckservice, without removing HTML contained in it.
createNew: Boolean. Either true or false.
All properties are required.
How to use it:
If you want to create a single thumbnail, just place it inside the component responsible for saving a slide. It does not add any HTML that would disturb the markup of its parent component.
ThumbnailShow:
The ThumbnailShow component should be used when you want to show a thumbnail. The syntax of the ThumbnailShow is as follows:
<ThumbnailShow slideId={...} slideTitle={...} slideContent={...} createNew={...} />
Some of the properties of this component are optional.
Component properties:
slideId: Slide id along with its version number (recommended), e.g., 16-1. You can use the slide id without version number as well if you have way to get the same format back.
slideTitle (optional): As it is retrieved from deckservice, without removing associated HTML fragment. This is not required if createNew is set to false.
slideContent (optional): As it is retrieved from deckservice, without removing HTML contained in it. This is not required if createNew is set to false.
createNew: Boolean. Either true or false.
slideId and createNew are mandatory. If createNew is set to true then slideTitle and slideContent are not required.
ThumbnailOptions:
The ThumbnailOptions component provides some options for ThumbnailCreate and ThumbnailShow. Where a new thumnail should be saved is mentioned in this component. Also the size of the resulting image. The idea is, for different thumnail sizes same thumnail image should be scaled down in different dimensions using CSS.
Appendix:
- For generating thumbnails of all the slides in a deck, iterate over slides data in a component and in each iteration call ThumbnailCreate component with required properties.
- For showing thumnails, iterate over slide ids in a parent component and in each iteration call ThumbnailShow component with its required parameters. You can ignore the optional properties.
- If you want to show thumbnails and in the process also want to ensure that a thumbnail is created if it doesn't already exist then iterate over slide data in a parent component and in each iteration call ThumbnailShow component. Remember, that you will need to provide all the properties (including optional). Once the iteration is done, you might have to refresh your view panel to see the newly created thumbnails. The already existing thumbnails will show automatically.