媒体库部件

云媒体库部件整合到您的CMS或网络应用中,所有用户都可方便地直接从云端选择图像、视频、PDFs或存储的其他原始文件,插入方式完全适合您的应用设计、行为要求和总体工作流

集成程序只包含几行代码并提供你(和用户)所有Cloudinary响应媒体库UI的好处,UI拥有丰富的搜索能力并优化媒体资产交付

媒体库部件特征

JavaScript集成包括多项配置选项,包括:

• 设置媒体库开机模式对话框或内联应用
• 控制用户一次或多次插入一资产
• 设置默认变换应用到所有选择资产
  可用以确保使用一致性大小、质量、格式或其他优化设置,添加标识叠加或用其他样式以确保媒体通过应用实现一致性用户定义变换时,默认变换应用(链化)到变换中
• 自定义部件外观和感知元素,例如提供自定义按钮类、定制各种按钮说明或隐藏云形标识标志
• 媒体库直接打开指定状态,例如打开专用文件夹或打开专用资产
• 帮助用户通过组织SAML基础SSO提供程序无缝登录云

如何整合部件应用

整合概述

下步总结过程 云媒体库部件整合点击链接获取详细实施信息

1. 包含需要 JavaScript内含云性全.js文件页面打开媒体库
2. 设置配置选项调用方法初始化和/或打开媒体库部件时,传递一套配置选项选项中包括强制云名并api_key选项 。外加,您可以提供数项可选参数控制设置,如导论描述的那些上方.
3. 创建回调函数用户选择媒体资产并关闭媒体库后,部件返回JSON有效载荷,该有效载荷包括所选资产的URLs以及其他资产数据,如文件像素大小、格式、资产类型(图像、视频、原版等)等您应创建插入Handler回调函数接收并处理此数据以控制选择资产如何嵌入您的页面
4. 验证并打开媒体库部件实例设置配置选项并创建回调函数后,createMediaLibrary或openMediaLibrary方法即时或即时打开部件
5. 可选性搭建SAML认证.可启动或请求用户通过SAMLSSO提供程序登陆云如果用户已经登录使用SSOCMS或Web应用托管媒体库部件,此选项可提供无缝经验
6. 可选性定义云式注销策略用户登陆云端时,可使用云端注销点登陆或随时登录
7. 可选性添加上传事件处理- 你可以注册媒体库部件上传事件,当嵌入式上传部件触发事件时触发事件
8. 可选性添加删除事件处理- 你可以注册媒体库部件删除事件,当用户删除资产时触发事件

开工包含需要 JavaScript

向网页添加下行并打开媒体库部件

二叉设置配置选项

时调用OpenMediaLibrary ()或创建MediaLibrary ()方法传递一组配置选项选项中包括强制云名并api_key选项 。外加各种可选设置控制部件行为、外观和感知,如下表所示

也可以任选调整值媒体库行为选项显示于下方使用部件重开show()方法论

