On This Page

• Left-hand Images

• Right-hand Images

• Centered Images

• Captions

Using the Examples

The following examples show various ways to position images when editing Colby-Sawyer web pages in Pivot. Each example is followed by a gray box containing code that can be copied/pasted into Pivot and updated with your text to achieve the style chosen. Many of the examples include "Greek" copy to give the image examples context within the page.

Image Editing

Images used in Pivot will first need to be sized and optimized for web display using a graphics program like Adobe Photoshop, Microsoft Photo Editor or Microsoft Picture Manager. There are many tutorials available online which do a good job explaining how to edit images for the web with these products. For instructions on uploading images into Pivot refer to the Pivot Editor's Guide.

When placing an image on the page with text flowing around it, the image should not exceed 400 pixels in width or height. The typical size of the image's long dimension (width or height) is between 175 pixels and 375 pixels.

Images that do not have text flowing on either side may be as wide as 500 pixels, see the Centered Images example below.

Adding a caption to an image will require adding the width in pixels to the image tag, see Images with Captions example below. It can be helpful when sizing and optimizing an image for use on the web site to include the width of the image in the name when saving it ( myImage-350px.jpg ).

---

Left-hand Images

Valetudo delenit nimis lucidus adipiscing eum, exerci sit. Suscipere macto hos qui conventio tation venio illum modo. In caecus natu ad te dolore, sudo appellatio feugait. Camur, erat defui hendrerit dolore venio et iustum, tincidunt vel et melior, oppeto euismod. Nulla consequat quidem, voco delenit olim refero capto gravis blandit, iusto abico. Augue feugait pertineo capio voco quia abdo et genitus. Delenit tation feugiat caecus usitas iusto, occuro delenit, exerci paratus, comis vereor, eu. Secundum aliquip ad ideo ingenium et tamen immitto mara vel augue suscipit pala nutus.

Nulla hendrerit quod pneum, feugait nullus erat, epulae et quia comis praemitto, camur conventio. Transverbero amet nonummy facilisi quod eros, te modo cui distineo ut refoveo duis. Foras nutus blandit, laoreet antehabeo vel vel vulputate delenit brevitas quidem, vicis consequat wisi tation. Adsum duis ullamcorper, ratis haero nimis quod dolus dolus lobortis, praesent ut valde.

Refoveo quadrum qui exerci refoveo capio volutpat suscipit. Commodo vel vulpes neo, illum fatua vulpes reprobo et ibidem mara wisi, quadrum qui populus. Letatio melior valetudo gilvus enim exerci iusto nunc jus valetudo, vereor cogo premo. Fere vulpes, ex iriure hendrerit, minim, velit causa, amet. Aliquip hos, zelus autem quibus singularis. Nulla ea ventosus ut tamen consequat acsi et te suscipere at veniam praesent singularis augue. Adipiscing os dolore jumentum natu esse, ludus, occuro qui ad quadrum.

---

Right-hand Images

Valetudo delenit nimis lucidus adipiscing eum, exerci sit. Suscipere macto hos qui conventio tation venio illum modo. In caecus natu ad te dolore, sudo appellatio feugait. Camur, erat defui hendrerit dolore venio et iustum, tincidunt vel et melior, oppeto euismod. Nulla consequat quidem, voco delenit olim refero capto gravis blandit, iusto abico. Augue feugait pertineo capio voco quia abdo et genitus. Delenit tation feugiat caecus usitas iusto, occuro delenit, exerci paratus, comis vereor, eu. Secundum aliquip ad ideo ingenium et tamen immitto mara vel augue suscipit pala nutus.

Nulla hendrerit quod pneum, feugait nullus erat, epulae et quia comis praemitto, camur conventio. Transverbero amet nonummy facilisi quod eros, te modo cui distineo ut refoveo duis. Foras nutus blandit, laoreet antehabeo vel vel vulputate delenit brevitas quidem, vicis consequat wisi tation. Adsum duis ullamcorper, ratis haero nimis quod dolus dolus lobortis, praesent ut valde.

Refoveo quadrum qui exerci refoveo capio volutpat suscipit. Commodo vel vulpes neo, illum fatua vulpes reprobo et ibidem mara wisi, quadrum qui populus. Letatio melior valetudo gilvus enim exerci iusto nunc jus valetudo, vereor cogo premo. Fere vulpes, ex iriure hendrerit, minim, velit causa, amet. Aliquip hos, zelus autem quibus singularis. Nulla ea ventosus ut tamen consequat acsi et te suscipere at veniam praesent singularis augue. Adipiscing os dolore jumentum natu esse, ludus, occuro qui ad quadrum.

---

Centered Images

Valetudo delenit nimis lucidus adipiscing eum, exerci sit. Suscipere macto hos qui conventio tation venio illum modo. In caecus natu ad te dolore, sudo appellatio feugait. Camur, erat defui hendrerit dolore venio et iustum, tincidunt vel et melior, oppeto euismod. Nulla consequat quidem, voco delenit olim refero capto gravis blandit, iusto abico. Augue feugait pertineo capio voco quia abdo et genitus. Delenit tation feugiat caecus usitas iusto, occuro delenit, exerci paratus, comis vereor, eu. Secundum aliquip ad ideo ingenium et tamen immitto mara vel augue suscipit pala nutus.

Nulla hendrerit quod pneum, feugait nullus erat, epulae et quia comis praemitto, camur conventio. Transverbero amet nonummy facilisi quod eros, te modo cui distineo ut refoveo duis. Foras nutus blandit, laoreet antehabeo vel vel vulputate delenit brevitas quidem, vicis consequat wisi tation. Adsum duis ullamcorper, ratis haero nimis quod dolus dolus lobortis, praesent ut valde.

---

Images with Captions

Valetudo delenit nimis lucidus adipiscing eum, exerci sit. Suscipere macto hos qui conventio tation venio illum modo. In caecus natu ad te dolore, sudo appellatio feugait. Camur, erat defui hendrerit dolore venio et iustum, tincidunt vel et melior, oppeto euismod. Nulla consequat quidem, voco delenit olim refero capto gravis blandit, iusto abico. Augue feugait pertineo capio voco quia abdo et genitus.

Nulla hendrerit quod pneum, feugait nullus erat, epulae et quia comis praemitto, camur conventio. Transverbero amet nonummy facilisi quod eros, te modo cui distineo ut refoveo duis. Foras nutus blandit, laoreet antehabeo vel vel vulputate delenit brevitas quidem, vicis consequat wisi tation. Adsum duis ullamcorper, ratis haero nimis quod dolus dolus lobortis, praesent ut valde.

Refoveo quadrum qui exerci refoveo capio volutpat suscipit. Commodo vel vulpes neo, illum fatua vulpes reprobo et ibidem mara wisi, quadrum qui populus. Letatio melior valetudo gilvus enim exerci iusto nunc jus valetudo, vereor cogo premo. Fere vulpes, ex iriure hendrerit, minim, velit causa, amet. Aliquip hos, zelus autem quibus singularis. Nulla ea ventosus ut tamen consequat acsi et te suscipere at veniam praesent singularis augue. Adipiscing os dolore jumentum natu esse, ludus, occuro qui ad quadrum.

Note: Captions require the width of the photo in pixels to be placed in the image tag as shown in the example above. The captions are added to the image using Java Script, consequently the caption text cannot be styled (italic, bold, etc.).

To use double quotes in a caption, substitute " for the quotes as shown below.