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={...} 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.
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:
...
Creating thumbnail
For both creating and accessing slide thumbnails, we are currently using the file-service microservice. This service provides a POST method, expecting two parameters: the slide id and the HTML content for the slide. The final slide thumbnail will be a JPEG file.
If the HTML to image conversion is successful, the service will return the URL of the created image. If there is error, it will return the error response.
Displaying thumbnail
On slidewiki-platform, there is a Thumbnail component that can be used to display a thumbnail image. Developers can use this component inside their other components. One should loop over it to show multiple components (see DeckView component for example use). Use CSS for positioning etc. as needed. This component takes url property as mandatory property. The thumbnail image URL has following URL path:
| Code Block |
|---|
/slideThumbnail/{slideId}.jpeg |
Example:
| Code Block |
|---|
<a href={deckURL + '/slide/' + slide.id} className="ui medium image" tabIndex="-1">
<Thumbnail key={index} url={thumbnailURL + '/slideThumbnail/' + slide.id + '.jpeg'} slideId={slide.id} />
</a> |