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:
...
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> |