User Guide / Images, MP3, Videos and Docs

1. Images

The CMS deals not only with written content but also with images. For the image administration, you get the following actions:

  • Upload new images (bulk upload possible)
  • List all images
  • Edit, crop, rotate and tag images
  • Add images to article

1.1. Upload images

The upload process can be done very easily. You only have to follow the 3 steps, we describe on the screen: Choose an image from a directory, upload it and add the author, a description and a category. Now you can zoom, crop and rotate your uploaded image.

After all images are uploaded click on 'Edit images' in the upload screen and the new images are shown in the list.

TOP

1.2. List images

You can go directly to the list by clicking the link “List images” on the start screen of the content management area.

With the features of the toolbar you can edit, zoom, delete, rotate and crop the images. Furthermore you can filter by tags and switch the language.

TOP

1.3. Edit images

Double-click on an image in the overview in order to edit a single image and specify the meta data for the image. You can set title, date, author, description and you can tag the image.

1.4. Crop images

First zoom the image you would like to crop (double-click on preview or click on loup). Then choose the crop style in the drop down menu: 'Free', 'Stamp' or 'Start image'.

'Free' means, you have all liberty while cropping: you can set the aspect ratio and the size of your own choice. With 'Stamp' the aspect ratio and area is fixed, with 'Start image' only the aspect ratio is fixed. The 'Start image is perfect in case you would like to set an start image in the video player.

Attention: The Tiny Marbles Content Managment system works with a row of fixed image sizes which you can set at installation time. The sizes depends of the layout and the design of the website you would like to manage. When you zoom in an image you can see all available sizes and you can preview them by clicking on the size information below the image.

TOP

1.5. Add images to articles

The images can be used in articles and for the video player. In this chapter we show how to add images to articles. First create or edit an article and go to the HTML-editor. In order to add images set the cursor in the editor where the image shpould appear and click then on the small icon in the toolbar of the HTML-editor (in this screen marked red). Now you have access to your complete image library of the CMS.

In the control of the image library you can filter by image tags ('Categories'), you have a preview and you can set the size of an image. Once you found the correct image you are looking for click on 'Insert' and the image appears in the HTML-editor.

TOP

2. MP3 and podcasts

Tiny Marbles supports out of the box MP3 files. You can upload the MP3 files and use them in the articles. Therefore two flash players are available, a small one which only provide the controls 'play and 'pause' (this player is perfect for the usage in lists ... ), or you use the bigger player with a complete control, like 'play', 'stop', 'pause' and a progress bar. The big player is perfect if you like to add for example podcasts in an article. You can use the players with the existing design, or you can adapt your own design of your website. Here a beautiful example of a customized MP3 player of the website myclassicworld:

2.1. Upload MP3 files

The upload process for MP3 files works in the same way like for the images. You only have to follow the 3 steps, we describe on the screen: Choose your MP3 files from a directory, upload them and add the author, a description and a category.

TOP

2.2. List MP3 files

The list of the MP3 files shows the newest entries on top. As long as the MP3 file is not edited yet, the file is marked as 'new' in the first column. This is helpful in case you uploaded a lot of files at the same time. After the upload you can edit each file and set the author, description and the category. Furthermore the 'listeners' and 'downloads' of each file are counted, but be careful: the views from the admin page will not be counted. The counter for 'listeners' and 'downloads' are useful to to see how many listeners or downloads you have per track on the website of your project.

If you would like to delete one or more MP3 files from the list simply click on the trash can icons and collect the files by using the control key or shift key of the keyboard. Then click on Delete? and the selected MP3 files will be deleted after you confirmed a message from the system.

TOP

2.3. Edit MP3 files

In the edit modus of the MP3 files you can specify the title, the author, the description and the tags. You also can play the MP3 file with the podcast player, which you can see on top of the page. This player also could be used on your website, but you probably would like to adapt some colors according to your layout. For this take the *.fla file of the player in the distribution of Tiny Marbles, open the file in Adobe Flash and set the colors of your choice.

TOP

2.4. Add MP3 files to articles

Now we demonstrate how to add MP3 to articles. First create or edit an article and go to the HTML-editor. In order to add MP3 files click on the small icon in the toolbar of the HTML-editor (in this screen marked red). Now you have access to your complete MP3 library of the CMS. The file will appear in the editor where the cursor was placed.

In the control of the podcast library you can filter by MP3 tags ('Categories') and you can play the file. Once you found the correct MP3 file you are looking for click on 'Insert' and the file appears in the HTML-editor.

Attention: After adding the file you only see a placeholder of the podcast player in the HTML-editor . Open the preview of the article to check if the player is working fine and plays the correct file.

TOP

3. Videos

You can upload videos and use them in the articles. Tiny Marbles uses the FFmpeg converter which has to be installed properly on the server first, because the FFmpeg library is not delivered with the Tiny Marbles distribution. You can download FFmpeg here and use the libary for free, it is Open Source. At installation time of Tiny Marbles you need to specify the path to FFmpeg in the /WEB-INF/classes/config.properties file of the web application, for example like this:

video.ffmpeg = [installation path]/ffmpeg.exe

