我们可以为某个电影或者人物的内容去创建一个相册。然后再去创建,相册和电影或人物内容之间的关系,这样我们就可以在电影或者人物的内容上,去显示相关相册里面的图片了。
下面我们一起来看一下,首先我们可以去创建一个新的关系类型。
打开 结构,关系类型。点击 添加关系类型,输入关系的名称,gallery relation,点击 编辑,再来修改一下 标签 ,这个关系是相册,电影和人物之间的,我们可以使用 相关相册/电影/人物 …
在下面的 可用的捆绑源 这里,选择 人物,电影,还有相册这三个内容类型。
打开 高级选项,勾选 唯一 … 然后点击 保存 …
下面我们来创建一个相册和电影之间的关系… 回到前台页面… 打开 蝙蝠侠这个相册 … 我们可以使用 添加关系 区块来创建一个关系,选择关系类型 相关相册/电影/人物 …
查找一下 蝙蝠侠 这部电影,点击选中…
然后点击 创建关系… 现在我们就创建了一个关系,关系里面有两个端点,一个是 蝙蝠侠:黑暗骑士崛起相册,另一个是 蝙蝠侠:黑暗骑士崛起的电影 …
视图部分
想要利用这个关系,我们要用到视图模块。下面我们可以去创建一个视图显示,然后附加到电影内容上,视图的内容就是跟电影内容相关的相册里的图片。
打开 结构,视图,创建一个新的视图,点击 添加视图 …
输入视图的名称, gallery … 点击 编辑,再输入视图的中文名称… 相册 …
显示 内容,类型是 相册 … 然后再去掉 生成一个页面… 点击 继续编辑 …
我们来创建一个 EVA 类型的视图显示,这种视图显示可以作为字段,附加到实体上去显示。你需要先安装一个 EVA 模块,之前我们已经安装过这个模块,所以可以直接点击 添加,选择 添加EVA Field …
修改一下视图显示名称… 相关的图片 … 视图显示的格式我们可以设置为 格子… 修改应用的范围… 点击 应用 … 列数 这里,我们改成 4,点击 应用 …
再来配置一下视图里显示的字段… 点击 字段 旁边的 添加,字段的类型选择 内容: Gallery media,修改应用范围… 点击 应用 …
去掉 生成标签 … 格式化器 这里 选择 媒体相册… 文件视图模式 选择 相册缩略图区块…
打开 多字段设置,我们去掉 在同一行里显示多个值 这个选项,相册里会包含多个图片,勾选这个选项的话,相册里所有的图片都会显示在同一行,去掉这个选项,每一个图片都会做为新的一行,这样我们可以更好的控制相册图片的显示。
修改应用范围… 当前 entity_view … 然后点击应用 …
下面我们再去掉 内容:标题 这个字段 ….
绑定的实体类型… 选择 节点 … 把这个视图捆绑到哪个内容类型上… 选择 电影 ,还有 人物…
在分页器这里,我们可以设置一下显示在电影内容上的相册里的图片数量… 选择 使用迷你分页器,修改应用范围 … 应用 … 要显示的条目 输入 5 … 然后点击 应用 …
这样每一页会显示五张图片,使用迷你分页器我们可以翻页查看其它的图片,如果你想在翻页的时候不刷新整个页面,我们可以打开视图的 AJAX 功能… 在 高级 设置里,使用AJAX… 设置为 是 … 修改应用范围,然后 应用 ...
筛选
下面我们要做的就是利用相册和电影或人物之间的关系,来过滤一下相册里的图片的显示… 我们只想在电影和人物的内容上显示与它们相关的相册里的图片…
先来添加一个 关联 … 勾选 内容: Relation: 相关相册/电影/人物 (node <-> node) ,关联的类型是 Relation ,也就是关系,关系的类型是 相关相册/电影/人物,然后是 node 与 node ,就是内容与内容之间的关系。
修改一下关联的 标识符,相关相册/电影/人物… 修改应用的范围 … 然后点击 应用 ...
再来添加一个 上下文过滤器… 选择 内容: Nid,修改应用范围… 点击 应用 …
关联选择 相关相册/电影/人物… 然后给这个过滤器 提供一个默认值,类型是 URL上的内容 ID… 点击 应用 …
我们可以再添加一个标题,点击 标题 旁边的 添加 … 选择 全局: 文本域 ,修改应用范围… 然后点击 应用 …
在这个文本区域里输入标题的文字… <h3>相关的图片</h3> 标题里的文字我们使用 <h3> 标签包围住 … 点击 应用 …
然后点击 保存。
预览
回到前台页面… 找到 蝙蝠侠 这个电影内容….
在这个内容页面上,你会看到与这个内容相关的相册里面的图片… 不过图片会比较大 …
解决这个问题,你可以使用 CSS 样式来限定图片显示的尺寸,或者我们去创建一个新的图像样式,然后把这个样式分配给 相册缩略图区块 这种文件显示模式去使用。
打开 配置… 图像样式… 添加样式,输入样式的名称 …related_photo_thumbnail… 选择一种效果 … 比例缩放并裁切 … 宽度 输入 120 ,高度也是 120 …
下面我们再去把这个图像样式分配给 相册缩略图区块 这种文件的显示模式去使用,点击 配置 ,找到 文件类型 …
点击 Image 图像文件类型后面的 管理文件显示 … 然后打开 相册缩略图区块 这种模式 …
在下面,我们修改一下这种模式使用的图像样式… 改成我们刚才创建的 related_photo_thumbnail … 点击 保存设置…
我们再回到 蝙蝠侠 这个电影内容 … 刷新 …
现在,图片会按照我们设置的尺寸重新生成缩略图,然后显示在这里。
点击分页器上的翻页链接… 因为启用了 AJAX 功能,所以不用刷新整个页面,就可以查看其它页上的图片了。