malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Add width param to showcase shortcode

Browse Source
This commit is contained in:
Tetrakern 2024-09-06 13:16:01 +02:00
parent 323d985aa2
commit 8feee22a99
5 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/application.css
View File

File diff suppressed because one or more lines are too long

2
css/complete.css
View File

File diff suppressed because one or more lines are too long

6
includes/functions/_setup-shortcodes.php
View File

@ -400,8 +400,9 @@ function fictioneer_get_shortcode_tax_query( $args ) {
* @param string|null $attr['rel'] Optional. Relationship between taxonomies. Default 'AND'.
* @param string|null $attr['vertical'] Optional. Whether to show the vertical variant.
* @param string|null $attr['seamless'] Optional. Whether to render the image seamless. Default false (Customizer).
* @param string|null $attr['aspect_ratio'] Optional. Aspect ratio of the item. Supersedes by height. Default empty.
* @param string|null $attr['aspect_ratio'] Optional. Aspect ratio of the item. Default empty.
* @param string|null $attr['height'] Optional. Override the item height. Default empty.
* @param string|null $attr['height'] Optional. Override the item minimum width. Default empty.
* @param string|null $attr['lightbox'] Optional. Whether the thumbnail is opened in the lightbox. Default true.
* @param string|null $attr['thumbnail'] Optional. Whether to show the thumbnail. Default true (Customizer).
* @param string|null $attr['class'] Optional. Additional CSS classes, separated by whitespace.
@ -419,8 +420,9 @@ function fictioneer_shortcode_showcase( $attr ) {
// Defaults
$args = fictioneer_get_default_shortcode_args( $attr, 8 );
// Height
// Height/Width
$args['height'] = sanitize_text_field( $attr['height'] ?? '' );
$args['width'] = sanitize_text_field( $attr['width'] ?? '' );
// Specifics
$args['no_cap'] = filter_var( $attr['no_cap'] ?? 0, FILTER_VALIDATE_BOOLEAN );

8
partials/_showcase.php
View File

@ -27,7 +27,8 @@
* @internal $args['classes'] String of additional CSS classes. Default empty.
* @internal $args['splide'] Configuration JSON for the Splide slider. Default empty.
* @internal $args['height'] Override the item height. Default empty.
* @internal $args['aspect_ratio'] Aspect ratio of the item. Superseded by height. Default empty.
* @internal $args['width'] Override the item minimum width. Default empty.
* @internal $args['aspect_ratio'] Aspect ratio of the item. Default empty.
*/
@ -101,6 +102,11 @@ if ( $splide ) {
$attributes[] = "data-splide='{$splide}'";
}
if ( $args['width'] ) {
$attributes[] .= "style='--showcase-item-min-width: {$args['width']};'";
$args['classes'] .= ' _custom-min-width';
}
?>
<?php if ( $query->have_posts() ) : ?>

10
src/scss/_showcase.scss
View File

@ -23,7 +23,7 @@
&__list:where(:not(.splide__list)) {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(#{get_clamp(160, 175, 375, 480)}, 1fr));
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--showcase-item-min-width, #{get_clamp(160, 175, 375, 480)})), 1fr));
gap: var(--showcase-row-gap, max(3cqw, 1.5rem)) var(--showcase-row-col, max(3cqw, 1.5rem));
// Fallback
@ -42,12 +42,8 @@
max-width: max(420px, 100%);
contain: layout paint style; // Improve performance
&:where(:not(._aspect-ratio, ._custom-height)) {
height: max(64px, #{get_clamp(64, 96, 375, 768)});
}
&._custom-height {
height: var(--showcase-item-height);
&:where(:not(._aspect-ratio)) {
height: var(--showcase-item-height, max(64px, #{get_clamp(64, 96, 375, 768)}));
}
@include bp(mobile-l) {