After the successful installation of the FFmpeg converter you can upload nearly every video file which is on the market: Quicktime movies, MPEG 2 or MP4. It is only limited by the version you use of FFmpeg and the video formats this library supports. Two video players are available in Tiny Marbles, a small and a big player. The sizes of the videos for both players needs to be set at installation time of Tiny Marbles. You can adapt you own design for the video player if you like, here an example from myclassicworld:

3.1. Upload videos

Meanwhile you should be familiar with the upload process because it works for videos in the same way like for images or MP3 file. You only have to follow the 3 steps, we describe on the screen: Choose your videos from a directory and upload them.

TOP

3.2. List videos

The list of the videos shows the newest entries on top. As long as the video is not edited yet, the file is marked as 'new' in the first column. This is helpful in case you uploaded a lot of files at the same time. After the upload you can edit each file and set the author, description, category and cover and startimage. Furthermore the viewers of each file are counted, but be careful: the views from the admin page will not be counted. But you probably will add this feature to the video player to see how many viewers you have per video on your website.

Since an upload and the following conversion of video files can take some time, Tiny Marbles shows the state of the videos in the list: Usually it starts from 'Queue', goes over 'Converting' and ends with the state 'Converted'. In the state 'Converted' the video is available for the usage in the article. If another state appeared, like for instance 'Invalid', you probably should check your FFmpeg installation.

If you would like to delete one or more videos from the list simply click on the trash can icons and collect the videos by using the control key or shift key of the keyboard. Then click on Delete? and the selected videos will be deleted after you confirmed a message from the system.

TOP

3.3. Setting a cover and a start image

Open a video in the edit modus and you can specify the title, the author, the description and video tags. Furthermore you can set a cover and a start image. For that you have access to the complete image library of the system, simply click on the links 'Cover' or 'Start image' in the boxes shown in the screen below. You can use images you already uploaded and prepared with the crop feature of the image library.

The cover image is helpful in case you would like to manage for example DVD covers (crop style = 'stamp'), and the start image (crop style = 'Start image') of a video. The start image appears in the small video player as the first image after the player has been opened. Take a look at the screen below: the small player (left box, first row) shows the start image which was chosen in the right box.

You can open the big video by clicking on the icon in the small player which is marked red in the screen below. Furthermore the video page provides an HTML-editor where you can describe the content of the video.

TOP

3.4. Add videos to articles

Adding a video to an article works the same way like for podcasts and images. Create or edit an article and go to the HTML-editor. In order to add videos click on the small icon in the toolbar of the HTML-editor (in this screen marked red). Now you have access to your complete video library of the CMS. The file will appear in the editor where the cursor was placed.

In the control of the video library you can filter by video tags ('Categories') and you can play the video. Once you found the correct video you are looking for click on 'Insert' and the video appears in the HTML-editor.

Attention: After adding the file you only see a placeholder of the video player in the HTML-editor . Open the preview of the article to check if the player is working fine and plays the correct video.

TOP

3.5. Video streaming

In the distribution of Tiny Marbles video streaming is already prepared. If you intend to use the video streaming feature you need two things: a camera connected to a computer, and an installation of the streaming server Red5. At installation time of Tiny Marbles you need to specify the URL to the Red5 streaming server in the /WEB-INF/classes/config.properties file of the web application, for example like this:

streamer.media.server = red5.myclassicworld.com

In order to set up the livestream an access to the computer which is connected to the camera is needed. On this machine you open a browser window, sign in Tiny Marbles CMS and click on Live streaming' in the video sector. Specify a name for the livestream and a title, and if you like a start image for the stream (usefull, if the livestream starts at a certain point of time, for instance a live broadcast of a concert), and then activate the livestream. Click then on 'Start broadcast'. The following screen appears:

Choose the correct video and audio device and start the broadcast. To publish the livestream in the internet you have to add the livestream player on your website.

TOP

4. Document manager

The CMS can manage document as well. For the document administration, you get the following possibilities:

  • PDF files
  • ZIP files
  • Word, Excel and PowerPoint files

Don't forget to activate the files in the zone configuration screen first.

4.1. Upload documents

The upload process can be done very easily and works the same way like for images, audio and video files. You only have to follow the 3 steps, we describe on the screen: Choose a document from a directory, upload it and add the author, a description and a category.

After all images are uploaded click on 'Edit images' in the upload screen and the new images are shown in the list.

TOP

4.2. List and edit documents

The list of the documents shows the newest entries on top. As long as the document is not edited yet, the file is marked as 'new' in the first column. This is helpful in case you uploaded a lot of files at the same time. After the upload you can edit each file and set the author, description and the category.

If you would like to delete one or more documents from the list simply click on the trash can icons and collect the files by using the control key or shift key of the keyboard. Then click on Delete? and the selected documents will be deleted after you confirmed a message from the system.

TOP

4.3. Add documents to articles

Here you can see how to add documents to an article. After you created an article, simply add a document by clicking on the small icon in the toolbar of the HTML-editor (in this screen marked red). Now you have access to your complete dcoument library of the CMS. The file will appear in the editor where the cursor was placed and a placeholder icon is used.

TOP

We would love to read your questions or comments: