Using images

Adding images to your pages makes a big difference. They can be used to break up pages that contain a lot of text as well as adding colour to make your pages stand out and have much more visual appeal.

Every page entry has two fields for images:

  • Main image This field can have only one value. The image uploaded here will be displayed at the beginning of the node body. We can use these images in other displays in the future, in 'recent posts' block or 'posts by user' block ect.
  • More images This field is set to allow unlimited values. Images uploaded into this field will be displayed after the node body, but only during full node display.

Both fields use lightbox to provide 'zoom' feature. Images are 'grouped' by the ID of the node, this way visitors can leaf the *full-size* images while zoomed in.

Imagefield-imagecache pseudo filter

This is a theme function originally created by Adam Boros. It is implemented in CEUBASE, so all themes can use this feature. The 'filter' (it is not a filter actually) is designed to provide easy and flexible way to insert imagefield uploads inline the node body.

Syntax for any More images is the following: (img:X:PRESET:ALIGN)

where:

  • X - the number of the image
  • PRESET - the name of the imagecache preset to use
  • ALIGN - alignment of the image
  • ( and ) - in reality you have to use [ and ] but if i was used those than the filter would replace my example. :)

Note: the above syntax is not needed for Main image -- this image is automatically inserted. Only if user needs More images than the first one.

This the base syntax which should be adjusted to your need:

Where:
-- the value of 'img' should always remain 'img'
-- the value of the number depends on how many 'more images' you have uploaded, the first uses '1' the second '2', etc.
-- the value of 'size' has 4 options: thumb, small, medium, large (so replace 'size' with one of these words)
-- the value of 'alignment' has 3 options: none, left, center, right (so replace 'alignment' with one of these words)

What is a preset?

Presets are set site-wide and provide modifications for the original image. Unlimited number of presets can be created and they can be modified any time. At the time writing this, there are 4 presets in the system:

  • thumb scales and crops to 60x60px
  • small scales to 120px wide
  • medium scales to 180px wide
  • large scales to 480px wide

What is alignment?

Alignment options are set globally in CEUBASE. 3 options are available: left, center, right. Margins for these alignments are also set globally in CEUBASE, however every theme can override them via .css, also it is not recommended. To see this new feature in action please see this 'Lorem' node. You can edit the node to see the replacement patterns in the body.

You can upload an unlimited number of images to your body of content with more images, although compared to 'main image' there is one extra step involved, as follows: After uploading your image, you then need to add it to your content body using a syntax inserted into the editor box above. You should place at the exact point in the text where you want the image to be shown.

You may need to play around a few times with the values and position of the syntax in the editor box to get the look you need. This is normal. Keep adjusting, saving, and re-editing till you find your look.

Finally, remember to add some descriptive text into the "Title" field, as this is helpful information to search engines and for general web standards compliance.

If you would like to put non-zoom image and make this image like a link you need to include "nozoom" keyword into syntax and follow the following steps:

select the code you want to link, i.e. [ img:1:size:alignment:nozoom ] > click on insert link button > put your link > click on Update button

 

2. Optimising for the web

Optimising images just means reducing the file size of the image as low as possible without losing any visual quality. Optimising ensures that the file sizes are kept small and will help users with slower connections to download your page quicker. You can use Photoshop to optimise images to specific file sizes. Please remember to add the image dimensions to the img tag - you should never re-size an image using html.

Online image optimisers