How can I insert fixed HTML into Gantry 5 particles?

To insert fixed HTML into Gantry 5 particles, you can use a few different methods, each with its own advantages. Here's a breakdown of common approaches:

1. Using the "Custom HTML" Particle:

- Gantry 5 provides a "Custom HTML" particle specifically designed for inserting HTML code. This is the most straightforward method for adding fixed HTML.

- Steps:

- In the Gantry 5 Layout Manager, drag and drop the "Custom HTML" particle into the desired position.

- Open the particle's settings.

- In the "HTML" field, paste your HTML code. You can include any valid HTML tags, including inline styles and scripts.

- Save the particle settings.

- Example:

<div class="my-custom-html">
  <h2>This is my fixed HTML</h2>
  <p>This content will always be here.</p>
</div>

2. Using a Custom Twig Template:

- For more complex or reusable HTML, you can create a custom Twig template and use it within a particle.

- Steps:

- Create a new Twig file (e.g., `custom_html.html.twig`) in your theme's `templates/particles` directory.

- Add your HTML code to this file.

- In the Gantry 5 Layout Manager, use a "Particle" particle and select your custom Twig template from the "Twig Template" dropdown.

- Example `custom_html.html.twig`:

<div class="my-custom-html">
  <h2>This is my fixed HTML from Twig</h2>
  <p>This content is loaded from a Twig template.</p>
</div>

3. Modifying Existing Particles:

- If you need to add fixed HTML within an existing particle, you can override the particle's Twig template.

- Steps:

- Locate the original Twig template for the particle you want to modify (usually in `gantry5/engines/nucleus/particles`).

- Copy this template to your theme's `templates/particles` directory, maintaining the same file name and directory structure.

- Edit the copied template to include your fixed HTML.

4. Considerations:

- Performance: Avoid adding large amounts of HTML directly into the "Custom HTML" particle, as it can make the layout manager slow. For larger blocks of HTML, use a custom Twig template.

- Maintainability: Using custom Twig templates makes your code more organized and easier to maintain.

- Security: Be cautious when inserting HTML from external sources. Always sanitize user-provided HTML to prevent security vulnerabilities.

By using these methods, you can effectively insert fixed HTML into Gantry 5 particles, tailoring your website's content to your specific needs.

Learn more about this