William & Mary

Styling Images

As most of you know, images can be set to left-align or right-align and display captions by simply setting a style in the Cascade editor. Click the image in the editor then in the “Styles” dropdown list select photoleft, photoright, leftwithcaption or rightwithcaption and submit to see the full effect.

But let’s suppose you want to change the image style. When you re-edit the page, select the same image and select a different style from the dropdown list, the editor actually applies both styles to the image. This is valid code and can have practical applications… but in this case we don’t want it! What visitors see for a single image with multiple styles applied to it may not be what you intended.

No worries, there is an easy way to take back control and get the exact effect you want on an image. First select the image in the editor. Then find the little white eraser button (it’s hover text is “remove formatting”) and click it. All styles will be removed from the image and you can now select the single style that you really want.

 

For the curious: As you test this, pay attention to what we call the editor breadcrumbs. This is the gray bar at the bottom of the editor that starts with the text “Path: .” As you select different objects in the editor, the editor breadcrumbs show the html path to what you selected. For example when you select an image it may look like:

Path: p » img

When you select the image and apply multiple styles it might look like:

Path: p » img.rightwithcaption leftwithcaption

When you select the image and click the remove formatting button it should go back to:

Path: p » img