baztianzh/ux-interactive-image

Interactive Image integration for Symfony

1.0.1 2022-07-22 13:35 UTC

Requires

• php: >=8.1
• symfony/config: ^4.4.17|^5.0|^6.0
• symfony/dependency-injection: ^4.4.17|^5.0|^6.0
• symfony/webpack-encore-bundle: ^1.14

Requires (Dev)

• symfony/framework-bundle: ^4.4.17|^5.0|^6.0
• symfony/phpunit-bridge: ^5.2|^6.0
• symfony/twig-bundle: ^4.4.17|^5.0|^6.0
• symfony/var-dumper: ^4.4.17|^5.0|^6.0

Conflicts

• symfony/flex: <1.13
• symfony/webpack-encore-bundle: <1.11

MIT

• symfony-ux
• interactive-image

README

Symfony UX Interactive Image is a Symfony bundle integrating the Interactive Image jQuery plugin in Symfony applications. main Symfony UX repository

Installation

Install this bundle using Composer and Symfony Flex:

composer require baztianzh/ux-interactive-image

Install dependencies

# Install the JavaScript dependencies
yarn install --force
yarn watch

Usage

Basic usage

// ...
use BaztianZh\UX\InteractiveImage\Builder\InteractiveImageBuilderInterface;

class HomeController extends AbstractController
{
    #[Route('/', name: 'app_homepage')]
    public function index(InteractiveImageBuilderInterface $builder): Response
    {
        $interactiveImage = $builder->createInteractiveImage('/build/images/my-image.jpg');

        $textItem = new TextItem(200, 20,'title', 'description');
        
        $interactiveImage->addItem($textItem);

        return $this->render('home/index.html.twig', [
            'interactiveImage' => $interactiveImage,
        ]);
    }
}

Render

  <div class="row">
      {{ render_interactive_image(interactiveImage) }}
  </div>
  
  # You can customize by adding class
  {{ render_interactive_image(interactiveImage, {'class': 'my-class'}) }}

Options

// ...
use BaztianZh\UX\InteractiveImage\Builder\InteractiveImageBuilderInterface;

class HomeController extends AbstractController
{
    #[Route('/', name: 'app_homepage')]
    public function index(InteractiveImageBuilderInterface $builder): Response
    {
        $interactiveImage = $builder->createInteractiveImage('/build/images/my-image.jpg');

        $textItem = new TextItem(200, 20,'title', 'description');
        
        $interactiveImage->addItem($textItem);
        
        # Change default options
        $interactiveImage->getOptions()
            ->setDebug(true)
            ->setShareBox(true)
            ->setSocialMedia($socialMedia)
            ->setTriggerEvent(TriggerEventName::HOVER)
            ->setAllowHtml(true)
        ;

        return $this->render('home/index.html.twig', [
            'interactiveImage' => $interactiveImage,
        ]);
    }
}

Documentation

For more information, check the documentation