Skip to content
This repository was archived by the owner on Oct 18, 2023. It is now read-only.

Commit 405f315

Browse files
stefanobartolettistefanobartoletti
committed
Merge branch 'devel'
2 parents 405b44f + b3af83c commit 405f315

File tree

9 files changed

+750
-535
lines changed

9 files changed

+750
-535
lines changed

‎CHANGELOG.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,19 @@ All notable changes to this project will be documented in this file.
33

44
The format is based on [Keep a Changelog][Keep a Changelog] and this project adheres to [Semantic Versioning][Semantic Versioning].
55

6+
## [Unreleased]
7+
8+
### Added
9+
- Added support to configure compression value for images
10+
11+
### Changed
12+
- Added responsive image examples to the pattern library
13+
- Moved image sizes functions out from the default setup to their own action
14+
- Updated Dependencies
15+
16+
### Fixed
17+
- Added filter to properly style active items on nav-menus with Bootstrap Nav-Walker
18+
619
## [0.29.1] - 2022-04-04
720

821
### Security

‎functions.php‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88

99
require_once get_template_directory() . '/functions/enqueues.php'; // --- Include CSS & JavaScript ---
1010

11+
require_once get_template_directory() . '/functions/images.php'; // --- Image settings ---
12+
1113
require_once get_template_directory() . '/functions/navmenus.php'; // --- Register navmenus ---
1214

1315
require_once get_template_directory() . '/functions/sidebars.php'; // --- Register sidebars ---

