Pictures, Widgets & Multimedia objects

Page 8 of 25

Pictures in paragraphs

From the topics' step of TOWeb, select the topic and paragraph where you want to add your picture. If your paragraph does not have any object yet then just select the Picture ( ) object from either the list in the left sidebar or from the contextual menu by using a the ( + ) button displayed over your paragraph. If your paragraph already use an object that you want to keep, then add a new paragraph in which you will add your Picture.
Once your object is added to your paragraph you may change its position using the different text/object layouts proposed. And you may change the alignment of your paragraphs too by changing their width if you want them to be aligned one next to the other, and move them one before or after the other. And the offset allow to shift the paragraph inside the page (you may use it to center a small width paragraph in a page).

Picture properties

On the left sidebar TOWeb offers you buttons actions to change your image, do a paste of an image present in the clipboard, use the image editor but also the following properties for your image object

  • enter a title for your image. This is import if you want your image to be best indexed by Image search engines such as Google Images
  • choose the width of your image among the list of sizes proposed by TOWeb
  • choose a frame effect that surrounds your picture
  • select a click action on image that can either be a zoom or a link to a web page
  • add a badge to your image (a small image displayed next your picture). Such image can be useful for instance on a product to show a -20% discount, show that this is something new, etc.
  • add a ribbon : a short text displayed over the image on its upper right corner, for example to indicate a promotion or a new version
  • apply a zoom when the mouse hovers your picture
  • add a badge to your image (a small image displayed next your picture)
  • add multiple pictures (see next chapter "Multiple images: mini-album & slide inside a paragraph")

Multiple pictures (mini-album & slide show inside a paragraph)

Use the add multiple pictures ( ) button to add other images to the same picture object. This function is useful if you want to display different pictures of the same subject (like for instance different view of a product), or create a mini album animated or not inside a paragraph. Pictures will all need to have the same size if you do not want page content to move when navigating from one picture to the other. If you have a least 2 pictures inside the same picture object you can select to display your picture object as :

  • an album : the list pictures appears below the currently selected image and by clicking on a thumbnail image it will be enlarge into the picture object.
  • a slider : a animated slide show with adjustable speed. You may define different links for each picture using the "Click action" link button if you want each picture to redirect to different page or selected a "zoom" click action if you want your pictures to be zoomed.
To change the order of your images, you must press the CTRL key while clicking the previous/next buttons used to navigate through your multiple images.
Finally for each image you can set different links using the click action button and choosing link (if you want to open for example another page of your site from this image) or by choosing a hover action so each image enlarged to full screen and overlaid on your page.


Support for Retina images

Whenever possible, TOWeb adds into the source code of your pages, URLs with higher density images for the Retina screens (that is to say screens having pixel densities greater than 1, for example 2x for many smartphones) to display these images "ultra-clean".
For an image of your site to be displayed with high density, you need to provide to TOWeb an image with a size at least twice bigger than what you want to display. If for example in a paragraph you have an image with 300 pixels wide, then the original image that you need to provide have to be larger than 600 pixels to be displayed in Retina mode. An icon symbolizing (  ) an eye ) is displayed in TOWeb next to the drop list of widths to indicate whether it will be viewable for Retina screens or not.

Watermarks on your pictures

TOWeb offers the possibility to add watermarks over all the pictures of your site. A watermark is an overlay text that will contain for example the name of your website or the author name in order to mention your copyright and thus prevent any reuse of your pictures by visitors or web engines.

  • if you want your watermark to be applied to all the pictures of your website you need to use the "Watermark your pictures" function located in "Options > Security & HTML"
  • or on the contrary, if you only want to apply a watermark to pictures used by a specific topic then you need to do it directly from the topic the following way :
    • if positioned on the index page of a catalog or an album, use either the button " Watermark your images" located in its "Security" options
    • if positioned on a topic page or album/catalog item page, then simply select a paragraph containing an image to directly use the button (  ).

Adding a watermark to images is irreversible, meaning that once applied TOWeb, the only way to undo this action will be to quit TOWeb and close your site without saving any of your changes. If you have saved your changes but want to return back to a previous situation without any watermarks on your pictures, then you will either need to :

  • replace one by one all the images of your site using the button (  ) "Restore original picture " located near each image of your website
  • or restore a backup that contains a previous version of your site without any watermark on your images

Please note that all images already watermarked can not receive a second watermark thereafter. So when you will reuse the watermark feature again, only the last new images recently added to your site will be proposed for a watermark (those that do not have any watermark yet).

Icons inside your texts

When edition a Title or a Text use the icon button ( ) to insert, modify or delete any icon. TOWeb offers a list of icons with size proportional to the font size used on your website that you can colorized but you can browse and add your own icon file if you have one. Icons can be add anywhere inside your text including in link buttons.

Albums

To create an album click on the Add a new topic button ( ) located on the top toolbar and then the Album ( ) type of topic. Add and select your images to the list, enter a short name for your album (used in your menu) before to click on the button "Add the new topic to my website".
Your album is made of an index page containing all your pictures and pages (1 per pictures) with pictures displayed in larger size and their titles / comments.
If you want to add, delete or change the orders of your pictures inside an album you can do it from the contextual menu "Modify" displayed when hovering a picture. And the Arrange (  ) screen allows you move your picture by drag'n drop to easily change their order.
You can also create mini-albums or sliders inside a paragraph.

