diff --git a/doc/example_code/how_to_examples/index.rst b/doc/example_code/how_to_examples/index.rst
index 1487dc7c3..2dafe8a41 100644
--- a/doc/example_code/how_to_examples/index.rst
+++ b/doc/example_code/how_to_examples/index.rst
@@ -9,11 +9,13 @@ Starting Templates
 
 .. figure:: thumbs/starting_template.png
    :figwidth: 170px
+   :target: starting_template.html
 
    :ref:`starting_template`
 
 .. figure:: thumbs/template_platformer.png
    :figwidth: 170px
+   :target: template_platformer.html
 
    :ref:`template_platformer`
 
@@ -25,26 +27,31 @@ Drawing Primitives
 
 .. figure:: thumbs/happy_face.png
    :figwidth: 170px
+   :target: happy_face.html
 
    :ref:`happy_face`
 
 .. figure:: thumbs/drawing_primitives.png
    :figwidth: 170px
+   :target: drawing_primitives.html
 
    :ref:`drawing_primitives`
 
 .. figure:: thumbs/drawing_with_functions.png
    :figwidth: 170px
+   :target: drawing_with_functions.html
 
    :ref:`drawing_with_functions`
 
 .. figure:: thumbs/drawing_text.png
    :figwidth: 170px
+   :target: drawing_text.html
 
    :ref:`drawing_text`
 
 .. figure:: thumbs/drawing_text_objects.png
    :figwidth: 170px
+   :target: drawing_text_objects.html
 
    :ref:`drawing_text_objects`
 
@@ -53,16 +60,19 @@ Drawing with Loops
 
 .. figure:: thumbs/drawing_with_loops.png
    :figwidth: 170px
+   :target: drawing_with_loops.html
 
    :ref:`drawing_with_loops`
 
 .. figure:: thumbs/nested_loops_box.png
    :figwidth: 170px
+   :target: nested_loops_box.html
 
    :ref:`nested_loops_box`
 
 .. figure:: thumbs/nested_loops_bottom_left_triangle.png
    :figwidth: 170px
+   :target: nested_loops_bottom_left_triangle.html
 
    :ref:`nested_loops_bottom_left_triangle`
 
@@ -72,21 +82,25 @@ Animating Drawing Primitives
 
 .. figure:: thumbs/bouncing_rectangle.png
    :figwidth: 170px
+   :target: bouncing_rectangle.html
 
    :ref:`bouncing_rectangle`
 
 .. figure:: thumbs/shapes.png
    :figwidth: 170px
+   :target: shapes-slow.html
 
    :ref:`shapes-slow`
 
 .. figure:: thumbs/radar_sweep.png
    :figwidth: 170px
+   :target: radar_sweep.html
 
    :ref:`radar_sweep`
 
 .. figure:: thumbs/snow.png
    :figwidth: 170px
+   :target: snow.html
 
    :ref:`snow`
 
@@ -98,21 +112,25 @@ Faster Drawing with ShapeElementLists
 
 .. figure:: thumbs/shape_list_demo.png
    :figwidth: 170px
+   :target: shape_list_demo.html
 
    :ref:`shape_list_demo`
 
 .. figure:: thumbs/lines_buffered.png
    :figwidth: 170px
+   :target: lines_buffered.html
 
    :ref:`lines_buffered`
 
 .. figure:: thumbs/shape_list_demo_skylines.png
    :figwidth: 170px
+   :target: shape_list_demo_skylines.html
 
    :ref:`shape_list_demo_skylines`
 
 .. figure:: thumbs/gradients.png
    :figwidth: 170px
+   :target: gradients.html
 
    :ref:`gradients`
 
@@ -129,62 +147,74 @@ Sprite Player Movement
 
 .. figure:: thumbs/sprite_collect_coins.png
    :figwidth: 170px
+   :target: sprite_collect_coins.html
 
    :ref:`sprite_collect_coins`
 
 .. figure:: thumbs/sprite_collect_coins.png
    :figwidth: 170px
+   :target: sprite_move_keyboard.html
 
    :ref:`sprite_move_keyboard`
 
 .. figure:: thumbs/sprite_collect_coins.png
    :figwidth: 170px
