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 components.
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 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={...} action={...} />
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.
action: new|update|skip. The value new will create new thumbnail only if it doesn't already exist. The value update will update the thumbnail (i.e., recreate) even if it already exists. The value skip will not take any action. The skip value is useful if you do not want to disturb a thumbnail irrespective of whether it already exists or not.
All properties are required.
How to use it:
Read Appendix A.1 .
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={...} action={...} />
Some of the properties of this component are optional.
Component properties:
slideId: Slide id along with its version number (recommended), e.g., 16-1.
slideTitle (optional if action='skip'): As retrieved from deckservice, without removing associated HTML fragments. This is not required if action is set to skip.
slideContent (optional if action='skip'): As it is retrieved from deckservice, without removing HTML contained in it. This is not required if action is set to skip.
action: new|update|skip . The value new will create new thumbnail as well only if it doesn't already exist. The value update will update the thumbnail (i.e., recreate) even if it already exists. The value skip will not take any action. By setting action to skip, you can avoid providing values for slideTitle and slideContent .
slideId and action are mandatory. If action is set to skip then slideTitle and slideContent are not required.
How to use it:
Read Appendix A.2 .
ThumbnailOptions:
The ThumbnailOptions component provides some options for ThumbnailCreate and ThumbnailShow. Where should a new thumbnail save, is mentioned in this component. Also the size of the resulting image. CSS for scaling the thumbnail image is avoided, the idea is that for different thumnail sizes the same thumbnail image should be scaled down in respective parent component using CSS.
Appendix A:
- For generating thumbnails of all the slides in a deck, iterate over slide data in parent component and in each iteration call ThumbnailCreate component with required properties. It does not add any HTML that would disturb the markup of its parent component.
- For showing thumbnails, iterate over slide ids in parent component and in each iteration call ThumbnailShow component with its required parameters. You can ignore the optional properties if you set action property to skip.
- 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 parent component and in each iteration call ThumbnailShow component. Remember, that you will need to provide all the properties (including optional) and set the action to new. 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.