Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update media gallery styling #367

Merged
merged 3 commits into from
Aug 4, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .env
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
FORK_ENV=prod
FORK_DEBUG=0
FORK_ENV=dev
FORK_DEBUG=1
24 changes: 24 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -104,5 +104,9 @@
},
"volta": {
"node": "18.13.0"
},
"dependencies": {
"@splidejs/splide": "^4.1.4",
"fslightbox": "^3.4.1"
}
}
116 changes: 58 additions & 58 deletions src/Frontend/Modules/MediaLibrary/Js/Slider.js
Original file line number Diff line number Diff line change
@@ -1,58 +1,58 @@
/**
* global: jsFrontend
*/
(function ($) {
/**
* Create responsive media slider, which uses "slick" slider
*/
$.fn.mediaLibrarySlider = function () {
// loop for all sliders
return this.each(function () {
// define slider
var $slider = $(this)

// define show controls or not
var showControls = $slider.data('show-controls')
var showPager = $slider.data('show-pager')

// we have multiple items
var multipleItems = ($slider.find('div').length > 1)

// we only have one item, hide controls
if (!multipleItems) {
showControls = false
showPager = false
}

// init slick slider
$slider.find('.widget-body').show().slick({
arrows: showControls,
autoplay: multipleItems,
adaptiveHeight: true,
dots: showPager,
// fade: true, // this has side effects in bootstrap 4 because of the .fade class, if you enable this don't forget to add extra styling for this
lazyLoad: 'ondemand',
mobileFirst: true
})
})
}
})(jQuery)

/**
* MediaLibrary slider
*/
jsFrontend.mediaLibrarySlider = {
init: function () {
var $sliders = $('.widget-media-library-slider')

// when no items for slider found, stop here
if ($sliders.length === 0) {
return false
}

// init sliders
$sliders.mediaLibrarySlider()
}
}

$(jsFrontend.mediaLibrarySlider.init)
// /**
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Waarom in comment?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

vergeten, file verwijderd

// * global: jsFrontend
// */
// (function ($) {
// /**
// * Create responsive media slider, which uses "slick" slider
// */
// $.fn.mediaLibrarySlider = function () {
// // loop for all sliders
// return this.each(function () {
// // define slider
// var $slider = $(this)
//
// // define show controls or not
// var showControls = $slider.data('show-controls')
// var showPager = $slider.data('show-pager')
//
// // we have multiple items
// var multipleItems = ($slider.find('div').length > 1)
//
// // we only have one item, hide controls
// if (!multipleItems) {
// showControls = false
// showPager = false
// }
//
// // init slick slider
// $slider.find('.widget-body').show().slick({
// arrows: showControls,
// autoplay: multipleItems,
// adaptiveHeight: true,
// dots: showPager,
// // fade: true, // this has side effects in bootstrap 4 because of the .fade class, if you enable this don't forget to add extra styling for this
// lazyLoad: 'ondemand',
// mobileFirst: true
// })
// })
// }
// })(jQuery)
//
// /**
// * MediaLibrary slider
// */
// jsFrontend.mediaLibrarySlider = {
// init: function () {
// var $sliders = $('.widget-media-library-slider')
//
// // when no items for slider found, stop here
// if ($sliders.length === 0) {
// return false
// }
//
// // init sliders
// $sliders.mediaLibrarySlider()
// }
// }
//
// $(jsFrontend.mediaLibrarySlider.init)
2 changes: 0 additions & 2 deletions src/Frontend/Modules/MediaLibrary/Widgets/Slider.php
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,6 @@ public function execute(): void
return;
}

$this->addJS('/js/vendors/slick.min.js', true, false);