‎functions/global.php‎

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ function( $args ) {
8888

8989
// --- Nav Walker attributes fix for Bootstrap 5 ---
9090

91-
function brk_bs5_navwalker_fix( $atts ) {
91+
function brk_bs5_toggle_fix( $atts ) {
9292

9393
if ( array_key_exists( 'data-toggle', $atts ) ) {
9494
unset( $atts['data-toggle'] );
@@ -97,4 +97,42 @@ function brk_bs5_navwalker_fix( $atts ) {
9797
return $atts;
9898

9999
}
100-
add_filter( 'nav_menu_link_attributes', 'brk_bs5_navwalker_fix' );
100+
add_filter( 'nav_menu_link_attributes', 'brk_bs5_toggle_fix' );
101+
102+
103+
function brk_is_active_nav_item( $item, $args ) {
104+
if ( ! property_exists( $args, 'walker' ) || ! is_a( $args->walker, 'WP_Bootstrap_Navwalker' ) ) {
105+
return false;
106+
}
107+
if ( ! $item->current && ! $item->current_item_ancestor ) {
108+
return false;
109+
}
110+
111+
return true;
112+
}
113+
114+
function brk_add_active_class_to_anchor( $atts, $item, $args ) {
115+
if ( false === brk_is_active_nav_item( $item, $args ) ) {
116+
return $atts;
117+
}
118+
119+
if ( isset( $atts['class'] ) ) {
120+
$atts['class'] .= ' active';
121+
} else {
122+
$atts['class'] = 'active';
123+
}
124+
return $atts;
125+
}
126+
add_filter( 'nav_menu_link_attributes', 'brk_add_active_class_to_anchor', 10, 3 );
127+
128+
129+
function brk_remove_active_class_from_li( $classes, $item, $args ) {
130+
if ( false === brk_is_active_nav_item( $item, $args ) ) {
131+
return $classes;
132+
}
133+
134+
return array_diff( $classes, array( 'active' ) );
135+
}
136+
add_filter( 'nav_menu_css_class', 'brk_remove_active_class_from_li', 10, 3 );
137+
138+

‎functions/images.php‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<?php
2+
3+
/**
4+
* https://developer.wordpress.org/reference/functions/add_image_size/
5+
* add_image_size( $name:string, $width:integer, $height:integer, $crop:boolean|array )
6+
* array( 'x_crop_position', 'y_crop_position' )
7+
* x_crop_position > left center right
8+
* y_crop_position > top center bottom
9+
*/
10+
11+
if ( ! function_exists( 'brk_image_settings' ) ) {
12+
function brk_image_settings() {
13+
add_image_size( 'brk_big', 1400, 800, true );
14+
add_image_size( 'brk_square', 400, 400, true );
15+
add_image_size( 'brk_single', 800, 500, true );
16+
// remove_image_size('large');
17+
// remove_image_size('thumbnail');
18+
// remove_image_size('medium');
19+
// remove_image_size('medium_large');
20+
remove_image_size( '1536x1536' );
21+
remove_image_size( '2048x2048' );
22+
}
23+
}
24+
add_action( 'after_setup_theme', 'brk_image_settings' );
25+
26+
27+
// --- Set image compression value ---
28+
// https://developer.wordpress.org/reference/hooks/jpeg_quality/
29+
30+
// function brk_image_quality() {
31+
// return 80;
32+
// }
33+
// add_filter( 'jpeg_quality', 'brk_image_quality' );

‎functions/imagesizes.php‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎functions/setup.php‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,6 @@ function brk_setup_theme() {
3535
// Enable Widgets refresh from Customizer
3636
add_theme_support( 'customize-selective-refresh-widgets' );
3737

38-
// Define custom image sizes
39-
require_once get_template_directory() . '/functions/imagesizes.php';
40-
4138
// Set max content width (embedded)
4239
if ( ! isset( $content_width ) ) {
4340
$content_width = 1400;}

‎package.json‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,23 +17,23 @@
1717
"lint": "yarn lint:js && yarn lint:style && composer lint"
1818
},
1919
"dependencies": {
20-
"@fortawesome/fontawesome-free": "^6.0.0",
21-
"@popperjs/core": "^2.11.4",
20+
"@fortawesome/fontawesome-free": "^6.1.1",
21+
"@popperjs/core": "^2.11.5",
2222
"bootstrap": "^5.1.3"
2323
},
2424
"devDependencies": {
25-
"@babel/core": "^7.17.7",
25+
"@babel/core": "^7.17.12",
2626
"@babel/eslint-parser": "^7.17.0",
27-
"@babel/preset-env": "^7.16.11",
27+
"@babel/preset-env": "^7.17.12",
2828
"@rbnlffl/gulp-rollup": "^0.2.0",
2929
"@rollup/plugin-babel": "^5.3.1",
30-
"@rollup/plugin-commonjs": "^21.0.2",
31-
"@rollup/plugin-node-resolve": "^13.1.3",
32-
"browser-sync": "^2.27.8",
33-
"del": "^6.0.0",
34-
"eslint": "^8.11.0",
30+
"@rollup/plugin-commonjs": "^22.0.0",
31+
"@rollup/plugin-node-resolve": "^13.3.0",
32+
"browser-sync": "^2.27.10",
33+
"del": "^6.1.0",
34+
"eslint": "^8.15.0",
3535
"eslint-config-standard": "^16.0.3",
36-
"eslint-plugin-import": "^2.25.4",
36+
"eslint-plugin-import": "^2.26.0",
3737
"eslint-plugin-node": "^11.1.0",
3838
"eslint-plugin-promise": "^6.0.0",
3939
"gulp": "^4.0.2",
@@ -52,9 +52,9 @@
5252
"gulp-terser": "^2.1.0",
5353
"gulp-ttf2woff2": "^4.0.1",
5454
"gulp-wp-pot": "^2.5.0",
55-
"rollup": "^2.70.1",
56-
"sass": "^1.49.9",
57-
"stylelint": "^14.5.3",
55+
"rollup": "^2.73.0",
56+
"sass": "^1.51.0",
57+
"stylelint": "^14.8.2",
5858
"stylelint-config-recess-order": "^3.0.0",
5959
"stylelint-config-standard": "^25.0.0",
6060
"stylelint-config-standard-scss": "^3.0.0"

‎pattern-library.php‎

Lines changed: 85 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,9 @@
4545
'900',
4646
);
4747

48-
$lorem_short = 'Lorem ipsum dolor sit amet';
48+
$bs_lorem_short = 'Lorem ipsum dolor sit amet';
4949

50-
$lorem_long = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, ut. Repudiandae excepturi sequi quaerat ex eos dicta earum, fuga deleniti amet accusantium recusandae quia aperiam aut assumenda, quas ratione laborum.'
50+
$bs_lorem_long = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, ut. Repudiandae excepturi sequi quaerat ex eos dicta earum, fuga deleniti amet accusantium recusandae quia aperiam aut assumenda, quas ratione laborum.'
5151

5252
?>
5353

@@ -79,12 +79,12 @@
7979
<h2 class="border-bottom mb-5">Typography</h2>
8080

8181
<div class="col-12 pb-3">
82-
<p class="h1 mb-4">h1. <?php echo esc_html( $lorem_short ); ?></p>
83-
<p class="h2 mb-4">h2. <?php echo esc_html( $lorem_short ); ?></p>
84-
<p class="h3 mb-4">h3. <?php echo esc_html( $lorem_short ); ?></p>
85-
<p class="h4 mb-4">h4. <?php echo esc_html( $lorem_short ); ?></p>
86-
<p class="h5 mb-4">h5. <?php echo esc_html( $lorem_short ); ?></p>
87-
<p class="h6 mb-4">h6. <?php echo esc_html( $lorem_short ); ?></p>
82+
<p class="h1 mb-4">h1. <?php echo esc_html( $bs_lorem_short ); ?></p>
83+
<p class="h2 mb-4">h2. <?php echo esc_html( $bs_lorem_short ); ?></p>
84+
<p class="h3 mb-4">h3. <?php echo esc_html( $bs_lorem_short ); ?></p>
85+
<p class="h4 mb-4">h4. <?php echo esc_html( $bs_lorem_short ); ?></p>
86+
<p class="h5 mb-4">h5. <?php echo esc_html( $bs_lorem_short ); ?></p>
87+
<p class="h6 mb-4">h6. <?php echo esc_html( $bs_lorem_short ); ?></p>
8888
</div>
8989

9090
<div class="col-12 pb-3 pt-5">
@@ -97,28 +97,28 @@
9797
</div>
9898

9999
<div class="col-12 col-md-6 pt-5">
100-
<p><?php echo esc_html( $lorem_long ); ?></p>
101-
<p><?php echo esc_html( $lorem_long ); ?></p>
102-
<p><?php echo esc_html( $lorem_long ); ?></p>
103-
<p><?php echo esc_html( $lorem_long ); ?></p>
100+
<p><?php echo esc_html( $bs_lorem_long ); ?></p>
101+
<p><?php echo esc_html( $bs_lorem_long ); ?></p>
102+
<p><?php echo esc_html( $bs_lorem_long ); ?></p>
103+
<p><?php echo esc_html( $bs_lorem_long ); ?></p>
104104
</div>
105105

106106
<div class="col-12 col-md-6 pt-5">
107-
<p class="lead mb-4">LEAD. <?php echo esc_html( $lorem_long ); ?></p>
108-
<p class="small mb-4">SMALL. <?php echo esc_html( $lorem_long ); ?></p>
109-
<p class="fw-bold mb-4">BOLD. <?php echo esc_html( $lorem_long ); ?></p>
110-
<p class="fst-italic mb-4">ITALIC. <?php echo esc_html( $lorem_long ); ?></p>
107+
<p class="lead mb-4">LEAD. <?php echo esc_html( $bs_lorem_long ); ?></p>
108+
<p class="small mb-4">SMALL. <?php echo esc_html( $bs_lorem_long ); ?></p>
109+
<p class="fw-bold mb-4">BOLD. <?php echo esc_html( $bs_lorem_long ); ?></p>
110+
<p class="fst-italic mb-4">ITALIC. <?php echo esc_html( $bs_lorem_long ); ?></p>
111111
</div>
112112

113113
<div class="col-12 col-md-6 pt-5">
114114
<?php foreach ( $bs_font_weights as $weight ) { ?>
115-
<p style="font-weight: <?php echo esc_attr( $weight ); ?>;"><?php echo esc_attr( $weight ); ?>. <?php echo esc_html( $lorem_long ); ?></p>
115+
<p style="font-weight: <?php echo esc_attr( $weight ); ?>;"><?php echo esc_attr( $weight ); ?>. <?php echo esc_html( $bs_lorem_long ); ?></p>
116116
<?php } ?>
117117
</div>
118118

119119
<div class="col-12 col-md-6 pt-5">
120120
<?php foreach ( $bs_font_weights as $weight ) { ?>
121-
<p style="font-style: italic; font-weight: <?php echo esc_attr( $weight ); ?>;"><?php echo esc_attr( $weight ); ?>. <?php echo esc_html( $lorem_long ); ?></p>
121+
<p style="font-style: italic; font-weight: <?php echo esc_attr( $weight ); ?>;"><?php echo esc_attr( $weight ); ?>. <?php echo esc_html( $bs_lorem_long ); ?></p>
122122
<?php } ?>
123123
</div>
124124

@@ -175,7 +175,7 @@
175175

176176
<p class="h2 mb-4">Lorem ipsum dolor</p>
177177

178-
<p class="mb-4"><?php echo esc_html( $lorem_long ); ?></p>
178+
<p class="mb-4"><?php echo esc_html( $bs_lorem_long ); ?></p>
179179

180180
<div>
181181
<button type="button" class="btn btn-<?php echo esc_attr( $color_2 ); ?>">Button</button>
@@ -194,6 +194,62 @@
194194

195195
</div> <!-- #blocks -->
196196

197+
<div id="images" class="container mb-5">
198+
199+
<h2 class="border-bottom mb-5">Images</h2>
200+
201+
<?php
202+
203+
$row_cols = array(
204+
'',
205+
'row-cols-md-2',
206+
'row-cols-md-3',
207+
'row-cols-md-2 row-cols-lg-4',
208+
'row-cols-md-3 row-cols-lg-6',
209+
);
210+
211+
foreach ( $row_cols as $row_col ) { ?>
212+
213+
<div class="row <?php echo esc_attr( $row_col ); ?> mb-5">
214+
<div class="col position-relative">
215+
<img class="img-fluid" src="https://dummyimage.com/1920x1080.jpg">
216+
<div class="img-details position-absolute top-0 mt-1 ms-1 px-2 py-1 bg-light">
217+
<p class="natural-width mb-0"></p>
218+
<p class="client-width mb-0"></p>
219+
<p class="percent-width mb-0"></p>
220+
<p class="screen-width mb-0"></p>
221+
</div>
222+
</div>
223+
</div>
224+
225+
<?php } ?>
226+
227+
<script>
228+
const imagesRows = document.querySelectorAll('#images .row');
229+
230+
imagesRows.forEach(function (row) {
231+
232+
const img = row.querySelector('.img-fluid');
233+
const naturalW = row.querySelector('.img-details .natural-width');
234+
const clientW = row.querySelector('.img-details .client-width');
235+
const percentW = row.querySelector('.img-details .percent-width');
236+
const screenW = row.querySelector('.img-details .screen-width');
237+
238+
function displayImgDetails() {
239+
naturalW.innerHTML = 'naturalWidth(px): ' + img.naturalWidth;
240+
clientW.innerHTML = 'clientWidth(px): ' + img.clientWidth;
241+
percentW.innerHTML = 'percent(%): ' + Math.round(img.clientWidth / img.naturalWidth * 100 );
242+
screenW.innerHTML = 'Width(vw): ' + Math.round(img.clientWidth / document.body.clientWidth * 100 );
243+
};
244+
245+
img.addEventListener('load', displayImgDetails);
246+
window.addEventListener('resize', displayImgDetails );
247+
});
248+
249+
</script>
250+
251+
</div> <!-- #images -->
252+
197253
<div id="forms" class="container mb-5">
198254

199255
<div class="row pt-5">
@@ -227,7 +283,7 @@
227283
<div class="mb-4">
228284
<div class="form-check">
229285
<input type="checkbox" class="form-check-input" id="check-01">
230-
<label class="form-check-label" for="check-01"><?php echo esc_html( $lorem_short ); ?>.</label>
286+
<label class="form-check-label" for="check-01"><?php echo esc_html( $bs_lorem_short ); ?>.</label>
231287
</div>
232288
</div>
233289

@@ -244,45 +300,45 @@
244300
<div class="mb-4">
245301
<div class="form-check">
246302
<input type="checkbox" class="form-check-input" id="check-1" checked>
247-
<label class="form-check-label" for="check-1"><?php echo esc_html( $lorem_short ); ?>.</label>
303+
<label class="form-check-label" for="check-1"><?php echo esc_html( $bs_lorem_short ); ?>.</label>
248304
</div>
249305
<div class="form-check">
250306
<input type="checkbox" class="form-check-input" id="check-2">
251-
<label class="form-check-label" for="check-2"><?php echo esc_html( $lorem_short ); ?>.</label>
307+
<label class="form-check-label" for="check-2"><?php echo esc_html( $bs_lorem_short ); ?>.</label>
252308
</div>
253309
<div class="form-check">
254310
<input type="checkbox" class="form-check-input" id="check-3">
255-
<label class="form-check-label" for="check-3"><?php echo esc_html( $lorem_short ); ?>.</label>
311+
<label class="form-check-label" for="check-3"><?php echo esc_html( $bs_lorem_short ); ?>.</label>
256312
</div>
257313
</div>
258314

259315
<div class="mb-4">
260316
<div class="form-check">
261317
<input class="form-check-input" type="radio" name="flexRadioDefault" id="radio-1" checked>
262-
<label class="form-check-label" for="radio-1"><?php echo esc_html( $lorem_short ); ?>.</label>
318+
<label class="form-check-label" for="radio-1"><?php echo esc_html( $bs_lorem_short ); ?>.</label>
263319
</div>
264320
<div class="form-check">
265321
<input class="form-check-input" type="radio" name="flexRadioDefault" id="radio-2">
266-
<label class="form-check-label" for="radio-2"><?php echo esc_html( $lorem_short ); ?>.</label>
322+
<label class="form-check-label" for="radio-2"><?php echo esc_html( $bs_lorem_short ); ?>.</label>
267323
</div>
268324
<div class="form-check">
269325
<input class="form-check-input" type="radio" name="flexRadioDefault" id="radio-3">
270-
<label class="form-check-label" for="radio-3"><?php echo esc_html( $lorem_short ); ?>.</label>
326+
<label class="form-check-label" for="radio-3"><?php echo esc_html( $bs_lorem_short ); ?>.</label>
271327
</div>
272328
</div>
273329

274330
<div class="mb-4">
275331
<div class="form-check form-switch">
276332
<input type="checkbox" class="form-check-input" id="switch-1" checked>
277-
<label class="form-check-label" for="switch-1"><?php echo esc_html( $lorem_short ); ?>.</label>
333+
<label class="form-check-label" for="switch-1"><?php echo esc_html( $bs_lorem_short ); ?>.</label>
278334
</div>
279335
<div class="form-check form-switch">
280336
<input type="checkbox" class="form-check-input" id="switch-2">
281-
<label class="form-check-label" for="switch-2"><?php echo esc_html( $lorem_short ); ?>.</label>
337+
<label class="form-check-label" for="switch-2"><?php echo esc_html( $bs_lorem_short ); ?>.</label>
282338
</div>
283339
<div class="form-check form-switch">
284340
<input type="checkbox" class="form-check-input" id="switch-3">
285-
<label class="form-check-label" for="switch-3"><?php echo esc_html( $lorem_short ); ?>.</label>
341+
<label class="form-check-label" for="switch-3"><?php echo esc_html( $bs_lorem_short ); ?>.</label>
286342
</div>
287343
</div>
288344

0 commit comments

Comments
 (0)