Protassium Content Block Logic

The interior page, standard crop, and landing page templates are built upon content blocks that can be interchanged for order and aesthetic choices. When dealing with media (image or video) there are rules in place that affect the populating of content.

The content blocks that this logic is applicable to are: third text two thirds image, half and half, and full width media.

Carousels

The image upload column can support multiple images being uploaded. If one image is available, it will only display one. If multiple are loaded, then it will utilize the carousel styling (adding in arrows and breadcrumbs).While there isn't a limit, it's best practice to put a max of 4-5 images in a carousel. Drag and drop can be used for re-ordering.

ee_carousel

Adding a link for an image

If an image is loaded and a url is present in the Media Embed column, the image will be hyperlinked. The address needs to have http:// present in order for this to work.

ee_addlink

Videos

The media embed column is also used for pasting in a video embed code. The video embed code will trump any image(s) that are loaded.

ee_videoadd

Buttons

Stylized buttons have been added but require a hyperlink to be present before the design can be applied. Here's the process:

On the page you wish to make the changes from within the CMS,

highlight the section of text you wish to make a button  

screen shot 2014-09-08 at 1 36 56 pm

choose the hyperlink button  

screen shot 2014-09-08 at 1 38 30 pm

choose site pages from the dropdown and select the page you wish to link to  

screen shot 2014-09-08 at 1 38 48 pm

select OK  

Hyperlink will be active and now the button style will need to be applied.

screen shot 2014-09-08 at 1 39 12 pm

Within the Block Content column, choose the Styles dropdown and select Button  

screen shot 2014-09-08 at 1 39 26 pm

Button will now look like this:

screen shot 2014-09-08 at 1 39 35 pm

Here's the entire process:

buttonstyle

Widgetz

See CMS Widgetz Wiki for more info on utilizing widgetz.