+   :target: sprite_move_keyboard_better.html
 
    :ref:`sprite_move_keyboard_better`
 
 .. figure:: thumbs/sprite_collect_coins.png
    :figwidth: 170px
+   :target: sprite_move_keyboard_accel.html
 
    :ref:`sprite_move_keyboard_accel`
 
 
 .. figure:: thumbs/sprite_face_left_or_right.png
    :figwidth: 170px
+   :target: sprite_face_left_or_right.html
 
    :ref:`sprite_face_left_or_right`
 
 .. figure:: thumbs/sprite_collect_coins.png
    :figwidth: 170px
+   :target: sprite_move_joystick.html
 
    :ref:`sprite_move_joystick`
 
 .. figure:: thumbs/sprite_move_angle.png
    :figwidth: 170px
+   :target: sprite_move_angle.html
 
    :ref:`sprite_move_angle`
 
 .. figure:: thumbs/dual_stick_shooter.png
    :figwidth: 170px
+   :target: dual_stick_shooter.html
 
    :ref:`dual_stick_shooter`
 
 .. figure:: thumbs/turn_and_move.png
    :figwidth: 170px
+   :target: turn_and_move.html
 
    :ref:`turn_and_move`
 
 .. figure:: thumbs/easing_example_1.png
    :figwidth: 170px
+   :target: easing_example_1.html
 
    :ref:`easing_example_1`
 
 .. figure:: thumbs/easing_example_2.png
    :figwidth: 170px
+   :target: easing_example_2.html
 
    :ref:`easing_example_2`
 
 .. figure:: thumbs/sprite_rotate_around_tank.png
    :figwidth: 170px
+   :target: sprite_rotate_around_tank.html
 
    :ref:`sprite_rotate_around_tank`
 
@@ -193,32 +223,38 @@ Sprite Non-Player Movement
 
 .. figure:: thumbs/sprite_collect_coins_move_down.png
    :figwidth: 170px
+   :target: sprite_collect_coins_move_down.html
 
    :ref:`sprite_collect_coins_move_down`
 
 .. figure:: thumbs/sprite_collect_coins_move_bouncing.png
    :figwidth: 170px
+   :target: sprite_collect_coins_move_bouncing.html
 
    :ref:`sprite_collect_coins_move_bouncing`
 
 .. figure:: thumbs/sprite_bouncing_coins.png
    :figwidth: 170px
+   :target: sprite_bouncing_coins.html
 
    :ref:`sprite_bouncing_coins`
 
 
 .. figure:: thumbs/sprite_collect_coins_move_circle.png
    :figwidth: 170px
+   :target: sprite_collect_coins_move_circle.html
 
    :ref:`sprite_collect_coins_move_circle`
 
 .. figure:: thumbs/sprite_collect_rotating.png
    :figwidth: 170px
+   :target: sprite_collect_rotating.html
 
    :ref:`sprite_collect_rotating`
 
 .. figure:: thumbs/sprite_rotate_around_point.png
    :figwidth: 170px
+   :target: sprite_rotate_around_point.html
 
    :ref:`sprite_rotate_around_point`
 
@@ -227,26 +263,31 @@ Sprite Pathing
 
 .. figure:: thumbs/follow_path.png
    :figwidth: 170px
+   :target: follow_path.html
 
    :ref:`follow_path`
 
 .. figure:: thumbs/sprite_follow_simple.png
    :figwidth: 170px
+   :target: sprite_follow_simple.html
 
    :ref:`sprite_follow_simple`
 
 .. figure:: thumbs/sprite_follow_simple_2.png
    :figwidth: 170px
+   :target: sprite_follow_simple_2.html
 
    :ref:`sprite_follow_simple_2`
 
 .. figure:: thumbs/line_of_sight.png
    :figwidth: 170px
+   :target: line_of_sight.html
 
    :ref:`line_of_sight`
 
 .. figure:: thumbs/astar_pathfinding.png
    :figwidth: 170px
+   :target: astar_pathfinding.html
 
    :ref:`astar_pathfinding`
 
