davidkrenekcz/bannerphoto

横幅图片管理

安装: 100

依赖项: 0

建议者: 0

安全: 0

类型:asgard-module

1.1.3 2019-08-16 11:28 UTC

This package is auto-updated.

Last update: 2024-09-16 22:34:41 UTC


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.videobannerphoto::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
// )