Merge e6d2435 into 2d9909a

README.md

@@ -64,47 +64,6 @@ To build assets for development purposes, with HMR (hot reloading) enabled, run:
 
 Please, follow the [guidelines](https://elao.github.io/elao_/blog/styleguide/example/).
 
-## Assets
+## Going further
 
-Reference images & other assets in Twig templates using `asset()`:
-
-```twig
-{{ asset(article.thumbnail) }}
-```
-
-### Resize images
-
-You can resize an image using a preset defined in `config/packages/glide.yaml`:
-
-```twig
-{{ asset(article.thumbnail|glide_image_preset('article_thumbnail')) }}
-```
-
-or with arbitrary options:
-
-```twig
-{{ asset(article.thumbnail|glide_image_resize({
-    w: 80,
-    h: 60,
-})) }}
-```
-
-See [Glide's documentation](https://glide.thephpleague.com/1.0/api/quick-reference/) for available options.
-
-In order to automatically generate images for retina screens (dpr x2), you can either:
-
-- use the `backgroundImageSrcset` macro in Twig for background images:
-
-    ```twig
-    {% import "macros.html.twig" as macros %}
-    
-    <div class="article-banner__cover" style="{{ macros.backgroundImageSrcset(article.thumbnail, 'article_banner') }}"></div>
-    ```
-
-- or the `imageSrcset` macro in Twig for `<img />` tags:
-
-    ```twig
-    {% import "macros.html.twig" as macros %}
-  
-    <img {{ macros.imageSrcset(article.thumbnail, 'article_banner') }} />
-    ```
+- [Images & other assets](./res/docs/assets.md)

config/packages/glide.yaml

@@ -1,10 +1,13 @@
 glide:
     base_url: /image/resize
-    source: '%kernel.project_dir%/public'
+    source: '%kernel.project_dir%'
     cache: '%kernel.project_dir%/public/resized'
     pre_generate: '%env(bool:GLIDE_PRE_GENERATE_CACHE)%'
     cache_with_file_extensions: true
     group_cache_in_folders: true
+    skipped_types:
+        - 'image/gif'
+        - 'image/svg+xml'
 
     # https://glide.thephpleague.com/1.0/api/quick-reference/
     presets:
@@ -49,6 +52,13 @@ glide:
             fit: max
             dpr: 1
 
+        # Base format for images inside a glossary article content.
+        # It's declined with dpr 2x automatically for retina screens.
+        glossary_content:
+            w: 1040
+            fit: max
+            dpr: 1
+
         tribe_banner:
             w: 1280
             h: 600

config/services.yaml

@@ -61,6 +61,12 @@ services:
             $type: App\Model\Article
             $preset: article_content
 
+    resize_images_content_processor.glossary.term:
+        class: App\Stenope\Processor\ResizeImagesContentProcessor
+        arguments:
+            $type: App\Model\Glossary\Term
+            $preset: glossary_content
+
     App\Stenope\Provider\SampleRemovalProvider.Article:
         class: App\Stenope\Provider\SampleRemovalProvider
         decorates: stenope.provider.files.App\Model\Article

content/blog/dev/a-nice-way-of-handing-form-label-translation.md

@@ -8,7 +8,7 @@ lang:               "en"
 
 description:        "A nice way of handling form label translation"
 
-thumbnail:          "images/posts/thumbnails/cool_cat.jpg"
+thumbnail:          "content/images/blog/thumbnails/cool_cat.jpg"
 tags:               ["Symfony", "Form", "Theming", "Translation"]
 categories:         ["Dev", "Form", "Symfony"]
 authors:            ["tjarrand"]

content/blog/dev/ameliorez-pertinence-resultat-elastic-search-score.md

@@ -6,8 +6,8 @@ lastModified:       ~
 
 description:    "Améliorez la pertinence de vos résultats ElasticSearch grâce au score."
 
-thumbnail:      "images/posts/thumbnails/elasticsearch.png"
-banner:     "images/posts/headers/elasticsearch.jpg"
+thumbnail:      "content/images/blog/thumbnails/elasticsearch.png"
+banner:     "content/images/blog/headers/elasticsearch.jpg"
 tags:           ["Moteur de recherche", "ElasticSearch", "Pertinence", "Elastica"]
 categories:     ["dev"]
 
@@ -466,7 +466,7 @@ Il existe 3 fonctions de décroissances, [linéaire](https://fr.wikipedia.org/wi
 
 La fonction linéaire est une droite, la décroissance est proportionelle à la distance. Avec la fonction exponentielle, la décroissance est très forte au début et diminue rapidement avec la distance jusqu'à tendre vers zero. Avec la fonction gaussienne, la décroissance est également très forte au début mais diminue moins rapidement.
 
-![Decay functions](images/posts/2017/es-decay-graph.png)
+![Decay functions](content/images/blog/2017/es-decay-graph.png)
 
 Les fonctions de décroissance peuvent être appliquées sur des valeurs numériques, des dates (`offset` et `scale` sont alors exprimés en durée : 5h ou 1d par exemple) ou des géopoints (`offset` et `scale` sont alors exprimés en distance : 100m ou 5km par exemple).
 

content/blog/dev/api-design-elao-team-interview.md

@@ -7,8 +7,8 @@ lastModified:       ~
 description:        "Interview croisée des développeurs d'Élao à propos de leurs diverses expériences en conception et développement d'API"
 tableOfContent:     2
 
-thumbnail:          "images/posts/thumbnails/api-interview-micro-phone.png"
-banner:             "images/posts/headers/api-interview-micro-phone.png"
+thumbnail:          "content/images/blog/thumbnails/api-interview-micro-phone.png"
+banner:             "content/images/blog/headers/api-interview-micro-phone.png"
 tags:               ["API", "Conception", "REST", "API Design"]
 categories:         ["Dev"]
 
@@ -46,9 +46,7 @@ __Yves__ : J'utilise souvent la méthode `PUT` dans le cadre d'une relation 0:1
 
 __Maxime S.__ : J'essaie au maximum de respecter la sémantique des méthodes HTTP telles qu'elles sont définies dans la spécification. Comme je l'ai dit tout à l'heure, je m'autorise à utiliser des verbes dans mes URI avec la méthode `PATCH` pour coller au mieux à la logique métier (Exemple d'URI pour activer/désactiver un utilisateur : `PATCH /users/{id}/lock|unlock`).
 
-<p class="text-center">
-    {{< figure class="text-center" src="images/posts/2017/api-interview/postman.png" title="Credits: https://www.getpostman.com/" alt="Postman">}}
-</p>
+![](content/images/blog/2017/api-interview/postman.png)
 
 ## Formats de sortie : privilégiez-vous le tout JSON ?
 
@@ -78,9 +76,7 @@ __Nicolas__ : Pour ma part, lors des développements d'API GraphQL, j'utilise [G
 
 __Maxime S.__ : Aujourd'hui j'utilise principalement le bundle [NelmioApiDocBundle](https://github.com/nelmio/NelmioApiDocBundle) pour générer la documentation de mes API. Il est parfois utile de générer la documentation à la main lorsque l'on souhaite fournir une documentation d'API plus complète. La documentation générée est généralement suffisante pour des API consommées par des développeurs, mais me semble trop sommaire pour des API publiques. Je profite également de cette question pour mentionner la librairie PHP [elao/api-resources-metadata](https://packagist.org/packages/elao/api-resources-metadata) que nous avons initiée. Elle est encore embryonnaire, mais pour l'heure, elle s'interface avec le bundle de Nelmio pour documenter des ressources PHP à partir d'un schéma YML ou des _doc blocks_. Elle sera sans doute enrichie, pour s'interfacer avec d'autres librairies et ajouter d'autres fonctionnalités, telles que la génération de _normalizers_ ou de contraintes de validation basiques (`NotNull`, `Type`, ...) par exemple.
 
-<p class="text-center">
-    {{< figure class="text-center" src="images/posts/2017/api-interview/swagger.png" title="Credits: https://swagger.io/" alt="Swagger">}}
-</p>
+![](content/images/blog/2017/api-interview/swagger.png)
 
 ## Comment tester son API ?
 
@@ -124,9 +120,7 @@ __Maxime S.__ : Hormis quelques articles de François Zaninotto sur le sujet, je
 
 __Nicolas__ : Définitivement testé et adopté!
 
-<p class="text-center">
-    {{< figure class="text-center" src="images/posts/2017/api-interview/graphql-logo.png" title="Credits: https://commons.wikimedia.org" alt="Logo GraphQL">}}
-</p>
+![](content/images/blog/2017/api-interview/graphql-logo.png)
 
 ## Un ouvrage ou un site de référence à conseiller ?
 

content/blog/dev/apollo-graphql-cache.md

@@ -6,8 +6,8 @@ lastModified:       ~
 
 description:        "Découverte du fonctionnement du cache du client GraphQL Apollo."
 
-thumbnail:          "images/posts/thumbnails/graphql-apollo.jpg"
-banner:             "images/posts/headers/graphql-apollo.jpg"
+thumbnail:          "content/images/blog/thumbnails/graphql-apollo.jpg"
+banner:             "content/images/blog/headers/graphql-apollo.jpg"
 tags:               ["GraphQL","Cache","Apollo","Javascript","API"]
 categories:         ["Dev", "Javascript"]