Adding Pictures to Boiler Plate Pages

Adding pictures to the Boilerplate pages such as this one can be challenging to get the website to look good cross platform.  What looks amazing when building the website on a laptop or desktop computer with a screen over 12" does not always look good on a small smart phone or tablet.  It is good to check your work on whatever devices that you have access to, such as a phone or I-pad as well as your computer.  It is also good to check browser compatibility such as Google, Firefox, etc.

Adding Pictures to Paragraphs

When looking to add a picture in a paragraph is where you have to take great care in checking your different platforms. 

• The first thing to mention is that if you want a photo on the right side or left side of the wording, you have to have a large enough paragraph to support the size of the photo.  The larger the screen that you are working on the longer the lines of text and the smaller the picture must be so that the following paragraph is not next to the picture that you are inserting for the corresponding paragraph. 

• The second thing to mention is that when you insert a picture in a section your picture frame will correspond with the font chosen. 

  • Normal font will generate a dark gray frame (the picture to the right was inserted at the top line and not the header, thus the gray frame).

  •  Heading Fonts will generate a dark blue frame.

  • Formatted, Address, or Normal (DIV) will generate a black frame.

• As you can see from the size of this paragraph the picture size that is inserted will work well but you would not want to go bigger to keep it in the paragraph.

If you are looking to add a picture but do not have enough wording to support the picture it does not keep a consistent look to the website. This applies if the photo is set to the right or left. The picture on the right is part of this paragraph but there is not enough supporting text. 

You can see how the picture on the right from the above paragraph extends in to this paragraph and the picture in this paragraph extends up into the above paragraph. As the paragraphs may contain different topic information it can cause confusion. Consider putting wording above or below the picture and making the picture larger if there is not enough supporting text.

If you are looking for a much larger picture it is recommended to put wording above and below the picture and set the picture alignment to <not set>.  Not setting the picture will allow you to center the picture by selecting centered in the font formatting section and it will be centered in whatever platform that you are using. 

The <not set> alignment will set it to the left 

The above picture is sized at Width 500 - Height 329 - Border 5 - HSpace 5 - VSpace 5 - Alignment <not set> then centered using the font centering.