Reduce the size of example thumbnails (#131)

D8H · web-flow · commit c871b9826145 · 2023-11-03T10:17:58.000+01:00
diff --git a/docs/gdevelop5/all-features/gamepad/index.md b/docs/gdevelop5/all-features/gamepad/index.md
@@ -38,7 +38,7 @@ The "Platformer gamepad mapper" behavior can be added to the character to make t
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://platformer){ .md-button .md-button--primary }
 
-[![](/gdevelop5/behaviors/platformer/platformer-example.png)](https://editor.gdevelop.io/?project=example://platformer)
+[![](/gdevelop5/behaviors/platformer/platformer-example.png){ width="320" }](https://editor.gdevelop.io/?project=example://platformer)
 
 ### Move a character with custom movement
 
diff --git a/docs/gdevelop5/behaviors/bounce/index.md b/docs/gdevelop5/behaviors/bounce/index.md
@@ -20,7 +20,7 @@ GDevelop makes it easy to simulate real bouncing in a game. _Bounce behavior_ ca
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://breakout){ .md-button .md-button--primary }
 
-[![](/gdevelop5/tutorials/breakout-screenshot.png)](https://editor.gdevelop.io/?project=example://breakout)
+[![](/gdevelop5/tutorials/breakout-screenshot.png){ width="320" }](https://editor.gdevelop.io/?project=example://breakout)
 
 
 ## What's the logic behind the behavior?
diff --git a/docs/gdevelop5/behaviors/destroyoutside/index.md b/docs/gdevelop5/behaviors/destroyoutside/index.md
@@ -30,7 +30,7 @@ Once you have selected this behavior from the list, it is going to eliminate the
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://shoot-bullets){ .md-button .md-button--primary }
 
-[![](Examples1BulletOutsideScreen.png)](https://editor.gdevelop.io/?project=example://shoot-bullets)
+[![](Examples1BulletOutsideScreen.png){ width="320" }](https://editor.gdevelop.io/?project=example://shoot-bullets)
 
 ## Reference
 
diff --git a/docs/gdevelop5/behaviors/draggable/index.md b/docs/gdevelop5/behaviors/draggable/index.md
@@ -42,31 +42,31 @@ Using events, you can also check if an object is being dragged:
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://snap-object-to-grid){ .md-button .md-button--primary }
 
-[![](snaptogrid.png)](https://editor.gdevelop.io/?project=example://snap-object-to-grid)
+[![](snaptogrid.png){ width="320" }](https://editor.gdevelop.io/?project=example://snap-object-to-grid)
 
 
 
 **Shoot Bullet in Parabola Pattern** (A parabola is a plane curve which is mirror-symmetrical and is approximately U-shaped. Basically, an object that shoots toward an object in a curved trajectory.)
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://shoot-bullet-in-parabola){ .md-button .md-button--primary }
 
-[![](shootbulletparabolapattern.png)](https://editor.gdevelop.io/?project=example://shoot-bullet-in-parabola)
+[![](shootbulletparabolapattern.png){ width="320" }](https://editor.gdevelop.io/?project=example://shoot-bullet-in-parabola)
 
 
 
 **Save and Load**
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://save-load){ .md-button .md-button--primary }
 
-[![](/gdevelop5/behaviors/saveandloadexample.png)](https://editor.gdevelop.io/?project=example://save-load)
+[![](/gdevelop5/behaviors/saveandloadexample.png){ width="320" }](https://editor.gdevelop.io/?project=example://save-load)
 
 
 
 **Path Finding Basics**
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://pathfinding-basics){ .md-button .md-button--primary }
 
-[![](/gdevelop5/behaviors/pathfinding/pathfindingbasics.png)](https://editor.gdevelop.io/?project=example://pathfinding-basics)
+[![](/gdevelop5/behaviors/pathfinding/pathfindingbasics.png){ width="320" }](https://editor.gdevelop.io/?project=example://pathfinding-basics)
 
 ## Reference
 
diff --git a/docs/gdevelop5/behaviors/pathfinding/index.md b/docs/gdevelop5/behaviors/pathfinding/index.md
@@ -64,15 +64,15 @@ If you want to change how the object moves during the game, these properties can
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://pathfinding){ .md-button .md-button--primary }
 
-[![](pathfindinggeneral.png)](https://editor.gdevelop.io/?project=example://pathfinding)
+[![](pathfindinggeneral.png){ width="320" }](https://editor.gdevelop.io/?project=example://pathfinding)
 
 
 
 **Path Finding Basics**
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://pathfinding-basics){ .md-button .md-button--primary }
 
-[![](pathfindingbasics.png)](https://editor.gdevelop.io/?project=example://pathfinding-basics)
+[![](pathfindingbasics.png){ width="320" }](https://editor.gdevelop.io/?project=example://pathfinding-basics)
 
 ## Reference
 
diff --git a/docs/gdevelop5/behaviors/physics/index.md b/docs/gdevelop5/behaviors/physics/index.md
@@ -71,23 +71,23 @@ _perfectly elastic collision_.
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://physics){ .md-button .md-button--primary }
 
-[![](hingeleverdemo.png)](https://editor.gdevelop.io/?project=example://physics)
+[![](hingeleverdemo.png){ width="320" }](https://editor.gdevelop.io/?project=example://physics)
 
 
 
 **Car Physics**
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://car-physics){ .md-button .md-button--primary }
 
-[![](carphysics.png)](https://editor.gdevelop.io/?project=example://car-physics)
+[![](carphysics.png){ width="320" }](https://editor.gdevelop.io/?project=example://car-physics)
 
 
 
 **Object Gravity**
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://object-gravity){ .md-button .md-button--primary }
 
-[![](objectgravity.png)](https://editor.gdevelop.io/?project=example://object-gravity)
+[![](objectgravity.png){ width="320" }](https://editor.gdevelop.io/?project=example://object-gravity)
 
 ## Reference
 
diff --git a/docs/gdevelop5/behaviors/platformer/index.md b/docs/gdevelop5/behaviors/platformer/index.md
@@ -118,7 +118,7 @@ It's not easy to know how these values change the jump trajectory. The best is t
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://platformer-jump-evaluator){ .md-button .md-button--primary }
 
-[![](platformer-jump-evaluator.png)](https://editor.gdevelop.io/?project=example://platformer-jump-evaluator)
+[![](platformer-jump-evaluator.png){ width="320" }](https://editor.gdevelop.io/?project=example://platformer-jump-evaluator)
 
 ####  Make characters wall jump
 
@@ -140,7 +140,7 @@ The [advanced platformer movements](/gdevelop5/extensions/advanced-jump/referenc
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://platformer){ .md-button .md-button--primary }
 
-[![](platformer-example.png)](https://editor.gdevelop.io/?project=example://platformer)
+[![](platformer-example.png){ width="320" }](https://editor.gdevelop.io/?project=example://platformer)
 
 
 
@@ -149,7 +149,7 @@ The [advanced platformer movements](/gdevelop5/extensions/advanced-jump/referenc
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://parallax-scrolling){ .md-button .md-button--primary }
 
-[![](parallaxscrollingbehavior.png)](https://editor.gdevelop.io/?project=example://parallax-scrolling)
+[![](parallaxscrollingbehavior.png){ width="320" }](https://editor.gdevelop.io/?project=example://parallax-scrolling)
 
 ## Reference
 
diff --git a/docs/gdevelop5/behaviors/topdown/index.md b/docs/gdevelop5/behaviors/topdown/index.md
@@ -79,15 +79,15 @@ All theses values can also be changed at any time during the game using [events]
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://space-shooter){ .md-button .md-button--primary }
 
-[![](spaceshooter.png)](https://editor.gdevelop.io/?project=example://space-shooter)
+[![](spaceshooter.png){ width="320" }](https://editor.gdevelop.io/?project=example://space-shooter)
 
 
 
 **Isometric Game** (creates an illusion of 3D graphics within a 2D graphics game)
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://isometric-game){ .md-button .md-button--primary }
 
-[![](isometricgame.png)](https://editor.gdevelop.io/?project=example://isometric-game)
+[![](isometricgame.png){ width="320" }](https://editor.gdevelop.io/?project=example://isometric-game)
 
 ## Reference
 
diff --git a/docs/gdevelop5/events/js-code/index.md b/docs/gdevelop5/events/js-code/index.md
@@ -36,13 +36,13 @@ This array is exactly like what an action or a condition would use. For example,
 
 **Text to speech**
 
-[![](javascripttexttospeechexample.png)](https://editor.gdevelop.io/?project=example://text-to-speech)
+[![](javascripttexttospeechexample.png){ width="320" }](https://editor.gdevelop.io/?project=example://text-to-speech)
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://text-to-speech){ .md-button .md-button--primary }
 
 **JavaScript blocks in platformer**
 
-[![](platformerjavascriptblocksexample.png)](https://editor.gdevelop.io/?project=example://javascript-blocks-in-platformer)
+[![](platformerjavascriptblocksexample.png){ width="320" }](https://editor.gdevelop.io/?project=example://javascript-blocks-in-platformer)
 
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://javascript-blocks-in-platformer){ .md-button .md-button--primary }
diff --git a/docs/gdevelop5/events/repeat/index.md b/docs/gdevelop5/events/repeat/index.md
@@ -21,12 +21,12 @@ Alternatively, click on the *"Plus" icon* in the toolbar or on *"Add..."* at the
 
 **Diagonals**
 
-[![](diagonals.png)](https://editor.gdevelop.io/?project=example://find-diagonals)
+[![](diagonals.png){ width="320" }](https://editor.gdevelop.io/?project=example://find-diagonals)
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://find-diagonals){ .md-button .md-button--primary }
 
 **Laser**
 
-[![](lasernew.png)](https://editor.gdevelop.io/?project=example://zombie-laser)
+[![](lasernew.png){ width="320" }](https://editor.gdevelop.io/?project=example://zombie-laser)
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://zombie-laser){ .md-button .md-button--primary }
diff --git a/docs/gdevelop5/events/while/index.md b/docs/gdevelop5/events/while/index.md
@@ -21,10 +21,10 @@ Alternatively, click on the *"Plus" icon* in the toolbar or on *"Add..."* at the
         **See it in action!** 🎮
     Open these examples online.
 
-[![](spaceshooternew.png)](https://editor.gdevelop.io/?project=example://asteroids)
+[![](spaceshooternew.png){ width="320" }](https://editor.gdevelop.io/?project=example://asteroids)
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://asteroids){ .md-button .md-button--primary }
 
-[![](/gdevelop5/behaviors/pathfinding/pathfindinggeneral.png)](https://editor.gdevelop.io/?project=example://pathfinding)
+[![](/gdevelop5/behaviors/pathfinding/pathfindinggeneral.png){ width="320" }](https://editor.gdevelop.io/?project=example://pathfinding)
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://pathfinding){ .md-button .md-button--primary }
diff --git a/docs/gdevelop5/extensions/boids-movement/details.md b/docs/gdevelop5/extensions/boids-movement/details.md
@@ -13,7 +13,7 @@ Simulates swarms or flocks movement following the separation, alignment, cohesio
 
 [Open in GDevelop](https://editor.gdevelop.io/?project=example://fish-school){ .md-button .md-button--primary }
 
-[![](fish-school-example.png){ width="300" }](https://editor.gdevelop.io/?project=example://fish-school)
+[![](fish-school-example.png){ width="320" }](https://editor.gdevelop.io/?project=example://fish-school)
 
 !!! tip
 
diff --git a/docs/gdevelop5/extensions/curved-movement/details.md b/docs/gdevelop5/extensions/curved-movement/details.md
@@ -22,7 +22,7 @@ A collection of small examples show how to use this extension.
 
 [Open in GDevelop](https://editor.gdevelop.io/?project=example://curved-movement){ .md-button .md-button--primary }
 
-[![](train-example.png){ width="300" }](https://editor.gdevelop.io/?project=example://curved-movement)
+[![](train-example.png){ width="320" }](https://editor.gdevelop.io/?project=example://curved-movement)
 
 
 ## Create a path with Inkscape
diff --git a/docs/gdevelop5/extensions/fire-bullet/details.md b/docs/gdevelop5/extensions/fire-bullet/details.md
@@ -33,7 +33,7 @@ Bullets can be shot in a direction given by an [angle](/gdevelop5/tutorials/basi
 
 [Open in GDevelop](https://editor.gdevelop.io/?project=example://space-shooter){ .md-button .md-button--primary }
 
-[![](space-shooter-example.png){ width="300" }](https://editor.gdevelop.io/?project=example://space-shooter)
+[![](space-shooter-example.png){ width="320" }](https://editor.gdevelop.io/?project=example://space-shooter)
 
 
 ### Fire to the cursor
@@ -46,7 +46,7 @@ Bullets can be shot to a position with the **Fire bullet toward an position** ac
 
 [Open in GDevelop](https://editor.gdevelop.io/?project=example://conviction-of-gun-dude-desktop){ .md-button .md-button--primary }
 
-[![](conviction-dude-example.png){ width="300" }](https://editor.gdevelop.io/?project=example://conviction-of-gun-dude-desktop)
+[![](conviction-dude-example.png){ width="320" }](https://editor.gdevelop.io/?project=example://conviction-of-gun-dude-desktop)
 
 ## Fire several bullets at once
 
@@ -78,7 +78,7 @@ With these property values, the **fire** action fires 3 bullets evenly spread on
 
 [Open in GDevelop](https://editor.gdevelop.io/?project=example://fire-bullet){ .md-button .md-button--primary }
 
-[![](multi-fire-example.png){ width="300" }](https://editor.gdevelop.io/?project=example://fire-bullet)
+[![](multi-fire-example.png){ width="320" }](https://editor.gdevelop.io/?project=example://fire-bullet)
 
 
 ### Fire like a shotgun
diff --git a/docs/gdevelop5/objects/bbtext/index.md b/docs/gdevelop5/objects/bbtext/index.md
@@ -59,7 +59,7 @@ All these properties can be modified using the actions and conditions of the obj
 
     Open these examples online.
 
-[![](bbtext-example.jpg)](https://editor.gdevelop.io/?project=example://bbtext-object-demo)
+[![](bbtext-example.jpg){ width="320" }](https://editor.gdevelop.io/?project=example://bbtext-object-demo)
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://bbtext-object-demo){ .md-button .md-button--primary }
 
diff --git a/docs/gdevelop5/objects/multitouch-joystick/index.md b/docs/gdevelop5/objects/multitouch-joystick/index.md
@@ -37,7 +37,7 @@ The "Top-down multitouch controller mapper" behavior can be added to the charact
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://top-down-rpg){ .md-button .md-button--primary }
 
-[![](top-down-rpg-multitouch-controls.png)](https://editor.gdevelop.io/?project=example://top-down-rpg)
+[![](top-down-rpg-multitouch-controls.png){ width="320" }](https://editor.gdevelop.io/?project=example://top-down-rpg)
 
 ### Move a platformer character
 
@@ -61,7 +61,7 @@ The multitouch button behavior allows the developer to choose a button name. The
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://platformer){ .md-button .md-button--primary }
 
-[![](platformer-example-multitouch-controls.png)](https://editor.gdevelop.io/?project=example://platformer)
+[![](platformer-example-multitouch-controls.png){ width="320" }](https://editor.gdevelop.io/?project=example://platformer)
 
 ### Move a character with a custom movement
 
diff --git a/docs/gdevelop5/objects/resource-bar/index.md b/docs/gdevelop5/objects/resource-bar/index.md
@@ -40,7 +40,7 @@ Make sure to fill the "Unit width" with the dimension of the icon plus the margi
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://space-asteroids){ .md-button .md-button--primary }
 
-[![](/gdevelop5/objects/space-asteroids.png)](https://editor.gdevelop.io/?project=example://space-asteroids)
+[![](/gdevelop5/objects/space-asteroids.png){ width="320" }](https://editor.gdevelop.io/?project=example://space-asteroids)
 
 ## Create a continuous bar
 
@@ -62,7 +62,7 @@ and without a buffer:
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://top-down-rpg){ .md-button .md-button--primary }
 
-[![](../top-down-rpg-battle.png)](https://editor.gdevelop.io/?project=example://top-down-rpg)
+[![](../top-down-rpg-battle.png){ width="320" }](https://editor.gdevelop.io/?project=example://top-down-rpg)
 
 ## Update a bar according to a character life
 
diff --git a/docs/gdevelop5/objects/shape_painter/index.md b/docs/gdevelop5/objects/shape_painter/index.md
@@ -59,7 +59,7 @@ Like most objects, collisions can be detected by the shape painter object.  Shap
         **See it in action!** 🎮
     Open these examples online.
 
-[![](shapepainterobject.png)](https://editor.gdevelop.io/?project=example://advanced-shape-based-painter)
+[![](shapepainterobject.png){ width="320" }](https://editor.gdevelop.io/?project=example://advanced-shape-based-painter)
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://advanced-shape-based-painter){ .md-button .md-button--primary }
 
diff --git a/docs/gdevelop5/objects/text/index.md b/docs/gdevelop5/objects/text/index.md
@@ -70,13 +70,13 @@ Using events, you can modify all properties of the text object, such as:
 
 Manipulate a Text Object
 
-[![](changetextexample1.png)](https://editor.gdevelop.io/?project=example://manipulate-text-object)
+[![](changetextexample1.png){ width="320" }](https://editor.gdevelop.io/?project=example://manipulate-text-object)
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://manipulate-text-object){ .md-button .md-button--primary }
 
 Typewriter effect from extension
 
-[![](type-ontexteffectexample.png)](https://editor.gdevelop.io/?project=example://type-on-text-effect)
+[![](type-ontexteffectexample.png){ width="320" }](https://editor.gdevelop.io/?project=example://type-on-text-effect)
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://type-on-text-effect){ .md-button .md-button--primary }
 
diff --git a/docs/gdevelop5/objects/text_entry/index.md b/docs/gdevelop5/objects/text_entry/index.md
@@ -45,7 +45,7 @@ Using events, it is possible to enable or disable the "Text entry" object. Event
 
     Open these examples online.
 
-![](textexample.png)
+[![](textexample.png){ width="320" }](https://editor.gdevelop.io/?project=example://text-entry-object)
 
 [Open example in GDevelop](https://editor.gdevelop.io/?project=example://text-entry-object){ .md-button .md-button--primary }
 
diff --git a/docs/gdevelop5/tutorials/randomness/index.md b/docs/gdevelop5/tutorials/randomness/index.md
@@ -68,7 +68,7 @@ TODO Add a screenshot of the instruction editor showing the shuffle action.
 
 [Open in GDevelop](https://editor.gdevelop.io/?project=example://card-system){ .md-button .md-button--primary }
 
-[![](card-system-example.png){ width="300" }](https://editor.gdevelop.io/?project=example://card-system)
+[![](card-system-example.png){ width="320" }](https://editor.gdevelop.io/?project=example://card-system)
 
 
 ## Make randomness feel fair