@@ -256,16 +297,19 @@ Sprite Properties
 
 .. figure:: thumbs/sprite_health.png
    :figwidth: 170px
+   :target: sprite_health.html
 
    :ref:`sprite_health`
 
 .. figure:: thumbs/sprite_properties.png
    :figwidth: 170px
+   :target: sprite_properties.html
 
    :ref:`sprite_properties`
 
 .. figure:: thumbs/sprite_change_coins.png
    :figwidth: 170px
+   :target: sprite_change_coins.html
 
    :ref:`sprite_change_coins`
 
@@ -274,11 +318,13 @@ Games with Levels
 
 .. figure:: thumbs/sprite_collect_coins_diff_levels.gif
    :figwidth: 170px
+   :target: example-sprite-collect-coins-diff-levels.html
 
    :ref:`example-sprite-collect-coins-diff-levels`
 
 .. figure:: thumbs/sprite_rooms.png
    :figwidth: 170px
+   :target: sprite_rooms.html
 
    :ref:`sprite_rooms`
 
@@ -287,36 +333,43 @@ Shooting with Sprites
 
 .. figure:: thumbs/sprite_bullets.png
    :figwidth: 170px
+   :target: sprite_bullets.html
 
    :ref:`sprite_bullets`
 
 .. figure:: thumbs/sprite_bullets_aimed.png
    :figwidth: 170px
+   :target: sprite_bullets_aimed.html
 
    :ref:`sprite_bullets_aimed`
 
 .. figure:: thumbs/sprite_bullets_periodic.png
    :figwidth: 170px
+   :target: sprite_bullets_periodic.html
 
    :ref:`sprite_bullets_periodic`
 
 .. figure:: thumbs/sprite_bullets_random.png
    :figwidth: 170px
+   :target: sprite_bullets_random.html
 
    :ref:`sprite_bullets_random`
 
 .. figure:: thumbs/sprite_bullets_enemy_aims.png
    :figwidth: 170px
+   :target: sprite_bullets_enemy_aims.html
 
    :ref:`sprite_bullets_enemy_aims`
 
 .. figure:: thumbs/sprite_explosion_bitmapped.png
    :figwidth: 170px
+   :target: sprite_explosion_bitmapped.html
 
    :ref:`sprite_explosion_bitmapped`
 
 .. figure:: thumbs/sprite_explosion_particles.png
    :figwidth: 170px
+   :target: sprite_explosion_particles.html
 
    :ref:`sprite_explosion_particles`
 
@@ -325,16 +378,19 @@ Sound
 
 .. figure:: thumbs/sound_demo.png
    :figwidth: 170px
+   :target: sound_demo.html
 
    :ref:`sound_demo`
 
 .. figure:: thumbs/sound_speed_demo.png
    :figwidth: 170px
+   :target: sound_speed_demo.html
 
    :ref:`sound_speed_demo`
 
 .. figure:: thumbs/music_control_demo.png
    :figwidth: 170px
+   :target: music_control_demo.html
 
    :ref:`music_control_demo`
 
@@ -343,21 +399,25 @@ Camera Use
 
 .. figure:: thumbs/sprite_move_scrolling.png
    :figwidth: 170px
+   :target: sprite_move_scrolling.html
 
    :ref:`sprite_move_scrolling`
 
 .. figure:: thumbs/sprite_move_scrolling_box.png
    :figwidth: 170px
+   :target: sprite_move_scrolling_box.html
 
    :ref:`sprite_move_scrolling_box`
 
 .. figure:: thumbs/sprite_move_scrolling.png
    :figwidth: 170px
+   :target: sprite_move_scrolling_shake.html
 
    :ref:`sprite_move_scrolling_shake`
 
 .. figure:: thumbs/camera_platform.png
    :figwidth: 170px
+   :target: camera_platform.html
 
    :ref:`camera_platform`
 
@@ -369,31 +429,37 @@ Basic Platformers
 
 .. figure:: thumbs/sprite_move_walls.png
    :figwidth: 170px
