Hantsweb Styles

Layout and design options in Hantsweb pages

Picture List

The picture list allows you to neatly align pictures with text.

How to Make

First of all, make sure you have a good set of pictures with which to make your picturelist. Ideally, they should all be the same size, and of a good quality.

  1. Make a new inline table inside your text object and give it the style 'picturelist'.

  2. Set the table to have two columns and as many rows as you have pictures.

  3. Place the pictures in the left-hand column, and make sure that all the styling in this column is 'No Style'.

  4. Place all your text in the right-hand column. Make sure you apply styles to your text (normal, heading 2, heading 3 etc).

  5. Save the text object and preview it in the content manager.

  6. You can now adjust the options to make it look exactly right (see the options tab, right).

 

Options

Takes the following optional settings in the 'Additional Meta Text' box of the page properties:

  • picturelistwidth:


    1 for full width, 2 for half width, 3 for third width etc etc.
    The default is 1.

  • pictureliststyle:


    fullBox, picBox, noBox.
    The default is noBox.

  • picturelistpicsize:


    the width in pixels of the images, to adjust the margins correctly.
    The default is 75px.

 

Example

The example below has been made by entering the following in the 'Additional Meta Text' box:

  • picturelistwidth=1 pictureliststyle=picBox picturelistpicsize=150

  • A sample heading

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vel magna. Morbi sed mi. Maecenas auctor semper lorem. Sed consequat. Praesent pede. Vivamus arcu odio, pulvinar eget, congue ut, mattis sed, massa. Donec quam libero, dictum ut, sagittis cursus, pulvinar at, arcu. In feugiat, arcu pellentesque adipiscing tincidunt, nibh ante ullamcorper odio, sit amet consectetuer nisi velit in turpis. Nullam nec justo eget nulla lacinia scelerisque. Vestibulum rutrum elit. Phasellus fermentum augue sed turpis viverra imperdiet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

     

  • A sample heading

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vel magna. Morbi sed mi. Maecenas auctor semper lorem. Sed consequat. Praesent pede. Vivamus arcu odio, pulvinar eget, congue ut, mattis sed, massa. Donec quam libero, dictum ut, sagittis cursus, pulvinar at, arcu. In feugiat, arcu pellentesque adipiscing tincidunt, nibh ante ullamcorper odio, sit amet consectetuer nisi velit in turpis. Nullam nec justo eget nulla lacinia scelerisque. Vestibulum rutrum elit. Phasellus fermentum augue sed turpis viverra imperdiet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

     

  • A sample heading

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vel magna. Morbi sed mi. Maecenas auctor semper lorem. Sed consequat. Praesent pede. Vivamus arcu odio, pulvinar eget, congue ut, mattis sed, massa. Donec quam libero, dictum ut, sagittis cursus, pulvinar at, arcu. In feugiat, arcu pellentesque adipiscing tincidunt, nibh ante ullamcorper odio, sit amet consectetuer nisi velit in turpis. Nullam nec justo eget nulla lacinia scelerisque. Vestibulum rutrum elit. Phasellus fermentum augue sed turpis viverra imperdiet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

     

Reviews

0 reviews so far

Review Ref. 99512

 

Write a review

 

Required fields are marked with a *

 
 
 

Reviews

Not yet reviewed

Top tips

  • Make all your images the same size (squares look really good!);
  • Try cropping an existing picture to show an interesting detail;
  • Keep the text alongside images quite short to make the page look really neat.