davidkrenekcz / bannerphoto
横幅图片管理
Requires
- php: >=5.6
- composer/installers: ~1.0
- idavoll/core-module: >=2.0
- intervention/image: >=2.0
Requires (Dev)
- orchestra/testbench: 3.*
- phpunit/phpunit: >=5,7
README
安装
Composer需求
composer require davidkrenekcz/bannerphoto
包迁移
php artisan module:migrate Bannerphoto
使用
上传照片
上传横幅照片可以通过管理界面完成。照片上传后,您可以通过拖动到期望的位置来更改照片的顺序。
注意:如果您的应用程序使用silber/page-cache
来缓存页面,则在上传、删除和位置更改后会自动清除缓存。
上传视频
Bannerphoto支持播放YouTube视频。只需转到管理界面 > 设置 > 横幅照片,在那里您将找到一个文本区域来编写视频链接。请将每个视频链接写入新的一行。保存此设置后,新视频将加载到滑块的末尾,您可以通过管理员删除它们/更改它们的位置。强烈建议只使用HQ视频,因为LQ视频的缩略图将不会被加载。
设置上传图片的大小
您可以设置上传图片的最大大小 - 设置来自./config/asgard/bannerphoto/core.php
(有关格式,请参阅./Modules/Bannerphoto/Config/core.example
)
设置横幅文本
也支持横幅文本 - 转到管理界面 > 设置 > 横幅照片,在那里您将找到一个文本区域。您可以在那里为每个幻灯片写入文本,每个文本由新行分隔。系统没有验证,因此您需要确保您有与照片数量相同的行数。
获取横幅数据
照片、文本和视频
要获取带有对应标签文本的照片对象,请调用\Modules\Bannerphoto\Entities\BannerPhoto::bannerWithTexts()
示例
{{ print_r(\Modules\Bannerphoto\Entities\BannerPhoto::bannerWithTexts()) }}
// stdClass Object
// (
// [0] => stdClass Object
// (
// [photo] => https:/example.com/modules/bannerphoto/uploads/2017-09-25-image1-1509223303-234105.jpg
// [text] => Lorem ipsum,
// [video] => false // this is not a video
// )
//
// [1] => stdClass Object
// (
// [photo] => https:/example.com/modules/bannerphoto/uploads/2016-06-28-image2-1509226117-822424.png
// [text] => Dolor sit amet
// [video] => "M7lc1UVf-VE" // ID of YouTube video - for usage see bellow
// )
//
// )
照片
要获取上传照片/视频的缩略图URL的数组,请调用\Modules\Bannerphoto\Entities\BannerPhoto::photos()
示例
{{ print_r(\Modules\Bannerphoto\Entities\BannerPhoto::photos()) }}
// Array
// (
// [0] => https:/example.com/modules/bannerphoto/uploads/2017-09-25-image1-1509223303-234105.jpg
// [1] => https:/example.com/modules/bannerphoto/uploads/2016-06-28-image2-1509226117-822424.png
// )
文本
要从设置中获取文本的数组,请调用\Modules\Bannerphoto\Entities\BannerPhoto::texts()
示例
{{ print_r(\Modules\Bannerphoto\Entities\BannerPhoto::texts()) }}
// Array
// (
// [0] => Lorem ipsum
// [1] => Dolor sit amet
// )
视频
您可以使用BannerPhoto的视图bannerphoto::frontend.video和bannerphoto::frontend.video-control将YouTube播放器功能添加到滑块。示例
@foreach($slider as $slide)
<div>
<img src="{{ $slide->photo }}">
@if ($slide->video)
@include("bannerphoto::frontend.video", [ "slide" => $slide ])
@endif
</div>
@endforeach
@include("bannerphoto::frontend.video-control")
video视图为每个视频创建一个简单的模板,而video-control(只加载一次!)负责播放器功能。视频加载时,显示缩略图,视频不透明度为0。视频加载后,视频的不透明度设置为1,视频以静音循环播放。用户无法控制视频。您只需要确保将img缩略图和iframe播放器样式应用到您的网页上,以便它们重叠。
警告:视频无法在移动设备上自动播放,因此只显示缩略图。
全局$bannerPhotos
变量
已移除:由于速度效率,1.1.0版本中已移除全局变量$bannerPhotos
,请使用上述方法
横幅通过整个应用程序中的$bannerPhotos
变量提供。该变量是一个包含按顺序排列的横幅图像链接的数组,因此它可能看起来像这样
{{ print_r($bannerPhotos) }}
// Array
// (
// [0] => https:/example.com/modules/bannerphoto/uploads/2017-09-25-image1-1509223303-234105.jpg
// [1] => https:/example.com/modules/bannerphoto/uploads/2016-06-28-image2-1509226117-822424.png
// )