Paragraph Page

All images will automatically be cropped to the same size. Adding images is the only Required field for a picbox.  Depending on how you want your page to look, there are many options that can be used, or not used, to change the look and function of this tool.

Header

The Header content is displayed above your grid.  Adding content to this field is optional.  In the example above the text "RESEARCH & EXPERIMENT STATIONS" is added in the Header field

Maximum columns

This option lets you determine if you want 2, 3, or 4 picboxes to appear in each row.  In the example above this is set to 3.

Each picbox has a label field so that you as the editor can easily identify the content without having to open up the editing portion of the screen.

Clicking on the Picbox details heading will open up the screen to edit the content for that specific Picbox.

Headline

Adding text here will overlay the text on the top of your image.
In the example above "Asoria | Seafood Research & Education Center" was added to this field in the first Picbox.
Entering content into this field is not required.

Link

If you want your image to link to additional content you would enter that URL here. 
Entering content into this field is not required.

Picbox Image

Click Browse to upload an image or select one from our library of photos using the Media Browser pop-up widow. Adding an image to this field is required. You will need to add an image here before you are able to save your page or add another Picbox to the page.

When uploading an image, you will now see an option to set a "Focal Point" for the image. Moving the white cross hairs on the image will let you set the focal point for that image and this will determine how the image is cropped.

Description

If you want text to appear below your image in the grid you would enter it here.
In the example above "Production and use of food products from the ocean and estuaries" was added to this field in the first Picbox.
Entering content into this field is not required.

Adding: Below your last Picbox you will see a button for [Add another item].  Clicking this button will add another picbox to your page. Marked (2) in the image below.

Removing: Below each Picbox is a red button that reads [Remove].  Clicking this will remove that individual Picbox from your page. Marked (1) in the image below.

Rearranging: You can drag and drop your individual Picboxes to rearrange the order that they appear in your grid.

Global Settings

Label

The label is used in the editing screen to help you identify what content you have in the paragraph section

Each picbox has a label field so that you as the editor can easily identify the content without having to open up the editing portion of the screen.

Individual Picbox Settings

Clicking on the Vertical tabset heading will open up the screen to edit the content for that specific Vertical Tab.

Tab Title

The title you enter here will appear as the lelft menu bar for the Vertical Accordion menu

Tab Contents

The content you enter here will display when the Cooresponding title has been clicked by the end user.

Adding/Removing Tabs

Adding: Below your last Picbox you will see a button for [Add another item].  Clicking this button will add another tab to your page. Marked (2) in the image below.

Removing: Below each Picbox is a red button that reads [Remove].  Clicking this will remove that individual Tab from your page. Marked (1) in the image below.

Rearranging: You can drag and drop your individual Tabs to rearrange the order that they appear in your grid.

Row minimum height

If you want to force this row to a specific minimum height you can enter that height in pixels followed by px without any spaces.  For example, to make the row 400 pixels tall you would enter 400px. 

Row padding

Padding adds space between the text and the edge of the column. Padding can be entered in either pixels or em.  Entries in this field could look like:

• 1em, 2em, 5px, 10px
• (1em = 16px)

Row background color:

Select from a list of OSU colors to set a background color for this entire paragraph (row).

Row background video

Upload an MP4 file that you would like to use as the background image for the paragraph

Row background image

Select if you want the image to be stationary or parallax (scrolling)

Browse to find or upload your image.  You want to be sure that your image is of a high enough quality that it will fill the paragraph area without pixelation.

NOTE: It is only intended for you to use one of the 3 options; background color, video or image. if you assign a background color, this will cover any image or video you have added to the paragraph.

Column background Color:

Select from a list of OSU colors to set a background color for this column (cell).

Image

This will place an image in the column.  The image will be responsive to the column width and appear below any text that is added to the column.

Text

This is the content that will appear in the column. Like the body field on the Basic Page, you will need to change the Text format to Full or Larch if you plan to add pictures or images to the field.

Content Type = Larch

Setting the content type to Larch will provide you with the most options for this field.

The Styles field gives you an option to set the text color to White Text.  This can be useful if you have the Column or Row Background color set to a dark color.

Column padding

Padding adds space between the text and the edge of the column. Padding can be entered in either pixels or em.  Entries in this field could look like:

• 1em, 2em, 5px, 10px

Column width

Using column with to set the width of each column in a row.  Some common layouts are as follows:

• 2 equal columns = 6+6
• 3 equal columns = 4+4+4
• 4 equal columns = 3+3+3+3
• 1/3 – 2/3 columns = 4+8

Column offset

Using the column offset adds space before the column.

To center 1 column on the page with a margin

• Offset = 1, column = 10
• Offset = 2, column = 8
• Offset = 3, column = 6

Column sizes

• Extra-small = cell phone
• Small = tablet
• Medium = laptop
• Large = desktop, large laptop

EM vs PX

• 1em = 16px
• em is responive to the settings of the device used to view the page.

 

  

Adding/Removing Columns

Adding: Below your last Column, you will see a button for [Add another item].  Clicking this button will add another column to your row. Marked (2) in the image below.

Removing: Below each Picbox is a red button that reads [Remove].  Clicking this will remove that individual Column from your page. Marked (1) in the image below.

Rearranging: You can drag and drop your individual Columns to rearrange the order that they appear in your grid.