# Title Block

The **Title block** displays a prominent title and optional subtitle for your page or resource, with optional background image support. It is typically used at the top of template pages (like single itinerary, listing, region, or event pages) to provide a visually distinct header.

## Overview

Use the Title block to:
- Show the main resource name as a large heading
- Optionally display a subtitle
- Optionally display a background hero image
- Add a visually distinct header to your template pages

## Block Features & Options

**Display Options:**
- `show_name` (default: true): Show the main title (resource name)
- `show_subtitle` (default: true): Show the subtitle if available
- `show_image` (default: true): Show a background image if the resource has a hero image

**Layout & Style Options:**
- `align`: Alignment of the block (left, center, right)
- `class_name`: Custom CSS class for additional styling
- `color`: (optional) Custom color for the title text
- `custom_template_name`: Use a custom template for the title block

## How it Works

- The block pulls the **name** and **subtitle** from the current resource (e.g., itinerary, listing, region, or event).
- If `show_image` is enabled and a hero image exists, the block displays the image as a background.
- The block is styled with `.itin` and `.itinerator-title` classes for easy targeting.
- The block is responsive and centers content by default, but alignment can be changed via the `align` option.

## How to Add & Configure

1. **Open the block editor** on any page or post
2. **Click the + button** to add a new block
3. **Search for "Title"** in the block inserter
4. **Select "Itinerator Title"** from the results
5. **Configure settings** in the block sidebar

## Shortcode Usage

### Basic Shortcode
```
[tourismo-title show_name="true" show_subtitle="true" show_image="true" align="center"]
```

### Shortcode Options

| Attribute          | Type     | Default | Description                                 |
|--------------------|----------|---------|---------------------------------------------|
| show_name          | boolean  | true    | Show the main title (resource name)         |
| show_subtitle      | boolean  | true    | Show the subtitle if available              |
| show_image         | boolean  | true    | Show background image if available          |
| align              | string   | ""      | Alignment (left, center, right)             |
| class_name         | string   | ""      | Custom CSS class                            |
| color              | string   | ""      | Custom color for the title text             |
| custom_template_name| string   | ""      | Use a custom template for the title block   |

## Content Displayed

- **Title**: The main resource name (e.g., itinerary name, listing name)
- **Subtitle**: The resource subtitle, if available
- **Background Image**: The resource’s hero image, if available and enabled

## Typical Usage

- Place at the top of a template page to provide a visually distinct header
- Use in combination with other blocks (e.g., Description, Map) for a complete resource layout

## Related Blocks

- [Content](content.md) – Display rich content areas
- [Description](description.md) – Show description text
- [Map](map.md) – Display interactive maps