parent::execute();
$this->loadTemplate();
$this->parse();
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
{% if mediaItems %}
<section class="module-media-library" itemscope itemtype="http://schema.org/ImageGallery">
{% block widget_heading %}
{# {% if title %}#}
{# <header class="widget-heading">#}
{# <h3>{{ title|ucfirst }}</h3>#}
{# </header>#}
{# {% endif %}#}
{% endblock %}
{% block widget_body %}
<div class="widget-body">
<div class="grid-container grid-masonry">
{% for mediaItem in mediaItems %}
<div class="grid-item">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
{% set img = mediaItem.webpath() %}
<a href="{{ (mediaItem.getWebPath()) | imagine_filter('media_library_lightbox_large') }}" itemprop="contentUrl" data-size="{{ mediaItem.width }}x{{ mediaItem.height }}" data-fslightbox="gallery-lightbox" data-caption="{{ mediaItem.title }}">
<img itemprop="thumbnail" src="{{ (mediaItem.getWebPath()) | imagine_filter('media_library_lightbox_small') }}" alt="{{ mediaItem.title }}" />
</a>
{# <figcaption itemprop="caption description">{% if title %}{{ title }}{% endif %}{% if not title %}{{ mediaItem.title }}{% endif %}</figcaption>#}
{% if mediaItem.type == 'movie' %}
<div class="hidden" data-lightbox="html">
{{ mediaItem.getIncludeHTML()|raw }}
</div>
{% endif %}
</figure>
</div>
{% endfor %}
</div>
</div>
{% endblock %}

{% block widget_footer %}{% endblock %}
</section>
{% endif %}
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
{#
Media Listing
Variables that are available:
- {{ mediaItems }}: Contains full urls to MediaItem items, f.e.: {{ items.source }}
- {{ title }}: A custom optional title that you can give when parsing from Custom module.
#}

{% if mediaItems %}
<section class="module-media-library widget-media-library-listing">
{% block widget_heading %}
{% if title %}
<header class="widget-heading">
<h3>{{ title|ucfirst }}</h3>
</header>
{% endif %}
{% endblock %}

{% block widget_body %}
<div class="widget-body">
<ul>
{% for mediaItem in mediaItems %}
<li>{{ mediaItem.getLinkHTML|raw }}</li>
{% endfor %}
</ul>
</div>
{% endblock %}

{% block widget_footer %}{% endblock %}
</section>
{% endif %}
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
{#
Media Slider with BxSlider
Variables that are available:
- {{ mediaItem }}: Contains the MediaItem
- {{ title }}: A custom optional title that you can give when parsing from Custom module.
#}

{% if mediaItem %}
<section class="module-media-library widget-media-library-one-image" itemscope itemtype="http://schema.org/ImageGallery">
{% block widget_heading %}
{% if title %}
<header class="widget-heading">
<h3>{{ title|ucfirst }}</h3>
</header>
{% endif %}
{% endblock %}

{% block widget_body %}
<div class="widget-body">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
{% if mediaItem.type == 'movie' %}
{{ mediaItem.getIncludeHTML()|raw }}
{% else %}
<img itemprop="thumbnail" class="img-polaroid img-responsive" src="{{ (mediaItem.getWebPath('media_library_one_image_large')) }}" alt="{{ mediaItem.title }}" />
{% endif %}
</figure>
</div>
{% endblock %}

{% block widget_footer %}{% endblock %}
</section>
{% endif %}
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
{#
Media Slider with BxSlider
Variables that are available:
- {{ mediaItem }}: Contains the MediaItem
- {{ title }}: A custom optional title that you can give when parsing from Custom module.
#}

{% if mediaItem %}
<section class="module-media-library widget-media-library-one-random-image" itemscope itemtype="http://schema.org/ImageGallery">
{% block widget_heading %}
{% if title %}
<header class="widget-heading">
<h3>{{ title|ucfirst }}</h3>
</header>
{% endif %}
{% endblock %}

{% block widget_body %}
<div class="widget-body">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
{% if mediaItem.type == 'movie' %}
{{ mediaItem.getIncludeHTML()|raw }}
{% else %}
<img itemprop="thumbnail" class="img-polaroid img-responsive" src="{{ (mediaItem.getWebPath('media_library_one_image_large')) }}" itemprop="thumbnail" alt="{{ mediaItem.title }}" />
{% endif %}
</figure>
</div>
{% endblock %}

{% block widget_footer %}{% endblock %}
</section>
{% endif %}
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
{#
Media Slider with BxSlider
Variables that are available:
- {{ mediaItems }}: Contains the MediaItem items
- {{ title }}: A custom optional title that you can give when parsing from Custom module.
#}

{% if mediaItems %}
<section class="module-media-library widget-media-library-slider" data-show-controls="true" data-show-pager="true" itemscope itemtype="http://schema.org/ImageGallery">
{% block widget_heading %}
{% if title %}
<header class="widget-heading">
<h3>{{ title|ucfirst }}</h3>
</header>
{% endif %}
{% endblock %}

{% block widget_body %}
<div class="widget-body splide" data-role="slider">
<div class="splide__track">
<ul class="splide__list">
{% for mediaItem in mediaItems %}
<li class="splide__slide">
<div itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
{% if mediaItem.type == 'movie' %}
{{ mediaItem.getIncludeHTML()|raw }}
{% else %}
<a href="{{ (mediaItem.getWebPath()) | imagine_filter('media_library_lightbox_large') }}" itemprop="contentUrl" data-size="{{ mediaItem.width }}x{{ mediaItem.height }}" data-fslightbox="{{ title }}-slider-lightbox" data-caption="{{ mediaItem.title }}">
<img itemprop="thumbnail" src="{{ (mediaItem.getWebPath()) | imagine_filter('media_library_lightbox_small') }}" alt="{{ mediaItem.title }}" />
</a>
{% endif %}
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
{% endblock %}

{% block widget_footer %}{% endblock %}
</section>
{% endif %}
3 changes: 3 additions & 0 deletions src/Frontend/Themes/Bootstrap/src/Js/Index.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,17 @@ import { Resize } from './Utilities/Resize'
// /* Theme imports */
// /* eg. import tooltip from './Theme/Tooltip' */
import { Pagination } from './Theme/Pagination'
import { Slider } from './Theme/Slider'
import NavbarToggler from './Theme/NavbarToggler'
import * as fslightbox from 'fslightbox/index'

/* Renders */
window.bootstrap = bootstrap
window.scrollto = new ScrollTo()
window.resizeFunction = new Resize()
window.pagination = new Pagination()
window.navbarToggler = new NavbarToggler()
window.slider = new Slider()

window.resizeFunction.resize()
window.pagination.events()
Loading