diff --git a/README.md b/README.md
index d35da81..5c872b4 100644
--- a/README.md
+++ b/README.md
@@ -64,7 +64,7 @@ To create static maps like that see our vignette
-![](https://ropenspain.github.io/spanishoddata/articles/webmedia/spain-folding-flows.gif)
+![](https://ropenspain.github.io/spanishoddata/media/spain-folding-flows.gif)
FigureĀ 2: Example of the data available through the package: interactive
@@ -73,7 +73,7 @@ daily flows in Spain
-![](https://ropenspain.github.io/spanishoddata/articles/webmedia/barcelona-time.gif)
+![](https://ropenspain.github.io/spanishoddata/media/barcelona-time.gif)
FigureĀ 3: Example of the data available through the package: interactive
diff --git a/README.qmd b/README.qmd
index 2e9b451..cf9c28a 100644
--- a/README.qmd
+++ b/README.qmd
@@ -8,9 +8,6 @@ execute:
# opts_chunk:
# fig.path: "man/figures/README-"
eval: false
-resources:
- - 'vignettes/webmedia/spain-folding-flows.gif'
- - 'vignettes/webmedia/barcelona-time.gif'
---
# spanishoddata: Get Spanish Origin-Destination Data
@@ -36,9 +33,9 @@ To create static maps like that see our vignette [here](https://ropenspain.githu
---
-![Example of the data available through the package: interactive daily flows in Spain](https://ropenspain.github.io/spanishoddata/articles/webmedia/spain-folding-flows.gif){#fig-spain-flows}
+![Example of the data available through the package: interactive daily flows in Spain](https://ropenspain.github.io/spanishoddata/media/spain-folding-flows.gif){#fig-spain-flows}
-![Example of the data available through the package: interactive daily flows in Barcelona with time filter](https://ropenspain.github.io/spanishoddata/articles/webmedia/barcelona-time.gif){#fig-spain-flows}
+![Example of the data available through the package: interactive daily flows in Barcelona with time filter](https://ropenspain.github.io/spanishoddata/media/barcelona-time.gif){#fig-spain-flows}
To create interactive maps see our vignette [here](https://ropenspain.github.io/spanishoddata/articles/flowmaps-interactive.html).
diff --git a/vignettes/webmedia/barcelona-time.gif b/pkgdown/assets/media/barcelona-time.gif
similarity index 100%
rename from vignettes/webmedia/barcelona-time.gif
rename to pkgdown/assets/media/barcelona-time.gif
diff --git a/vignettes/webmedia/flowmapblue-animated.mp4 b/pkgdown/assets/media/flowmapblue-animated.mp4
similarity index 100%
rename from vignettes/webmedia/flowmapblue-animated.mp4
rename to pkgdown/assets/media/flowmapblue-animated.mp4
diff --git a/vignettes/webmedia/flowmapblue-standard-time.mp4 b/pkgdown/assets/media/flowmapblue-standard-time.mp4
similarity index 100%
rename from vignettes/webmedia/flowmapblue-standard-time.mp4
rename to pkgdown/assets/media/flowmapblue-standard-time.mp4
diff --git a/vignettes/webmedia/flowmapblue-standard.mp4 b/pkgdown/assets/media/flowmapblue-standard.mp4
similarity index 100%
rename from vignettes/webmedia/flowmapblue-standard.mp4
rename to pkgdown/assets/media/flowmapblue-standard.mp4
diff --git a/vignettes/webmedia/spain-folding-flows.gif b/pkgdown/assets/media/spain-folding-flows.gif
similarity index 100%
rename from vignettes/webmedia/spain-folding-flows.gif
rename to pkgdown/assets/media/spain-folding-flows.gif
diff --git a/vignettes/flowmaps-interactive.qmd b/vignettes/flowmaps-interactive.qmd
index 61673d9..d9c5cfb 100644
--- a/vignettes/flowmaps-interactive.qmd
+++ b/vignettes/flowmaps-interactive.qmd
@@ -204,21 +204,11 @@ flowmap <- flowmapblue(
flowmap
```
-```{r}
-#| eval: true
-#| echo: false
-#| results: 'asis'
+![Video demonstrating the standard interactive flowmap](https://ropenspain.github.io/spanishoddata/media/flowmapblue-standard.mp4){width=80%}
+
+
+![Screenshot demonstrating the standard interactive flowmap](../man/figures/flowmapblue-standard-01.png){width=45%}![Screenshot demonstrating the standard interactive flowmap](../man/figures/flowmapblue-standard-02.png){width=45%}
-# Determine if we are in pkgdown and insert gif
-is_pkgdown <- Sys.getenv("IN_PKGDOWN") == "true"
-if (is_pkgdown) {
- cat('![](webmedia/flowmapblue-standard.mp4)')
-} else {
- # If not in pkgdown, insert static image
- cat('![](../man/figures/flowmapblue-standard-01.png){width=50%}')
- cat('![](../man/figures/flowmapblue-standard-02.png){width=50%}')
-}
-```
You can play around with the arguments of the `flowmapblue` function. For example, you can turn on the `animation` mode:
@@ -236,21 +226,9 @@ flowmap_anim
```
-```{r}
-#| eval: true
-#| echo: false
-#| results: 'asis'
-
-# Determine if we are in pkgdown and insert gif
-is_pkgdown <- Sys.getenv("IN_PKGDOWN") == "true"
-if (is_pkgdown) {
- cat('![](webmedia/flowmapblue-animated.mp4)')
-} else {
- # If not in pkgdown, insert static image
- cat('![](../man/figures/flowmapblue-animated.png){width=100%}')
-}
-```
+![Video demonstrating the animated interactive flowmap](https://ropenspain.github.io/spanishoddata/media/flowmapblue-animated.mp4){width=80%}
+![Screenshot demonstrating the animated interactive flowmap](../man/figures/flowmapblue-animated.png){width=80%}
# Advanced example - time filter {#advanced-example}
@@ -309,7 +287,7 @@ zones_barcelona_fua_plot
ggsave("./man/figures/zones_barcelona_fua_plot.png", plot = zones_barcelona_fua_plot, width = 6, height = 4, dpi = 300)
```
-![](../man/figures/zones_barcelona_fua_plot.png)
+![District zone boundaries in Barcelona and nearby areas](../man/figures/zones_barcelona_fua_plot.png){width=80%}
Now we prepare the table with coordinates for the flowmap:
@@ -365,17 +343,6 @@ flowmap_time
-```{r}
-#| eval: true
-#| echo: false
-#| results: 'asis'
-
-# Determine if we are in pkgdown and insert gif
-is_pkgdown <- Sys.getenv("IN_PKGDOWN") == "true"
-if (is_pkgdown) {
- cat('![](webmedia/flowmapblue-standard-time.mp4)')
-} else {
- # If not in pkgdown, insert static image
- cat('![](../man/figures/flowmapblue-standard-time.png){width=100%}')
-}
-```
+![Video demonstrating the time filtering on a flowmap](https://rOpenSpain.github.io/spanishoddata/media/flowmapblue-standard-time.mp4){width=80%}
+
+![Screnshot demonstrating the time filtering on a flowmap](../man/figures/flowmapblue-standard-time.png){width=80%}