+   :target: sprite_move_walls.html
 
    :ref:`sprite_move_walls`
 
 .. figure:: thumbs/sprite_no_coins_on_walls.png
    :figwidth: 170px
+   :target: sprite_no_coins_on_walls.html
 
    :ref:`sprite_no_coins_on_walls`
 
 .. figure:: thumbs/sprite_move_animation.gif
    :figwidth: 170px
+   :target: sprite_move_animation.html
 
    :ref:`sprite_move_animation`
 
 .. figure:: thumbs/sprite_moving_platforms.png
    :figwidth: 170px
+   :target: sprite_moving_platforms.html
 
    :ref:`sprite_moving_platforms`
 
 .. figure:: thumbs/sprite_enemies_in_platformer.png
    :figwidth: 170px
+   :target: sprite_enemies_in_platformer.html
 
    :ref:`sprite_enemies_in_platformer`
 
 .. figure:: thumbs/11_animate_character.png
    :figwidth: 170px
+   :target: platformer_tutorial.html
 
    :ref:`platformer_tutorial`
 
@@ -403,11 +469,13 @@ Using Tiled Map Editor to Create Maps
 
 .. figure:: thumbs/sprite_tiled_map.png
    :figwidth: 170px
+   :target: sprite_tiled_map.html
 
    :ref:`sprite_tiled_map`
 
 .. figure:: thumbs/sprite_tiled_map_with_levels.png
    :figwidth: 170px
+   :target: sprite_tiled_map_with_levels.html
 
    :ref:`sprite_tiled_map_with_levels`
 
@@ -416,21 +484,25 @@ Procedural Generation
 
 .. figure:: thumbs/maze_recursive.png
    :figwidth: 170px
+   :target: maze_recursive.html
 
    :ref:`maze_recursive`
 
 .. figure:: thumbs/maze_depth_first.png
    :figwidth: 170px
+   :target: maze_depth_first.html
 
    :ref:`maze_depth_first`
 
 .. figure:: thumbs/procedural_caves_cellular.png
    :figwidth: 170px
+   :target: procedural_caves_cellular.html
 
    :ref:`procedural_caves_cellular`
 
 .. figure:: thumbs/procedural_caves_bsp.png
    :figwidth: 170px
+   :target: procedural_caves_bsp.html
 
    :ref:`procedural_caves_bsp`
 
@@ -444,21 +516,25 @@ Instruction Screens and Game Over Screens
 
 .. figure:: thumbs/view_screens_minimal.png
    :figwidth: 170px
+   :target: view_screens_minimal.html
 
    :ref:`view_screens_minimal`
 
 .. figure:: thumbs/view_instructions_and_game_over.png
    :figwidth: 170px
+   :target: view_instructions_and_game_over.html
 
    :ref:`view_instructions_and_game_over`
 
 .. figure:: thumbs/view_pause_screen.png
    :figwidth: 170px
+   :target: view_pause_screen.html
 
    :ref:`view_pause_screen`
 
 .. figure:: thumbs/view_screens_minimal.png
    :figwidth: 170px
+   :target: transitions.html
 
    :ref:`transitions`
 
@@ -467,11 +543,13 @@ Resizable Window and Fullscreen Games
 
 .. figure:: thumbs/resizable_window.png
    :figwidth: 170px
+   :target: resizable_window.html
 
    :ref:`resizable_window`
 
 .. figure:: thumbs/full_screen_example.png
    :figwidth: 170px
+   :target: full_screen_example.html
 
    :ref:`full_screen_example`
 
@@ -482,16 +560,19 @@ Dividing a View Into Sections
 
 .. figure:: thumbs/sections_demo_1.png
    :figwidth: 170px
+   :target: sections_demo_1.html
 
    :ref:`sections_demo_1`
 
 .. figure:: thumbs/sections_demo_2.png
    :figwidth: 170px
+   :target: sections_demo_2.html
 
    :ref:`sections_demo_2`
 
 .. figure:: thumbs/sections_demo_3.png
    :figwidth: 170px
+   :target: sections_demo_3.html
 
    :ref:`sections_demo_3`
 
@@ -500,31 +581,37 @@ Graphical User Interface
 
 .. figure:: thumbs/gui_flat_button.png
    :figwidth: 170px
