.. include:: /Includes.rst.txt

.. _examples:
.. _examples-common-use-cases:

====================
Examples & Use Cases
====================

Practical, ready-to-use examples for common implementation scenarios with rte_ckeditor_image.

.. contents:: Table of Contents
   :depth: 2
   :local:

Examples by Topic
=================

.. card-grid::
    :columns: 1
    :columns-md: 2
    :gap: 4
    :class: pb-4
    :card-height: 100

    ..  card:: 🚀 Basic Integration

        Minimal setup guide for getting basic image functionality working quickly.
        Perfect for new installations and quick starts.

        ..  card-footer:: :ref:`Read more <examples-basic-integration>`
            :button-style: btn btn-primary stretched-link

    ..  card:: 🔗 Linked Images

        Configure click behavior, link browser integration, and URL parameters.
        Complete guide for creating linked and clickable images.

        ..  card-footer:: :ref:`Read more <examples-linked-images>`
            :button-style: btn btn-primary stretched-link

    ..  card:: 🎨 Image Styles

        Configure custom image styles with Bootstrap classes, CSS groups, and style dropdowns.
        Includes both framework-based and custom CSS approaches.

        ..  card-footer:: :ref:`Read more <examples-image-styles>`
            :button-style: btn btn-primary stretched-link

    ..  card:: 📱 Responsive Images

        Implement responsive images with automatic srcset generation and multiple breakpoints.
        Complete PHP implementation with result examples.

        ..  card-footer:: :ref:`Read more <examples-responsive-images>`
            :button-style: btn btn-primary stretched-link

    ..  card:: ⭐ Advanced Features

        Add lightbox functionality with PhotoSwipe and implement lazy loading for performance.
        Includes both native browser lazy loading and Intersection Observer fallbacks.

        ..  card-footer:: :ref:`Read more <examples-advanced-features>`
            :button-style: btn btn-primary stretched-link

    ..  card:: 🔌 Custom Extensions

        Extend the image plugin with custom dialog fields, external image handling,
        multi-language support, and automatic backend processing hooks.

        ..  card-footer:: :ref:`Read more <examples-custom-extensions>`
            :button-style: btn btn-primary stretched-link

    ..  card:: ✅ Testing

        Functional and unit test examples for ensuring quality and preventing regressions.
        Includes controller tests and database hook tests.

        ..  card-footer:: :ref:`Read more <examples-testing>`
            :button-style: btn btn-primary stretched-link

    ..  card:: 🎭 Template Overrides

        Customize image rendering output by overriding Fluid templates.
        Includes Bootstrap integration, PhotoSwipe lightbox, and lazy loading examples.

        ..  card-footer:: :ref:`Read more <examples-template-overrides>`
            :button-style: btn btn-primary stretched-link

Quick Reference Links
=====================

- :ref:`integration-configuration` - Complete configuration guide
- :ref:`ckeditor-plugin-development` - Extend the plugin
- :ref:`api-controllers` - Controller APIs
- :ref:`troubleshooting-index` - Problem solving

.. toctree::
   :hidden:
   :maxdepth: 1

   Basic-Integration
   Linked-Images
   Image-Styles
   Responsive-Images
   Advanced-Features
   Custom-Extensions
   Testing
   Template-Overrides