Keywords: image layout, image layout editor, custom layout, FMX, standard layout, patient images
Summary
This article covers how to use the Image Layout Editor in Cloud 9 to create and customize patient image layouts. It includes how to build a basic layout, create an FMX style layout, and add text headers, logos, and images to your custom layouts.
Note: We do not recommend changing any of the pre-existing Standard layouts, as this can interfere with normal function of your site. Instead, we recommend making a copy of that layout, and then making changes to it - or making a entirely new custom layout instead.
Prerequisite: You will need to have the 'View Image Layout Editor' permission enabled. If you do not have this permission, someone in your office will need to grant you that permission.
Creating a New Basic Layout
Step 1 - Navigate to Edit > Image Layout Editor at the top of Cloud 9. You'll see a few basic options at the top and a majority blank screen.
Step 2 - Click the blue '+Add' button to create a new layout. This will pop up a new window asking for basic information about your image layout.
Image layouts will always display as a table - you will need to decide the details of that table. For this example, we're going to create a three by three table. The default size of the image will be 210 pixels by 320 pixels per image. If you would like your images to display larger or smaller, you can adjust this as needed. You can leave the Height and Width at their default amounts for this example.
Hit the blue '+Add' button again, and the pop up will disappear and leave you with a new table.
Step 3 - We need to decide what images will go where. In the far left drop down boxes that have appeared, select the one labeled 'Grid Item'. You will have multiple options here - pick 'Cell'.
Now click on the first box of the table, in the upper left. It will turn blue, and more drop downs will appear on the left.
Step 4 - Choose what you want this cell to be - an image, your office's logo, or you can even insert a Document to add text - such as merge fields for the image series, patient or image names, and the date the images were taken.
For this example, choose 'Image'.
You will see that the Row and Column lines will fill in with a number - this corresponds to how many rows and columns that cell takes up; in this case, we are only picking a single cell that only occupies one row and column, so it will show 1 in of those boxes.
Step 5 - You can now choose an Image from the dropdown - this list will show every Image Type you have in your database. For this example, we will choose 'Facial Frontal Smiling'.
When you select the image type, you will see that the cell will now have text! This is the image type's Code. If you need to change the image type for that cell, simply click in the Image dropdown and choose something else from the list.
Step 6 - Repeat steps 4 and 5 for each cell in your table. It should now look something like this:
Now that we see the images together, we have decided to change the center cell from an image, to the office's logo.
Step 7 - To make the center cell a Logo, click on the cell and change the Cell Type from Image to Logo.
Now, the office's logo from either Edit > Practice Information > Images, or from Edit > Setup > Locations > Images will display in the center of the layout.
This example layout is typical of things like the Standard 8. To build layouts like the FMX layout, we will need to go more in depth.
Creating a New FMX Style Layout
Step 1 - Navigate to Edit > Image Layout Editor at the top of Cloud 9. Select which layout you would like to edit or create a copy of in the drop down menu. You can add an entirely new layout by hitting the blue '+Add' button.
Step 2 - Decide how large you want this to be. In this example we will recreate the FMX layout - for this, we need 7 rows and 15 columns. To start, we will set the Height and Width of each of these to 100 pixels by 100 pixels.
When you hit the '+Add' button, you should see a table that looks like the image below.
Step 3 - We are going to create a top section that will include text as a header for our new layout. Text is added to a table by creating a document in the Document Editor (see: this article) by adding Merge Fields (see: this article) in, usually describing the images, such as Series Name, Image Dates, and identifying information for the patient - name, date of birth, patient ID, etc.
This is an example of what that document can look like:
This will give our layout a header that includes important information. To add this, go to the Grid Item dropdown menu - select the option 'Cell'. Click the cell in the upper left of the table - now, select the drop down menu for Cell Type, and select 'Document'.
Select from the Document drop down your chosen header document. When you click anywhere else in the layout editor, you will see that the cell will now change to say 'TEXT'. This is a placeholder for your document.
Step 4 - We want this to take up the entire top portion of the table. To do this, we are going to click back on the 'TEXT' cell, and we will go to the boxes on the left. Click into the Columns box - we're going to change this from 1 to 15 (the total number of columns in the table). Now, the layout should look like this:
As you can see, the text now stretches across every column. This is how you can edit this size of your boxes within the table, to make them larger or smaller.
Step 5 - To create borders for our images, we're going to adjust the pixel width of certain columns and rows. Remember that rows are horizontal, and columns are vertical. Change the Grid Item to 'Columns', then select the first column of the table. Because the 'TEXT' header is expanded to be one cell over all the columns, it will also be highlighted. You can ignore it for now. Change the number from 100 to 10. Your table should shrink the left column, and will now look like this:
We're going to set every other column to a width of 10 pixels, repeating this step until you have completed all odd numbered columns from left to right. When you're finished, your table should look like this:
Now, for the even numbered columns, go back and set the pixels of the first two and last two to 200 width, and setting the middle three at 150 width. When completed, your table should look like this:
Step 6 - Change the Grid Item to 'Row'. Select the second row - below the 'TEXT' header. Set this row to 50 pixels in height. Set each row according to the following table:
If you don't have enough rows, you can click the light blue '+' plus sign symbol under the Grid Item drop box, and this will add another row beneath the one you currently have selected. You should now have a total of 15 columns and 11 rows.
Step 7 - Next we will add our images, by editing the number of columns and rows they occupy similar to in Step 4. Remember to change the Grid Item to 'Cell'. The first will be in the second column, and will take up 2 rows and 1 column, like so:
Repeat this for each 'block' until your table looks like this:
Step 8 - Now we can select which image will go into which section of the layout - you can place any image into this that you prefer, setting up an order that makes sense for your practice.
Conclusion
Though the Image Layout Editor may seem intimidating at first, it's just a series of tables, arranged in different sizes and with different sections accomplishing different tasks. Each option can be customized to your preference. Experiment, and see what works best for your practice!
As always, if you have any further questions please do not hesitate to reach out to Cloud 9 Support by emailing us at cloud9support@planetdds.com, or chatting us online using the chat bubble on the lower right at https://cloud9support.planetdds.com/hc/en-us, or giving us a call during our business hours of 8:00 AM EST to 8:00 PM EST at the 1.800.394.6050 option 2.