+   :target: gui_flat_button.html
 
    :ref:`gui_flat_button`
 
 .. figure:: thumbs/gui_flat_button_styled.png
    :figwidth: 170px
+   :target: gui_flat_button_styled.html
 
    :ref:`gui_flat_button_styled`
 
 .. figure:: thumbs/gui_widgets.png
    :figwidth: 170px
+   :target: gui_widgets.html
 
    :ref:`gui_widgets`
 
 .. figure:: thumbs/gui_ok_messagebox.png
    :figwidth: 170px
+   :target: gui_ok_messagebox.html
 
    :ref:`gui_ok_messagebox`
 
 .. figure:: thumbs/gui_scrollable_text.png
    :figwidth: 170px
+   :target: gui_scrollable_text.html
 
    :ref:`gui_scrollable_text`
 
 .. figure:: thumbs/gui_slider.png
    :figwidth: 170px
+   :target: gui_slider.html
 
    :ref:`gui_slider`
 
@@ -534,31 +621,37 @@ Grid-Based Games
 
 .. figure:: thumbs/array_backed_grid.png
    :figwidth: 170px
+   :target: array_backed_grid.html
 
    :ref:`array_backed_grid`
 
 .. figure:: thumbs/array_backed_grid.png
    :figwidth: 170px
+   :target: array_backed_grid_buffered.html
 
    :ref:`array_backed_grid_buffered`
 
 .. figure:: thumbs/array_backed_grid.png
    :figwidth: 170px
+   :target: array_backed_grid_sprites_1.html
 
    :ref:`array_backed_grid_sprites_1`
 
 .. figure:: thumbs/array_backed_grid.png
    :figwidth: 170px
+   :target: array_backed_grid_sprites_2.html
 
    :ref:`array_backed_grid_sprites_2`
 
 .. figure:: thumbs/tetris.png
    :figwidth: 170px
+   :target: tetris.html
 
    :ref:`tetris`
 
 .. figure:: thumbs/conway_alpha.png
    :figwidth: 170px
+   :target: conway_alpha.html
 
    :ref:`conway_alpha`
 
@@ -571,26 +664,31 @@ Using PyMunk for Physics
 
 .. figure:: thumbs/pymunk_box_stacks.png
    :figwidth: 170px
+   :target: pymunk_box_stacks.html
 
    :ref:`pymunk_box_stacks`
 
 .. figure:: thumbs/pymunk_pegboard.png
    :figwidth: 170px
+   :target: pymunk_pegboard.html
 
    :ref:`pymunk_pegboard`
 
 .. figure:: thumbs/pymunk_demo_top_down.png
    :figwidth: 170px
+   :target: pymunk_demo_top_down.html
 
    :ref:`pymunk_demo_top_down`
 
 .. figure:: thumbs/pymunk_joint_builder.png
    :figwidth: 170px
+   :target: pymunk_joint_builder.html
 
    :ref:`pymunk_joint_builder`
 
 .. figure:: thumbs/pymunk_platformer.png
    :figwidth: 170px
+   :target: pymunk_platformer_tutorial.html
 
    :ref:`pymunk_platformer_tutorial`
 
@@ -599,26 +697,31 @@ Frame Buffers
 
 .. figure:: thumbs/minimap.png
    :figwidth: 170px
+   :target: minimap.html
 
    :ref:`minimap`
 
 .. figure:: thumbs/light_demo.png
    :figwidth: 170px
+   :target: light_demo.html
 
    :ref:`light_demo`
 
 .. figure:: thumbs/transform_feedback.png
    :figwidth: 170px
+   :target: transform_feedback.html
 
    :ref:`transform_feedback`
 
 .. figure:: thumbs/game_of_life_fbo.png
    :figwidth: 170px
+   :target: game_of_life_fbo.html
 
    :ref:`game_of_life_fbo`
 
 .. figure:: thumbs/perspective.png
    :figwidth: 170px
+   :target: perspective.html
 
    :ref:`perspective`
 
