Basics

Content Block Functionality

Basic Text and Image Handling

The content block in Concrete CMS is ideal for managing basic text and images. It's straightforward and akin to using a word processor, suitable for headers, paragraphs, and more.

In-Context Editing

When a content block is added:

• A toolbar and text area appears on the page for on-site editing.
• It replaces the typical pop-up form seen in other blocks.
• You can directly type, format text, add links, and insert images.

Link Options with CKEditor

CKEditor, the default text editor has many common editing tools including:

1. URL: To add external links.
2. Anchor Link: To create page-specific anchors.
3. Email: For mailto: links that open the user's email client.
4. Phone: To create tel: links for direct dialing.
5. File Download: Via "Browse Server" to select files for download.
6. Sitemap: To link internal pages, auto-updating if the page moves.

HTML Block Functionality

The HTML block lets you insert code directly onto your page. It's particularly useful for:

• Embedding code such as JavaScript snippets.
• Pasting complicated HTML structures, like large table layouts, which might be more challenging in a content block.

Key Features:

• The block maintains the integrity of your code, without attempting to clean up or format it.
• It offers code highlighting and suggests fixes as you type, enhancing the coding experience.

Hero Image Block

Overview

The Hero Image Block is designed to create impactful, large-scale images usually placed prominently at the top of a webpage. It's often used for showcasing key content, like a featured image with overlaid text or call-to-action buttons.

Features

• Large Display: Designed to display high-resolution images prominently.
• Overlay Text: Allows adding text over the image, useful for headlines or brief descriptions.
• Clickable Elements: Supports adding buttons or links, making it interactive and functional for directing users to other parts of the website.
• Customization: Offers options to adjust image alignment, text positioning, and styling to fit the overall design of the page.

Best Practices

• High-Quality Images: Use high-resolution images for clarity and impact.
• Concise Text: Keep overlay text short and impactful for immediate user engagement.
• Mobile Responsiveness: Ensure the image and text display well on various devices.
• Load Time Consideration: Optimize image size for quick loading while maintaining quality.

Image Block

Overview

The Image Block provides a streamlined method to add images to your page. It offers more controlled placement compared to the Content block, making it ideal for precise image positioning.

Key Features

Image Selection

• Supported Formats: Accepts JPG, PNG, SVG, and non-animated GIF images.
• File Manager Access: "Choose Image" button opens the file manager for easy selection.

Image Hover

• On-State Image: Optional feature to select a second image for hover effects.
• Format Restrictions: Works with JPG, PNG, and non-animated GIF images. The primary and on-state images must be in these formats.

Image Link Options

• No Link: Image without any hyperlink.
• Page Link: Link to another page within your site, accessible through "Choose a Page" option.
• External URL: Link to an external website, typically starting with http or https.
• File Link: Link to a downloadable file, selected via "Choose File".
• Open in New Window: Checkbox option for opening image links in a new tab or window.

Alt Text and Title

• Alt Text: Essential for SEO and accessibility, describes the image's appearance and function.
• Title: Appears as a tooltip on hover, providing additional information about the image.

Image Resizing and Cropping

• Resize Options: Images can be resized or cropped. Unconstrained images use <picture> elements, while constrained ones use <img> elements.
• Constrain Image Size: Resize while maintaining aspect ratio, requiring Max Width and/or Max Height settings.
• Crop Image: Resize and crop from the center, requiring both Max Width and Max Height. Setting either to 9999 prevents resizing in that dimension.

Best Practices

• Image Quality: Use clear, appropriately sized images.
• Alt Text: Always set descriptive alt text for accessibility.
• Resizing and Cropping: Use these features judiciously to maintain image integrity while fitting your layout.

File Block

Overview

The File Block simplifies creating download links for files. It's primarily used for linking to downloadable files, though similar functionality is available in the Content Block.

Key Features

File Selection

• File Manager: "Choose File" button for selecting the file to link.

Link Text

• Customizable Text: Set the text for the file link.

Download Options

• Force Download: Option to prompt a "Save As" dialog instead of opening the file in-browser.

File Statistics

• Tracking: File downloads are tracked in the File Manager, accessible through the Dashboard.

Horizontal Rule Block

Feature Block

Overview

The Feature Block offers a quick way to combine a title, description, and icon in an attractive format. It's designed for common site needs, providing an alternative to image-based icons.

Features

Icon Selection

• Icon Library: Choose from a dropdown of Font Awesome icons.
• Preview: Displays the selected icon for reference.

Title and Description

• Title: Displayed as an H4 heading.
• Paragraph: Rich text field for detailed description under the title.

Link Options

• No Link: Title remains unlinked.
• Internal Page Link: Links to another page on the site, chosen via "Choose Page".
• External URL: Links to an outside website, typically starting with http or https.

Feature Link Block

Functionality

The Feature Link Block is similar to the Feature Block, but with more display fields.