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 ignore thumbnail creation. 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 ignore thumbnail creation. 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 should be ignored.
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 creating thumbnail, a microservice "image-service" is now available. This service provides a POST method, expecting two parameters: filename without extension and html content that a developer wants to convert into an image. The final image will be a PNG file.
If the html to image conversion is successful, 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 |
|---|
/{userid}/thumbnails/{filename}.png |
Example:
| Code Block |
|---|
<a href={deckURL + '/slide/' + slide.id} className="ui medium image" tabIndex="-1">
<Thumbnail key={index} url={thumbnailURL + slide.user + '/thumbnails/' + slide.id + '.png'} slideId={slide.id} />
</a> |