bachir
/
materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

tried to lazy load home images, but a better solution is to have to home version one html the lightest possible for first laod, and one rich for vuejs display

This commit is contained in:
Bachir Soussi Chiadmi 2021-04-07 11:50:47 +02:00
parent 47c5d69894
commit 6b263375f6
5 changed files with 92 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/themes/custom/materiotheme/materiotheme.theme
View File

@ -186,6 +186,14 @@ function materiotheme_theme_suggestions_field_alter(&$suggestions, &$vars){
}
}
/**
* Implements hook_theme_suggestions_HOOK_alter().
*/
function materiotheme_theme_suggestions_image_alter(array &$suggestions, array $variables){
// $image = $variables['attributes']['class'][0];
$suggestions[] = 'image__'.$variables['style_name'];
}
/**
* Prepares variables for product templates.
*
@ -224,3 +232,13 @@ function materiotheme_preprocess_printable(array &$variables) {
$variables['site_name'] = $site_config->get('name');
$variables['slogan'] = $site_config->get('slogan');
}
// TODO: instead of lazy load home images, make a html light home (without images),
// replaced then by rich home vuejs
// function materiotheme_preprocess_image(array &$variables) {
// if ($variables['style_name'] === 'card_small_home') {
// $variables['attributes']['data-src'] = $variables['attributes']['src'];
// $variables['attributes']['src'] = '/themes/custom/materiotheme/assets/img/blank.gif';
// }
// }

20
web/themes/custom/materiotheme/templates/field/image--card-small-home.html.twig Normal file
View File

@ -0,0 +1,20 @@
{#
/**
* @file
* Theme override of an image.
*
* Available variables:
* - attributes: HTML attributes for the img tag.
* - style_name: (optional) The name of the image style applied.
*
* @see template_preprocess_image()
*/
#}
{%
set classes = [
style_name ? 'image-style-' ~ style_name|clean_class,
]
%}
{# {% set attributes['data-src'] = attributes['src'] %}
{% set attributes['src'] = '#' %} #}
<img{{ attributes.addClass(classes) }} />

18
web/themes/custom/materiotheme/templates/field/image-formatter.html.twig Normal file
View File

@ -0,0 +1,18 @@
{#
/**
* @file
* Theme override to display a formatted image field.
*
* Available variables:
* - image: A collection of image data.
* - image_style: An optional image style.
* - url: An optional URL the image can be linked to.
*
* @see template_preprocess_image_formatter()
*/
#}
{% if url %}
{{ link(image, url) }}
{% else %}
{{ image }}
{% endif %}

18
web/themes/custom/materiotheme/templates/field/image-style.html.twig Normal file
View File

@ -0,0 +1,18 @@
{#
/**
* @file
* Theme override for an image using a specific image style.
*
* Available variables:
* - attributes: HTML attributes for the image, including the following:
* - src: Full URL or relative path to the image file.
* - class: One or more classes to be applied to the image.
* - width: The width of the image (if known).
* - height: The height of the image (if known).
* - title: The title of the image.
* - alt: The alternative text for the image.
*
* @see template_preprocess_image_style()
*/
#}
{{ image }}

18
web/themes/custom/materiotheme/templates/field/image.html.twig Normal file
View File

@ -0,0 +1,18 @@
{#
/**
* @file
* Theme override of an image.
*
* Available variables:
* - attributes: HTML attributes for the img tag.
* - style_name: (optional) The name of the image style applied.
*
* @see template_preprocess_image()
*/
#}
{%
set classes = [
style_name ? 'image-style-' ~ style_name|clean_class,
]
%}
<img{{ attributes.addClass(classes) }} />