选项	描述性	默认值
验证
云名	需求化字符串云名产品环境访问
api_key	需求化字符串产品环境API密钥
用户名	字符串用户名存取云 提供此值时,如果用户尚未登录,云登录屏即开关并显示指定的用户名 未提供时,用户可人工输入云登录屏中的任何用户名和对应密码	无
saml使用	布林是否执行自动SSO登录SAML用户名.只有当“EnforceSAML登录选项”为您的账号禁用时才需要此参数	虚伪
客户端
按钮插件	字符串标题文本显示页面按钮 打开媒体库 应用时mtnPlace参数提供部件即时法	开放媒体库
按钮类	字符串类开通媒体库页面按钮 应用时mtnPlace参数提供部件即时法	无 使用默认HTML按钮
inline_container	字符串或html元素.选择器字符串或HTML元素将包含媒体库部件内嵌元素媒体库打开网页时包含此参数 打开模式库时,媒体库阻塞访问程序页打开内联时,您的应用程序不阻塞	无 开机模式对话框
插入_Caption	字符串插入按钮标题文本显示如果要使用外部机制插入操作,可设置无效或空字符串完全隐藏内置插入按钮	插入
删除头版	布尔.开机时是否删除蓝顶横幅唯一适切时inline_container并存值集打开部件模式对话框时忽略此参数	虚伪
z_index	整数设置媒体库元素的CSS栈序 媒体库部件工作模式对话框相关 时间inline_container未定义)	9999(顶部)
媒体库行为	注解:这些选项也可以使用show()方法论
default_transformations	对象[包含一个或多个变换对象并应用到插入媒体资产需要时,每种变换都可包括多链式组件定义方式与定义定义方式相同热切变换.例举 :[{质量:auti},{fetch_format:auti 默认变换也可以是一个复杂链式变换对象,控制大小质量并增加叠加等此外,它可包含多项变换定义在这种情况下,为每个选定资产创建多导出图像并纳入响应 注释 : 用户从资产回溯页面选择变换时,您的默认变换链式后用户变换 库中若包含多介质类型(图像、视频、原型),请确保默认变换对所有相关类型都有效	无
最大文件	最大媒体资产数可单片段添加相关时间多义.	20码
多重性	布尔.是否允许用户从媒体库资产网格选择多图像	真实性
自定义show()选项	选项相关唯一面向show()方法论
资产类	对象指令部件直接开通媒体库管理页面并带指定资产独有标识符打开资产资产类对象.上头资产类对象可分解定义资源类型,类型并公共标识或单片资源i标识符 例举 : {Sasset:{resource_type:simage/sup加载/public_id:sample OR系统 {asset:{resource_id:#image/upload/sample	无
集合集合	对象指令部件集合视图打开 传递空对象打开集合视图显示所有集合,例如:集合数 : 传递集合ID打开部件并显示专用集合标识符数为URL最后组件查看媒体库控制台的集合时),例如:集合 {id:XXXX	无
搜索	对象指令部件打开搜索视图 传递空对象打开缺省搜索视图而无滤波,例如:搜索:######## 传递搜索表达式打开部件并按搜索表达式过滤视图结果,例如:{表达式:资源类型:图像和标签=kitten} 看搜索表达式文档获取更多信息	无
文件夹	对象指令部件浏览模式打开,显示指定文件夹内容并可选筛选到特定资产类型选项用a定义文件夹对象如下: {文件夹:{path:packer_type:View	root文件夹 所有资产类型
变换	对象指令部件直接开通媒体库Edit页面并带指定资产并带已应用的指定变换资产变换用URL格式指定变换对象如下: {transformation:{url: "https://res.www.aaaalireno.com/demo/image/upload/c_scale,w_123/a_45/sample.jpg"}}	无

样本配置选项定义

下方配置显示自定义设计按钮myBtn)带标签插入图像CMS或Web应用页按钮点击时,媒体库部件将开像模态对话框亚历克斯即登录用户对所选图像将生成2个导出图像,1个提供原创图像,但带原创图像q_aut并f_aut变换应用, 并用小圆形图像传递图像g_aut保证图像中最重要的部分保留在裁剪中

3级创建回调函数

用户选择媒体资产插入并关闭媒体库后,部件返回JSON有效载荷,内含选定资产的URLs、基于指定或默认变换的任何衍生资产以及其他资产数据,如文件维度、字节大小、格式、资产类型(图像、视频、原生等)等您应创建插入Handler回调函数接收并处理此数据以控制选择资产如何嵌入您的页面

例举 :function insertHandler(data){...}

返回数据由数组对象组成-为每个插入资产组成对象包括下列属性(按字母顺序在此显示):

• 字节:数字
• 上下文:对象
• 创建_at:字符串
• 导出式:对象
• 格式化:字符串
• 高度显示:数字
• 公共标识:字符串
• 资源类型:字符串
• safe_url:字符串
• 标签标签:字符串
• 类型上载
• URL:字符串
• 版本化:数字
• 宽度:数字
• [持续时间:数-仅供视频资产使用

JSON样本响应变换图像

下图示例显示用户插入图像并应用变换后返回的JSON数据注意数据包括原图像的URLs(HTTP和HTTPS版本)以及衍生(变换)图像的URL

样本JSON响应原创视频

下图示例显示用户选择视频资产后返回的JSON数据

4级验证并打开媒体库部件

设置配置选项并创建回调函数后,将这些传递到即时方法中两种方法都即时化部件

• openMediaLibrary验证部件并打开用户尚未登录云系统(直接登录或通过SSO登录)时,链接提示用户登陆成功登录后,部件打开并显示可用资产
• createMediaLibrary验证部件,但不打开如果您想激活后台即时进程, 媒体库可应请求快速为用户开放 。使用媒体部件可明文打开或关闭show()和hide()gle方法.

语法

• openMediaLibrary(选项回调,[:mtnPlace万事通)
• createMediaLibrary(选项回调,[:mtnPlace万事通)

参数解析

• 选项- 区配置选项应用到初始媒体库实例使用show()和hide()gle方法时可选择调整部分这些设置
• 回调- 区回调函数判定如何处理所选媒体资产
• mtnPlace可选性HTMLE元素或网页选择器,用新按钮替换,切换媒体库实例开闭可定义此按钮的外观和文本按钮类并按钮插件配置选项.

实例

显示或隐藏媒体库

媒体库即时化后,您可使用show()并隐藏()方法打开并关闭程序部件

• 窗口.ml.show[选项万事通)- if you want调整媒体库行为选项定义当即执行部件时,可选择传递新部件选项对象设置您想修改此显示会话

  举个例子,如果想控制资产总数,用户可在您的CMS应用单操作中插入,如果用户插入几个项,关闭部件并重开它,你可能想调整最大文件值显示新剩余量

  调用时show(),如果用户尚未登陆云形系统(直接登录或通过SSO登录),则用户会被提示登陆

• window.ml.hide()隐藏部件时任选调整后选项传递show()命令被忘记,设置返回初始即时设置

显示并隐藏回调函数

除需求外插入Handler回调函数中,您还可以添加可选回调函数,这些函数将在媒体库部件显示或隐藏时运行:

• 上头showHandler回调函数显示时运行,例如:{showHandler:(){
• 上头隐藏Handler回调函数隐藏时运行,例如:idHandler:()

例举 :

5级可选性搭建SAML认证

CMS或Weba用户已登录使用SSO时,您也可以为云端建立SSO登录程序,以便用户能够体验无缝体验

特性提供后,你(云型账户管理员)启动SAML验证用户程序,输入提供方SAML元数据URLSAML登录中选项账号安全控制台设置页面可选择允许或强制 ssO登录用户

要自动登录基于现有 ssession的用户,你必须配置内存安全设置允许IFrame嵌入并提供下列配置参数:

• saml使用设置为真实性(只有当'EnforceSAML登录'选项为您的账号禁用时才需要)
• 用户名用户名访问账户

6级可选性定义云式注销策略

用户登录出云端时可调用云端停机点://www.aaaalireno.com/users/logout

7可选性添加上传事件处理

可注册媒体库部件上传事件内嵌上传部件触发事件时触发事件 细节触发事件使用上方法初始化部件注册上传事件例举注册初始化ml媒体库部件上传事件数 :

全列嵌入式上传部件触发事件事件处理段上传部件API引用

八点八分可选性添加删除事件处理

可注册媒体库部件删除事件,即用户删除资产时触发事件,并包括文件删除的所有细节i存储资产模式并需要知道用户是否删除上传资产(例如,他们上传错误图像)。

实例

实例1

下示例即刻表示媒体库部件为模态对话框并准备它强度登录并存取myCorporation云化产品环境登录由SAML验证或人工登录处理 。配置包括定制按钮类和按钮文本替换打开btnHTML元素CMS页面选定资产数据显示在控制台日志中

实例2

下示例即刻设计媒体库部件并准备爱丽丝仙境登录并存取myCorporation产品环境后打开部件模式对话框未创建按钮此次用户可选择最多8媒体资产,并显示控制台日志显示所选资产中每一项数据

代码沙盒

下图代码沙盒显示如何执行HTML媒体库部件iframe框架: