There are few CSS classes in TTG CE4 web engines that you can use to help style the text areas of your pages. You can use these classes to float images in text blocks. The classes in CE4 web engines have changed from previous versions. This post is really an update of a previous post on using inline images. The new alignment classes look to be consistent with alignment classes used in WordPress.
You’ll need to know a bit of html to use these classes, but it’s really basic stuff and not hard to learn. I’ve got examples below.
Classes to place elements
alignright, alignleft, aligncenter, and alignnone (these also apply to Backight)
These classes can be used to help place elements on the page. You’ll most often use them when adding images to text in a Page Copy (md) text block.
alignright and alignleft will float an element either right or left. You’ll usually use this with images. When you do, text will float around your image. It also adds some margin around the element so that other page elements won’t be flush up against the element you’re applying the class to.
alignright adds margin to the bottom and the left while alignleft adds margin to the right and bottom.
alignnone adds margin to just the bottom of an element. Nothing will float around an item with the alignnone class applied.
aligncenter will center an element it its parent container and adds margin to the bottom of the element. Nothing will float around this element.
Classes to enhance appearance
(these classes to not apply to Backlight)
border
The border class will place a 1 pixel solid black border around the element. This can be very useful in setting off images from the surrounding page. To control the border width and color, adjust the border settings under Color Palette > Page Image in all plug-ins (Page Images in Pages and Post Images in Theme For WordPress).
shadow
The shadow class will add a drop shadow to an element. The css looks like this:
.shadow {
-moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
-webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}This means that a box shadow that drops 2px down and 2px right with a blur of 4 px and color of black with an opacity of 40% will be added to an element.
Putting it all together
So let’s write some html to use these classes. This will be code you put inside the Page Copy (md) fields in the Color Palette in the Lightroom plug-ins or the Page Copy (md) field in under the content tab in Album Set of Album create/edit dialog boxes.
Let’s start off by simply adding an image to the text block:
<img src="photos/example.jpg" alt="image description" width="300">
This assumes that the photo you’re using is already in the Lightroom filmstrip (for exported pages being uploaded) or in your Album. If this is not the case, then you’ll need to supply the path to the image. So instead of src=”photos/example.jpg” it might read src=”/images/example.jpg”. This would be the path to a folder named “images” in the root of your site where you’re storing images for inline use.
The alt tag is important for both SEO and accessibility. It describes your image for screen readers. The width=”300″ property sets the width in pixels that the image will be displayed at.
Now let’s add some classes. First we’ll float the image to the left:
<img src="photos/example.jpg" class="alignleft" alt="image description" width="300">Now we’ll include a border on the image as well as a drop-shadow:
<img src="photos/example.jpg" class="alignleft border shadow" alt="image description" width="300">
The image to the left has all three of these classes assigned.
If you know a little css you can also add in-line styling.
So there you have a few very useful css classes you can use on your TTG pages to place and style images. I know it’s not much, but being able to do just this little bit will add a lot of class to your site.
In future posts I’ll touch on some classes that you can use to move text blocks around within the TTG Responsive Grid layout.
