lyrasoft / banner
Luna Banner package
Installs: 5 483
Dependents: 1
Suggesters: 0
Security: 0
Stars: 0
Watchers: 2
Forks: 2
Open Issues: 6
Type:windwalker-package
Requires
- php: >=8.2
- lyrasoft/luna: ^2.0
README
Installation
Install from composer
composer require lyrasoft/banner
Then copy files to project
php windwalker pkg:install lyrasoft/banner -t routes -t lang -t migrations -t seeders
Seeders
- Add
contact-seeder.php
toresources/seeders/main.php
- Add
banner
type tocategory-seeder.php
Languages
If you don't want to copy language files, remove -t lang
from install command.
Then add this line to admin & front middleware:
$this->lang->loadAllFromVendor(\Lyrasoft\Banner\BannerPackage::class, 'ini');
Use Type or Category
You have 2 choice to structure banners, use type
or category
Type:
Category:
The default will use category
mode. If you want to use type
mode,
you must create a BannerType
enum, for example:
class BannerType extends Enum implements EnumTranslatableInterface { use EnumTranslatableTrait; #[Title('Home Banner')] public const HOME = 'home'; #[Title('Works')] public const WORKS = 'works'; // ... }
Then register enum class to config file:
return [ 'banner' => [ // ... 'type_enum' => \App\Enum\BannerType::class, // ...
The package will auto switch to type
mode.
Register Admin Menu
Edit resources/menu/admin/sidemenu.menu.php
Ues Type mode:
// Banner $menu->link('橫幅管理') ->to($nav->to('banner_list')) ->icon('fal fa-gallery-thumbnails');
Use Category mode:
// Category $menu->link('橫幅分類') ->to($nav->to('category_list', ['type' => 'banner'])) ->icon('fal fa-sitemap'); // Banner $menu->link('橫幅管理') ->to($nav->to('banner_list')) ->icon('fal fa-images');
Add Widget
Add this to packages/widget.php
return [ 'widget' => [ 'types' => [ // ... 'banner' => \Lyrasoft\Banner\Widget\Banner\BannerWidget::class ], // ... ] ];
Install Swiper
and youtube-background
After packages installed, it will auto reauire swiper
as node modules for root package.json
.
If you needs use video & Youtbue, you must manually install youtube-background
yarn add youtube-background
- Swiper:
- Getting Started: https://swiperjs.com/get-started
- Demo: https://swiperjs.com/demos
- Youtbue Background
Frontend Usage
Use BannerRepository
to get banners
$repo = $app->service(BannerRepository::class); /** @var Banner[] $banners */ $banners = $repo->getBannersByType('home')->all(); $banners = $repo->getBannersByCategoryAlias('category-alias')->all(); $banners = $repo->getBannersByCategoryId(5)->all();
Then use component in Edge:
<x-swiper-banners :banners="$banners"></x-swiper-banners>
You can add some params:
<x-swiper-banners :banners="$banners" link-target="_blank" :pagination="true" height="400px" ></x-swiper-banners>
Parameters
Examples
Load by type
<x-swiper-banners :type="$type" link-target="_blank" :pagination="true" height="400px" ></x-swiper-banners>
Load by category alias
<x-swiper-banners :category-alias="$categoryAlias" link-target="_blank" :pagination="true" height="400px" ></x-swiper-banners>
Load by category ID
<x-swiper-banners :category-id="$category->getId()" link-target="_blank" :pagination="true" height="400px" ></x-swiper-banners>
Banner Item Slot
Use item
slot with @scope()
, you will get Banner
entity and index $i
.
Then just build you own HTML.
<x-swiper-banners :banners="$banners" > <x-slot name="item"> @scope($banner, $i) <div class="c-banner-item" style="background-image: url({{ $banner->getImage()) }})"> <h2> {{ $banner->getTitle() }} </h2> </div> </x-slot> </x-swiper-banners>
Use Banner Item Component
Use can use x-banner-item
component, it;s includes default RWD and video switch functions.
<x-swiper-banners :banners="$banners" > <x-slot name="item"> @scope($banner, $i) <x-banner-item :banner="$banner"> <h2> {{ $banner->getTitle() }} </h2> </x-banner-item> </x-slot> </x-swiper-banners>
Parameters:
The Size Settings.
Open etc/packages/banner.php
, you will see:
return [ 'banner' => [ // ... 'types' => [ '_default' => [ 'desktop' => [ 'width' => 1920, 'height' => 800, 'crop' => true, 'ajax' => false, 'profile' => 'image', ], 'mobile' => [ 'width' => 720, 'height' => 720, 'crop' => true, 'ajax' => false, 'profile' => 'image', ] ] ] ] ];
The _default
type has 2 sizes settings, desktop
and mobile
, this means admin upload images will use this size:
You can change all uploading settings here.
Custom Size for Type or Category Alias
If you have a category with alias (promote
), you can add a promote
size settings with different size.
return [ 'banner' => [ // ... 'types' => [ '_default' => [ // ... ], 'promote' => [ 'desktop' => [ 'width' => 800, 'height' => 400, 'crop' => true, 'ajax' => false, 'profile' => 'image', ], 'mobile' => [ 'width' => 200, 'height' => 200, 'crop' => true, 'ajax' => false, 'profile' => 'image', ] ], ] ] ];
Make sure your category alias is same:
Then the banners in this category will use the new size:
Create Default Categories/Type
If you use Category mode, you may want to create some default categories in migration:
$catMapper = $orm->mapper(Category::class); $catMapper->createOne( [ 'title' => '首頁作品', 'alias' => 'works', 'parent_id' => 1 ] );
If you use Type mode, just change the BannerType
enum cases:
BannerScript
Directly use Swiper or Youtube Background
use Lyrasoft\Banner\Script\BannerScript; $app->service(BannerScript::class)->swiper('#swiper', $options); $app->service(BannerScript::class)->youtubeBackground();
Widget
If you ever added BannerWidget::class
to widget.php
, you'll see this widget in admin:
After you added this widget and save. Use this code to render position, for example (demo
position):
<?php $widgetService = $app->service(WidgetService::class); ?> @if ($widgetService->hasWidgets('demo')) <div class="l-demo-position"> @foreach ($widgetService->loadWidgets('demo') as $widget) <div class="l-demo-position__widget mb-3"> <x-widget :widget="$widget"></x-widget> </div> @endforeach </div> @endif