CR Bridge

It is not all that easy to manage precise image placement in a post.  Recall that the images have to fit in the theme width assigned to posts.  Also, there are three versions of the theme based on viewing device, and images will shift position when constrained by viewing space.  To get a sense of this, view your post in a non-maximized browser window and adjust the browser window width.

Positioned with “Float Left”

As a starting strategy, simply insert all the images one after another.  Select each image in turn and select the far left emblem for positioning on all of them.  The example at left illustrates positioning.  This selection assigns “Float Left” positioning, which does two things:  It pushes the image to the left of the available space, and it allows other images or text to wrap to the right.

Link Setting (Although illustrating left alignment, this image is centered.)

While you are at it, if you would like to have a slideshow, you have to modify every image involved.  Click the pencil icon and change the “Link To” setting to “Media File”.  All the images with this setting will participate in the slideshow.  You needn’t set the link address; it is automatic.

Here is a small mystery that occurred in this post, which was begun by cloning another existing post.  Evidently, the two new illustrations above automatically inherited the “link to media file” setting of the four people images below.  It was necessary to remove this property in order to take them out of the slideshow.  This might not have occurred if this post had been created from scratch.  Addendum:  When I later added the “Clear-Float Button” image, it inherited the same “link to media file” property, which I did not bother to remove.  This suggests to me that, if you want a slideshow, you should add the appropriate property to the first image you insert before adding the other images.

Click any player image below for an example of a slide show.  These four images are floated left and are linked to “Media File,” as described above.

If you are creating a long, narrative post with interspersed images, you might consider scattering the images and using both “float left” and “float right” positioning for variety.  See the red heart images further below.  It is recommended that these interspersed images are kept small, say about 170 pixels wide.

As originally written this article did not address a frequent problem with using a group of successive floated images.  That is, text tends to sneak into the spaces between pictures.  This makes sense because floating an image permits other objects, including text, to wrap around it.  The problem is illustrated below.

Winners Paul and Nancy Klein in second session Saturday.

These four, Kathy Breen, Lu, Sam Shen and Mark Gifford won both team games on Sunday.

Lin and Mark Settle with Sam and Lu.

Dick Lamb with out of town guests.

Here is some text above clear-float.

Here is some text below clear-float.

One solution is to remove the floated positioning by centering the last image in a collection like the four people images above.  This tends to leave a lot of wasted white space.  The text will then begin below the centered image.   This works because “floating” is kind of a sticky property, and something has to happen to remove it.   As an example, the image of the “Link Setting…” is centered, and text does not, therefore, wrap around it.

Floated Left

Floated Right

A better solution now is offered.  A button called “Clear Float” has been added to the editor.   When you are positioned at the place where you intend to enter text, click the button and it will break the tendency to wrap around images.  The Dick Lamb image above is floated left.  This caused subsequent text to float also, wrapping around the image, but the Clear Float button was used to end the text floating after only one sentence.

Suppose you purposely float an image to the left of some text, and the text looks good wrapping around the image.  The only thing that bothers you is that you start a new paragraph and one sentence begins beside the image and the rest of the paragraph resumes below it.  You think this is ugly, so you use Clear Float before the new paragraph to force it to begin below the image instead of beside it.

 The heart images above actually were entered one after another and then came the text about “A better solution…”  That text wedged itself between the two floated images even though it came after them.  Now, this paragraph illustrates a slightly different scenario.  The “player” image is floated left, then some text is added, then a player image is floated right, then some more text is added.  Finally, after this sentence, is a clear-float.

Clear-Float Button

A different problem I frequently encounter is trying to insert text after an image that is at the end of the page.  Beware the small blue mark where you place the cursor after the image.  This means you are about to create a link.  Use the right arrow on your keyboard to get past the blue mark.  If you get desperate, switch to the Text editor and type a few letters at the bottom of the page and then switch back to the Visual editor before you mess something up.

One way to avoid the issue is to enter some text — perhaps a few spaces — as a place holder for more text yet to come.  Do this before inserting the image you are adding.  Insert it before those spaces.

In summary, as a simple beginning strategy, insert all the images you want one after another.  Float them all left.  Position the cursor after all the images preparatory to inserting some text.  Click the Clear Float button, and then start typing your text.

