Skip to content

Commit 1b03528

Browse files
committed
Merge branch 'develop'
2 parents e1e29d3 + ed00827 commit 1b03528

File tree

11 files changed

+226
-47
lines changed

11 files changed

+226
-47
lines changed

Drush/EntityScaffolder/d7_1/ESBreakPointGroup.php

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,7 @@ public function scaffold() {
136136
public function getConfig(...$params) {
137137
list($file) = $params;
138138
$config_data = parent::getConfig($file);
139+
$default_multiplier = !empty($config_data['multiplier']) ? $config_data['multiplier'] : ['1x' => '1x'];
139140
if ($config_data) {
140141
if (!empty($config_data['breakpoints'])) {
141142
foreach ($config_data['breakpoints'] as $ndx => &$config) {
@@ -144,14 +145,14 @@ public function getConfig(...$params) {
144145
$config['group_name'] = $config_data['machine_name'];
145146
$config['weight'] = $ndx;
146147
if (empty($config['multiplier'])) {
147-
$config['multiplier'] = ['1x' => '1x'];
148+
$multiplier = $default_multiplier;
148149
}
149150
else {
150151
$multiplier = $config['multiplier'];
151-
$config['multiplier'] = [];
152-
foreach ($multiplier as $m) {
153-
$config['multiplier'][$m] = $m;
154-
}
152+
}
153+
$config['multiplier'] = [];
154+
foreach ($multiplier as $m) {
155+
$config['multiplier'][$m] = $m;
155156
}
156157
}
157158
}

Drush/EntityScaffolder/d7_1/ESConfig.php

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@ public function generateCode($info) {
4141
$key = 0;
4242
$template = '/config/es_helper.potx_exportables.inc';
4343
$code = $this->scaffolder->render($template, $info['translation']);
44-
Logger::debug($info['translation']['po_dir'], '$info');
4544
$this->scaffolder->setCode($module, $filename, $block, $key, $code);
4645
}
4746
}
Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<?php
2+
3+
namespace Drush\EntityScaffolder\d7_1;
4+
5+
use Drush\EntityScaffolder\Utils;
6+
use Drush\EntityScaffolder\Logger;
7+
8+
class ESResponsiveImages extends ESBase implements ESBaseInterface {
9+
10+
public function help() {
11+
Logger::log('[responsive_images] : Responsive Images', 'status');
12+
Logger::log('Following are the values supported in configuration', 'status');
13+
$headers = array('Property', 'Variable type', 'Description');
14+
$data = [];
15+
$data[] = ['name', 'string' ,'The label of the breakpoint group, which is displayed to the admins.'];
16+
$data[] = ['machine_name', 'machine name (string)' , 'Internal machine name.'];
17+
$data[] = ['mapping', 'array' ,'Array of mapping definitions that is attached to the Responsive Images'];
18+
$data[] = ['breakpoint_group', 'machine name (string)' , 'Breakpoint group that is associated with the image group.'];
19+
Logger::table($headers, $data, 'status');
20+
}
21+
22+
public function generateCode($info) {
23+
$image_style_plugin = new ESImageStyle($this->scaffolder);
24+
$picture_plugin = new ESPicture($this->scaffolder);
25+
26+
if (!empty($info['mapping'])) {
27+
$multipliers = !empty($info['multipliers']) ? $info['multipliers'] : [1];
28+
// Scaffold image styles.
29+
foreach($info['mapping'] as $key => $map) {
30+
foreach ($multipliers as $multiplier) {
31+
$config = $this->generateEsImageStyleData($info, $key, $map, $multiplier);
32+
$image_style_plugin->generateCode($config);
33+
}
34+
}
35+
36+
// @TODO Scaffold picture mapping.
37+
$config = $this->generateEsPictureData($info, $key, $map);
38+
$picture_plugin->generateCode($config);
39+
}
40+
41+
}
42+
43+
/**
44+
* Loads scaffold source files.
45+
*/
46+
public function loadScaffoldSourceConfigurations() {
47+
return Utils::getConfigFiles($this->scaffolder->getConfigDir() . '/responsive_images');
48+
}
49+
50+
/**
51+
* The main scaffolding action.
52+
*/
53+
public function scaffold() {
54+
$config_files = $this->loadScaffoldSourceConfigurations();
55+
if ($config_files) {
56+
foreach ($config_files as $file) {
57+
$config = $this->getConfig($file);
58+
$this->generateCode($config);
59+
}
60+
}
61+
}
62+
63+
/**
64+
* Helper function to load config and defaults.
65+
*/
66+
public function getConfig(...$params) {
67+
list($file) = $params;
68+
$config_data = parent::getConfig($file);
69+
return $this->processConfigData($config_data);
70+
}
71+
72+
/**
73+
* Generate image style data as required by ESImageStyle Scaffolder.
74+
*/
75+
private function generateEsImageStyleData($info, $key, $data, $multiplier) {
76+
$machine_name = $this->generateImageStyleName($info, $key, $multiplier);
77+
$effect = 'image_scale';
78+
if (!empty($data['width']) && !empty($data['height'])) {
79+
$effect = 'focal_point_scale_and_crop';
80+
}
81+
$scale = trim($multiplier, 'x');
82+
if (!empty($data['width'])) {
83+
$data['width'] = round($data['width'] * $scale);
84+
}
85+
86+
if (!empty($data['height'])) {
87+
$data['height'] = round($data['height'] * $scale);
88+
}
89+
90+
$output = [
91+
'machine_name' => $machine_name,
92+
'name' => $machine_name,
93+
'effects' => [
94+
[
95+
'name' => $effect,
96+
'data' => $data,
97+
'index' => 1,
98+
'weight' => 1,
99+
],
100+
],
101+
];
102+
return $output;
103+
}
104+
105+
/**
106+
* Generate image style data as required by ESImageStyle Scaffolder.
107+
*/
108+
private function generateEsPictureData($info) {
109+
$machine_name = $info['machine_name'];
110+
$output = [
111+
'machine_name' => $machine_name,
112+
'name' => $machine_name,
113+
'breakpoint_group' => $info['breakpoint_group'],
114+
'mapping' => [],
115+
];
116+
foreach($info['mapping'] as $key => $value) {
117+
$map_key = 'breakpoints.theme.' . $info['breakpoint_group'] . '.' . $key;
118+
// @TODO get list of multipliers 1x, 2x, 3x, etc.
119+
$multipliers = $info['multipliers'];
120+
foreach($multipliers as $multiplier) {
121+
$output['mapping'][$map_key][$multiplier] = $this->generateImageStyleName($info, $key, $multiplier);
122+
}
123+
}
124+
return $output;
125+
}
126+
127+
/**
128+
* Generate image style name from various parameters.
129+
*/
130+
private function generateImageStyleName($info, $key, $multiplier) {
131+
$machine_name = $info['machine_name'];
132+
return $machine_name . '__' . $key . '__' . $multiplier;
133+
}
134+
}

Drush/EntityScaffolder/d7_1/Scaffolder.php

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
class Scaffolder extends ScaffolderBase {
1111
// @see http://php.net/version_compare.
12-
const VERSION = '7.2.16';
12+
const VERSION = '7.2.18';
1313

1414
const DEFAULT_TEMPLATE_DIR = __DIR__ . '/templates';
1515
const TEMPLATE_NAMESPACE = 'd7_1';
@@ -55,6 +55,7 @@ public function __construct() {
5555
$this->plugins['paragraphs'] = new ESEntityParagraphs($this);
5656
$this->plugins['list_predefined_options'] = new ESListPredefinedOptions($this);
5757
$this->plugins['config'] = new ESConfig($this);
58+
$this->plugins['responsive_images'] = new ESResponsiveImages($this);
5859
}
5960

6061
/**
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
dependencies :
2+
- link
3+
variables :
4+
validate_url :
5+
type : boolean
6+
placeholder : 1
7+
required : false
8+
default : 1

Drush/EntityScaffolder/d7_1/templates/field/link/instance/feature.content.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
'title_value' => '',
4646
'url' => 0,
4747
'user_register_form' => FALSE,
48-
'validate_url' => 1,
48+
'validate_url' => {{ validate_url }},
4949
),
5050
'widget' => array(
5151
'active' => 0,

docs/configurations/breakpoint_groups.md

Lines changed: 21 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -6,48 +6,30 @@ Breakpoint groups should resemble the frontend breakpoint configuration.
66

77
Breakpoint groups are defined in one yaml file which is stored in the `.tools/es/breakpoint_groups`-folder.
88

9-
A grou consists of a list of breakpoints which store a machine-name a media-query and a list of multipliers (for retina-displays)
9+
A group consists of a list of breakpoints which store a machine-name a media-query and a list of multipliers (eg 2x for retina-displays)
1010

11-
Here's an example:
11+
12+
### Example
13+
14+
_.tools/es/breakpoints/global.yaml_
1215

1316
```yaml
14-
name: Frontend breakpoints
15-
machine_name: frontend
17+
name: Global
18+
machine_name: global
19+
multiplier:
20+
- 1x
21+
- 2x
1622
breakpoints:
17-
- machine_name: xl-viewport
18-
media: '(min-width: 1600px)'
19-
multiplier:
20-
- 1x
21-
- 2x
22-
23-
- machine_name: lg-viewport
24-
media: '(min-width: 1280px)'
25-
multiplier:
26-
- 1x
27-
- 2x
28-
29-
- machine_name: md-viewport
30-
media: '(min-width: 1024px) and (max-width: 1279px)'
31-
multiplier:
32-
- 1x
33-
- 2x
34-
35-
- machine_name: md-lg-viewport
36-
media: '(min-width: 1024px)'
37-
multiplier:
38-
- 1x
39-
- 2x
40-
41-
- machine_name: sm-md-viewport
42-
media: '(max-width: 1279px)'
43-
multiplier:
44-
- 1x
45-
- 2x
46-
47-
- machine_name: sm-viewport
48-
media: '(max-width: 1023px)'
49-
multiplier:
50-
- 1x
51-
- 2x
23+
# Mobile (portrait and landscape)
24+
- machine_name: mobile
25+
media: '@media only screen and (min-device-width : 320px) and (max-device-width : 480px)'
26+
27+
# Desktop and laptops
28+
- machine_name: desktop
29+
media: '@media only screen and (min-width : 1224px)'
30+
31+
# Large screens
32+
- machine_name: large
33+
media: '@media only screen and (min-width : 1824px)'
5234
```
5335

docs/configurations/image_styles.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
# Image styles
22

3+
!!! warning
4+
**DEPRECATED**
5+
6+
Most of the time you would need the [Responsive Images](/configurations/responsive_images/) solution. Use this only if you want to create standalone image styles in rare cases.
7+
38
The folder `image_style` contains a set of yaml-files defining one or more image styles. Each yaml-file contains a set of image styles.
49

510
Here's an example:

docs/configurations/pictures.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
# Pictures
22

3+
!!! warning
4+
**DEPRECATED**
5+
6+
Most of the time you would need the [Responsive Images](/configurations/responsive_images/) solution. Use this only if you want to create standalone image styles in rare cases.
7+
38
The folder `picture` contains a set of yaml-files defining one or more picture-configurations. A picture has a machine name and a mapping of breakpoints, multipliers to image-styles.
49

510
The picture-module will render a `<picture>`-element applying the configuration.
Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# Responsive Images
2+
3+
!!! note
4+
Responsivie image solution depends on **[Breakpoint Groups](/configurations/breakpoint_groups/)** being defined first.
5+
6+
### Define Breakpoint Groups first
7+
8+
Lets say we have set of breakpoints `mobile`, `desktop` and `large` as defined in [the example for Breakpoints Groups](/configurations/breakpoint_groups/#example)
9+
10+
### Responsive Images definitions
11+
12+
Responsive image definitions lies inside responsive_images folder. Please check the comments on details about what each parameters does.
13+
14+
#### Example
15+
16+
_.tools/es/responsive_images/popup.yaml_
17+
18+
```yaml
19+
machine_name: popup
20+
# Breakpoint group's machine name we have to use.
21+
breakpoint_group: global
22+
# Multipliers present in breakpoint group.
23+
# @TODO in future, this would be read from breakpoint group defnitions.
24+
multipliers:
25+
- 1x
26+
- 2x
27+
# Define width and height of the images that we need for each breakpoint.
28+
mapping:
29+
# The key would be breakpoint machine_name
30+
mobile:
31+
# Define dimentions of the images for the breakpoint.
32+
width: 100
33+
height: 200
34+
desktop:
35+
# The image would be resized to the dimention provided using focal_point_scale_and_crop effect.
36+
width: 981
37+
height: 552
38+
large:
39+
# If any of the dimention is left empty, then image will be scaled to that dimension.
40+
width: 1080
41+
```
42+
43+

0 commit comments

Comments
 (0)