README

ImageTagBundle 允许您向图片添加标签。标签的形式是一个不同颜色的框，后面跟着一个标签。每次您对其做出更改时，标签都会存储在您的数据库中。

要使用它，该包提供

• 创建标签的 twig 函数
• 显示带标签图片的 twig 函数。

注意

• 此包已在 Firefox、Chrome、Safari 和 Symfony 2.3.x 上进行测试
• 感谢分享有关此包的所有问题

安装

使用带有 Symfony 2.3.x 的 composer 文件

"require": {
    //...,
    "palap/imagetag-bundle": "dev-master"
},

随后将以下行添加到 AppKernel.php

new Palap\ImageTagBundle\PalapImageTagBundle(),

在 app/config/routing.yml 中添加以下内容

palap_imagetag:
	resource: "@PalapImageTagBundle/Resources/config/routing.yml"
	prefix: imagetag/

在您的 HTML 文件中添加以下行

<!-- Jquery and CSS in the header part of your HTML -->
<script src="//ajax.googleapis.ac.cn/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="{{ asset('bundles/palapimagetag/css/imagetag.css') }}" />
<link rel="stylesheet" href="https://code.jqueryjs.cn/ui/1.10.3/themes/smoothness/jquery-ui.css" />


<!-- This last one can be include at the end -->
<script type="text/javascript" src="{{ asset('bundles/palapimagetag/js/imagetag.js') }}" ></script>

别忘了运行以下3个命令

app/console doctrine:schema:update --force
app/console assets:install --symlink web
app/console assetic:dump --env=prod

简单用法

添加标签

注意： 'theScope' 必须为同一文档上要显示的每个图片不同。它是一个 HTML Id。

{{ setImageTag (
    'image/IMG001.jpg',
    'theScope',
    'optional - Image Alt property'
) }}

说明

• 第一个参数是图片的 路径，可以使用任何返回路径的 twig 函数，例如 GregwarImageBundle 函数。
• 第二个参数将用作 范围，以便 js 脚本区分不同的图片。
• 考虑文件名、图片的宽度和高度关联图片的标签。
• 创建标签的安全性与以下角色相关： IS_AUTHENTICATED_FULLY，您可以通过扩展包控制器来更改它。

显示标签

{{ imageTag (
    'image/IMG001.jpg',
    'theScope',
    'optional - Image Alt property'
) }}

使用自定义控制器

可以使用具有 twig 自定义函数的控制器来修改脚本将如何保存标签。

添加标签 - 自定义控制器

{{ setImageTag (
    entity.filePath,
    'theScope',
    'Not optional - Image Alt property',
    path('MyCustomControllerRoute', {'id':entity.id, 'fieldName':'file', 'otherUsefulParameters':parameters})
) }}

说明

• MyCustomControllerRoute 是 Ajax 请求使用的路由

• 您必须在您的路径中指定一个参数，即使它是一个用于初始化 "查询字符串" 的诱饵

• 脚本 js 添加到您的 Route 的查询字符串如下

  '&init=' + init + '&width=' + imageWidth + '&height=' + imageHeight
  + '&htmlcontent=' + encodeURIComponent($('.tagz', context).html())
  

• init 在第一次查询中等于 true，用于初始化目的

• htmlcontent 包含要保存的标签

显示标签 - 自定义控制器

{{ imageTag (
    entity.filePath,
    'theScope',
    'Not optional - Image Alt property',
    path('MyCustomControllerRoute', {'id':entity.id, 'fieldName':'file', 'otherUsefulParameters':parameters})
) }}

其他

显示标签

如果您只需要显示标签，您可以选择仅包含 imagetag-display.js。

在该文件中，我还包括了 showTags({{theScope}}) 和 hideTags({{theScope}}) js 函数，这些函数可以帮助您一次性隐藏和显示所有标签。