This post describes in detail how to create a link in a post, page or widget block.  You can click on one of the pictures to expand it or view the pictures as a slideshow.

Figure 1: Highlight Link Text

Step 1: Highlight the text you want to see in the link, as in Figure 1. The text is NOT the same as the address the link takes you to, though it can be. Then click the link symbol (indicated by the big arrow in Figure 1).

Figure 2: Insert URL

Step 2: Paste or type the desired web address (“URL”) in the corresponding window. If you want a new tab to open when the link is clicked, select “New Window” in the target dropdown. See Figures 2 and 3. Click OK.  An easy way to get the URL you want is to open the target item in a separate tab and then to select and copy and paste what you see in the browser’s address window.

Figure 3. Click OK to close Link Pop-Up

Figure 4. Still in the Editor: Update, Test

Step 3: Note that the link text is now underlined and colored (usually), as in Figure 4, denoting a link. “Update” the post, page or widget block.

Step 4: Open the post or page or widget block in a new tab.  Test the link you have created.

Step 5: If the link doesn’t work, reopen the editor and click on the link text. This will open a little tab that lets you correct or delete the link (Figure 5).  Click the pencil symbol and make your changes to the URL. Click “apply”.  “Update” the post, and then retest as needed.

Note:  After you click the pencil symbol, you will see a settings button (gear symbol).  You probably should avoid this button if you can, as cleanly closing the resulting pop-up is awkward.

Figure 5. The link needs edited.

Two forms are provided for uploading content for the bridge website.  These forms are generally intended for documents that are unsuitable for the WordPress media library.  Posts typically might connect to these documents via links.

For Hand Records:  Click the Hands Uploader link in the black footer area of the web pages to open the form. The reason for having a dedicated uploader for hands is that the “/hands” folder is being kept clean so that the customers can see all past hand records in date order without distractions.  Hand records are stored in “cedarrapidsbridge/content/hands/”.  Hand records should be named as “yymmdd.htm” or else as “yymmdd.pdf”, where yymmdd is the date of play in numeric form.   The suffixes must be in lower case.  Suffix “htm” is for an ordinary html file and “pdf” is for a pdf file.  For example, “170612.htm” would correspond to June 12, 2017 and an html file.

There are two reasons for this strictness in naming hands files.  First, the script that displays hands on the Results page uses the name to find the correct file for each date displayed.  Second, the naming scheme assists in sorting the files by date when the hands folder is viewed.  The Results page refreshes itself every 10 minutes and then re-checks for the existence of uploaded hand-record files.  If you have just uploaded a hand record, and you do not see a corresponding link on the results webpage, just refresh the page.

For other documents: Click the Documents Uploader link in the black footer area of the web pages to open the form.  This permits you to upload, for example, a pdf file or a txt file that you want to link to in a post.  Documents are stored in “cedarrapidsbridge/content/docs/”.  The underlying purpose of document uploads is to support presenting the documents in their original form.  In most cases the documents are not suited for inclusion within a normal post or page.

For uploading images, you ordinarily should prefer to use the built-in WordPress media capabilities so that WordPress will provide thumbnails and standard sizes.  Using the Documents Uploader for images suggests a special reason, such as a special size.

The two forms perform identically except for where they put files.  Here is what the Documents Uploader form looks like:

The steps you must follow are:

• Click “Choose File” and locate and select the document you wish to upload from your PC.
• Enter the password  (check your email archives).
• If you are intentionally replacing a file someone has uploaded before, click the radar button for “Enable Over-Write.”  Otherwise skip this step.
• Click the “Upload File” button.

Scrutinize the messages you receive on the closing page to determine if your upload was successful.  The uploader handles a number of popular file types but by no means all.  The closing page offers a link to the folder where the documents reside, as well as a link to the document you uploaded.  If the uploader rejects a file type you need to upload, contact the admin or use FTP.

You can upload a document name with spaces in it; but the spaces are changed to underlines in the uploaded copy; e.g. “good hand.htm” is changed to “good_hand.htm”.  The closing page warns you that this has been done.  File names are case-sensitive.

When you replace a document, it is not deleted.  It is renamed so that it can still be found.  This is to protect content from mistakes.  If you are serious about deletions, you can haul out Filezilla or contact the admin. Feel free to upload test documents with silly names, and we will clean up later.