Form Design - Photos With Text

The content of most boxes can be made up of text and/or a photo. In many situations a box displays either text or a photo but not both. For this reason most boxes format both their text and photo content to use all the available space, centered both horizontally and vertically. If both are present they will superimpose each other, with the text uppermost.

To change this behaviour you can alter the a box's Photo Position settings. Note that when both text and a photo is present, unless you want them to overlap you need to ensure that you arrange the photo position settings so there is enough space left over for the text.

The Photo Position settings are as follows.

Setting Description
Mode

Can be one of four modes.

None - no photo is shown at all.

Bleed - the photo is drawn so that it entirely fills the box, right up to the border, and it is cropped if its aspect ratio does not match that of the box.

Stretch - the photo is drawn so that it fills the box, right up to but not including the padding, and it is cropped if its aspect ratio does not match that of the box.

Normal - the photo is drawn at the maximum possible size whilst retaining its aspect ratio, but without cropping. This will usually result in there being space either above/below or left/right of the photo.

Alignment

Can be either Centered, or aligned to Left/Right/Bottom/Top.

Scaling

A percentage value, 1-100, that controls how much of the available space (width and/or height) is to be used when sizing the photo for display.

If the Alignment is Top or Bottom, the scaling is applied to the box height.

If the Alignment is Left or Right, the scaling is applied to the box width.

If the Alignment is Center, the scaling is applied to both width and height.

Scaling is ignored in bleed mode.

Gap

The gap - i.e. distance - that is to ideally separate the text from the photo.

Photos With Text - Worked Example

This example shows how to change box settings to display photos within the ancestor cells for the parent generation in a pedigree. The same principle applies to all boxes that can hold both text and a photo.

1. Choose File|Open Sample Pedigree Data File and select the Cat Pedigree example. Click OK.

2. Display the pedigree for 'Arripay Little Wonder': find this cat in the list of cats on the left side, then click to select it. You should now have his pedigree displayed. His sire should be 'Arripay Fictitious Beast', with no dam set (in the sample data, 'Arripay Fictitious Beast' has a photo set, so we have deliberately chosen a pedigree that positions this animal as a parent; if you right-click (Mac: use Control + Click) over the sire in the pedigree, then choose 'Edit Sire' from the popup menu, then click onto the 'Photo' tab you will see the photo).

3. At this point, the ancestor cell for the sire in the pedigree will not show the photo. Thats because the default photo position settings in an ancestor cell have the photo mode set to 'No Photo':

Picture Positioning

4. Next, right-click (Mac: use Control + Click) over the sire box, then select Ancestor Cell Settings - G1/4 Specific from the popup menu. Click onto the Layout tab. In the Photo Position group, uncheck the Automatic box and then set the Mode to Bleed Photo. Click OK. The pedigree now changes, and the sire's photo now completely fills the ancestor cell, with the text superimposed:

Picture Positioning

5. But this isn't quite what we want, because we do not want the text on top of the photo. Re-open the same Settings window, but this time change the Photo Position so that the Mode is set to Normal Photo, the Alignment is set to Photo At Bottom, and the Scaling is set to 50%. Click OK. The pedigree again changes, and now the sire's photo is smaller and aligned to the bottom. But the text is still the same size, and whilst the text has moved up it still partly overlaps the photo:

Picture Positioning

6. The problem now is that the text is just too large. By changing the photo alignment so the photo is at the bottom, we have caused PedPro to attempt to put the text above it, and whats happened is that it has drawn the text centered in the space above the photo but because the text is still too large it has overflowed the available text space, both above and below. The overflow above has been clipped to the text box boundary, and the overflow beneath has overlapped the photo. What we need to do is to reduce the text size. Re-open the same Settings window again, but this time stay with the Text tab and set the Font Scaling to a much smaller value - say 100%. Click OK. The pedigree again changes, and this time we are getting the kind of thing we were after - smaller text that is displayed above the photo without clipping or overlapping:

Picture Positioning

In practice, achieving a 'photo pedigree' style with photos for all the ancestors is quite hard because the ancestor cells at different generation numbers vary greatly in shape: the deeper ancestors tend to have wide cells that are not at all deep, whereas the parents have cells that are deeper than wide. The best approach is to always ensure that the photos you use have the same aspect ratio, then carefully customize the pedigree layout to work reasonably well with a photo of that shape at each generation.


PedPro® is a product of Tenset Technologies Ltd, © 2014-16 All Rights Reserved. PedPro is a registered trademark of Tenset Technologies Ltd in the United Kingdom. v3.0.01, October 2016
Apple, Mac and Macintosh are trademarks of Apple Inc., registered in the U.S. and other countries. Microsoft and Windows are registered trademarks of Microsoft Corporation in the U.S. and/or other countries. Lytebox image popup software (www.lytebox.com) © Markus Hay, used with permission under the terms of the Creative Commons Attribution-Share Attribution 3.0 license. Privacy Policy