Videos

From the topic step of TOWeb select the topic and paragraph where you want to add your picture. If your paragraph does not have any object yet then just select either the HTML5 Video ( ) or YouTube Video ( ) object from either the list located in the TOWeb's left sidebar or from the contextual menu "Modify" displayed over your paragraph. If your paragraph already use an object that you want to keep, then add a new paragraph (that will contain your Video object) and move it before or after the other paragraph.
Once your object is added to your paragraph you may its position using the different text/object layout proposed. And you may change the alignment of your paragraphs too by changing their with if you want them to be aligned one next to the other, and move them one before or after the other.
Then enter or copy/paste the URL of your video. In case of an HTML5 video, 3 different video formats are accepted (MP4, WebM and OGV) and you will need to fill out at least one URL

Google Maps

From the topic step of TOWeb select the topic and paragraph where you want to add your picture. If your paragraph does not have any object yet then just select the Google Map ( ) Object from either the list located in the TOWeb's left sidebar or from the contextual menu "Modify" displayed over your paragraph. If your paragraph already use an object that you want to keep, then add a new paragraph (that will contain you Google Map object) and move it before or after the other paragraph.
Once your Google Map object is added to your paragraph you need to fill out the "Map center" and "Markers" fields.

  • Map center : enter an address as plain text or as latitude & longitude (comma separated). If you leave this field empty the map will be centered on the first marker.
  • Markers : enter one address per line and optionally add a comment after the address with the colon ( : ) character (comments only work in dynamic maps).

Examples :

Paris, Texas
Paris, Texas : I live here !
33.6608333 , -95.5652778 : I work here !

Then select the type of view and zoom level you want for your map as well as its width & height to best fit in your paragraph and page.

IMPORTANT: since June 22nd, 2016, Google requires the use of an API key for the maps. If your website is not correctly displaying your maps and/or if you are not using any API key yet then you may want to check the Google Services.

Twitter Widget

Adding a Twitter widget inside a paragraph of your website needs to already have a Twitter account, otherwise you will need to create one from Twitter. Once connected to your Twitter account you can create one or several Twitter Widgets and copy/paste their code into the assisted Twitter Widget of TOWeb as following : from the "Topics" step of TOWeb, select the topic and the paragraph where you want to add your Twitter Widget. If your paragraph does not have any object yet then simply select the object (  ) Twitter Widget either from the "Object" list located in the left sidebar of TOWeb, or from the context menu "Modify" displayed over your paragraph. If the paragraph already has an object that you want to keep, then add a new paragraph (with or without text) in which you will add your Twitter Widget and then move this new paragraph to the desired location and width inside your page.
Your Twitter Widgets can be modified from the Twitter website and they are already present on your website then your changes will be immeditaly applicable on your site without having to republish it. TOWeb also offers customization options but if you modify them, you will need to republish your site so that visitors can see your Twitter Widgets changes.

Chart object

The Chart object allows you to display data in different grapchics and styles. From the "Topics" step of TOWeb, select the topic and paragraph where you want to add your object (  ) Chart. If your paragraph does not have any object yet then simply select the Chart object either from the "Object" list located in the left sidebar of TOWeb or from the context menu "Modify" displayed over your paragraph. If the paragraph already has an object that you want to keep, then add a new paragraph (with or without text) in which you will add your Chart and then move this new paragraph to the desired location and with inside your page.
Once your graphic object added to your paragraph, you can choose between 6 different chart types:

  • Line
  • Bar
  • Radar
  • Polar area
  • Pie
  • Doughnut

with for each chart, customization options such as for example the choices of colors, of displaying or not a grid, a legend or an animation (animations only appear at first display when the page is loaded). Below are some examples of possible results you can obtain :

Exemple 1 : Bar

Exemple 2 : Radar

Exemple 3 : Lines

Exemple 4 : Pie

Countdown & time counter objet

TOWeb allows you to show inside your pages a time counter that either works as a countdown timer or as a counter of the elapsed time since the date & time of the event you specify. Once the date and time of the event is reached you can either display a message, or leave the counter to run and display the ellapsed time since the event.
From the "Topics" step of TOWeb, select the topic and the paragraph where you want to add your object (  ) Time Counter. If your paragraph does not have any object yet then simply select the Time Counter object either from the "Object" list located in the left sidebar of TOWeb or from the context menu "Modify" displayed over your paragraph. If the paragraph already has an object that you want to keep, then add a new paragraph (with or without text) in which you will add your Time Counter and then move this new paragraph to the desired location and with inside your page.
Once your counter object added to your paragraph, you can then set the date & time of your event, choose whether to show or not the counter in days/hours/minutes/seconds, customize the colors, the dimensions and its behavior after the date of event.

Example 1 : coundown in days, hours, minutes and seconds until the 2016 new year day.

Example 2 : ellapsed time in hours, minutes and seconds since january 1st, 2016.

Other objects and widgets

See also the i-services for objects such as blogs, web forms, polls and mailing list.

For other objects not proposed by TOWeb as well as for adding scripts and HTML lines of code inside your page,
you'll need to use the TOWeb Scripts Fields.