@@ -629,31 +732,37 @@ Concept Games
 
 .. figure:: thumbs/asteroid_smasher.png
    :figwidth: 170px
+   :target: asteroid_smasher.html
 
    :ref:`asteroid_smasher`
 
 .. figure:: https://raw.githubusercontent.com/pythonarcade/asteroids/main/screenshot.png
    :figwidth: 170px
+   :target: https://github.com/pythonarcade/asteroids
 
    `Asteroids with Shaders <https://github.com/pythonarcade/asteroids>`_
 
 .. figure:: thumbs/slime_invaders.png
    :figwidth: 170px
+   :target: slime_invaders.html
 
    :ref:`slime_invaders`
 
 .. figure:: thumbs/community-rpg.png
    :figwidth: 170px
+   :target: https://github.com/pythonarcade/community-rpg
 
    `Community RPG <https://github.com/pythonarcade/community-rpg>`_
 
 .. figure:: thumbs/2048.png
    :figwidth: 170px
+   :target: https://github.com/pvcraven/2048
 
    `2048 <https://github.com/pvcraven/2048>`_
 
 .. figure:: thumbs/rogue_like.png
    :figwidth: 170px
+   :target: https://github.com/pythonarcade/roguelike
 
    `Rogue-Like <https://github.com/pythonarcade/roguelike>`_
 
@@ -662,26 +771,31 @@ Odds and Ends
 
 .. figure:: thumbs/sprite_collect_coins_background.png
    :figwidth: 170px
+   :target: sprite_collect_coins_background.html
 
    :ref:`sprite_collect_coins_background`
 
 .. figure:: thumbs/parallax.png
    :figwidth: 170px
+   :target: parallax.html
 
    :ref:`parallax`
 
 .. figure:: thumbs/timer.png
    :figwidth: 170px
+   :target: timer.html
 
    :ref:`timer`
 
 .. figure:: thumbs/performance_statistics.png
    :figwidth: 170px
+   :target: performance_statistics_example.html
 
    :ref:`performance_statistics_example`
 
 .. figure:: thumbs/text_loc_example_translated.png
    :figwidth: 170px
+   :target: text_loc_example.html
 
    :ref:`text_loc_example`
 
@@ -690,31 +804,37 @@ Tutorials
 
 .. figure:: thumbs/11_animate_character.png
    :figwidth: 170px
+   :target: platformer_tutorial.html
 
    :ref:`platformer_tutorial`
 
 .. figure:: thumbs/solitaire_11.png
    :figwidth: 170px
+   :target: solitaire_tutorial.html
 
    :ref:`solitaire_tutorial`
 
 .. figure:: thumbs/crt_filter.png
    :figwidth: 170px
+   :target: crt_filter.html
 
    :ref:`crt_filter`
 
 .. figure:: thumbs/raycasting_tutorial.png
    :figwidth: 170px
+   :target: raycasting_tutorial.html
 
    :ref:`raycasting_tutorial`
 
 .. figure:: thumbs/pymunk_platformer_tutorial.png
    :figwidth: 170px
+   :target: pymunk_platformer_tutorial.html
 
    :ref:`pymunk_platformer_tutorial`
 
 .. figure:: thumbs/shader_toy_tutorial.png
    :figwidth: 170px
+   :target: shader_toy_tutorial_glow.html
 
    :ref:`shader_toy_tutorial_glow`
 
@@ -724,11 +844,13 @@ Particle System
 
 .. figure:: thumbs/particle_fireworks.png
    :figwidth: 170px
+   :target: particle_fireworks.html
 
    :ref:`particle_fireworks`
 
 .. figure:: thumbs/particle_systems.png
    :figwidth: 170px
+   :target: particle_systems.html
 
    :ref:`particle_systems`
 
@@ -737,11 +859,13 @@ Stress Tests
 
 .. figure:: thumbs/stress_test_draw_moving.png
    :figwidth: 170px
+   :target: stress_test_draw_moving.html
 
    :ref:`stress_test_draw_moving`
 
 .. figure:: thumbs/stress_test_collision.png
    :figwidth: 170px
+   :target: stress_test_collision.html
 
    :ref:`stress_test_collision`