diff --git a/content/assets/stylesheets/includes/blogpost.scss b/content/assets/stylesheets/includes/blogpost.scss index 8c02405..4bd7999 100644 --- a/content/assets/stylesheets/includes/blogpost.scss +++ b/content/assets/stylesheets/includes/blogpost.scss @@ -115,3 +115,13 @@ $sel: ''; width: 100%; } } + +img.full-width { + margin-left: -50vw; + margin-right: -50vw; + width: 100vw; + max-width: 100vw; + position: relative; + left: 50%; + right: 50%; +} diff --git a/content/blog/17-18/vleor.md b/content/blog/17-18/vleor.md index b21af53..3818568 100644 --- a/content/blog/17-18/vleor.md +++ b/content/blog/17-18/vleor.md @@ -61,7 +61,7 @@ De zwaardere en grotere voorwerpen werden in de gang gesmeten. <%= figure 'https://zeus.ugent.be/zeuswpi/1RXca_tJ.jpg', 'Volop aan het werken' %> -<%= figure 'https://zeus.ugent.be/zeuswpi/SM5ToXlH.jpg', 'Lege kelder in panorama' %> +<%= figure 'https://zeus.ugent.be/zeuswpi/SM5ToXlH.jpg', 'Lege kelder in panorama', img_class: 'full-width' %> <%= figure 'https://zeus.ugent.be/zeuswpi/dLDR0GR4.jpg', 'Volledig leeg, op een bedankingkje voor de noeste arbeiders na' %> @@ -94,7 +94,9 @@ Doorheen de dag konden nieuwsgierige voorbijgangers bewonderen en vooral horen h <%= figure 'https://zeus.ugent.be/zeuswpi/XkLhaJVu.jpg', 'Uiteraard werd de nieuwe zetelopstelling uitgebreid getest.' %> -<%= figure 'https://zeus.ugent.be/zeuswpi/trZFwU90.jpg', 'Het eindresultaat' %> +<%= figure 'https://zeus.ugent.be/zeuswpi/trZFwU90.jpg', 'Het eindresultaat', img_class: 'full-width' %> + +[Hier](https://photos.app.goo.gl/msViDCs4CtUFM90D2) kun je nog eens nagenieten van de volledige fotoreportage. Tot slot dankt Zeus en zijn bezoekers de volgende mensen voor hun bijdrage aan het bannen van rood stof uit onze levens: diff --git a/lib/helpers/blog.rb b/lib/helpers/blog.rb index 41deabe..bb06ad9 100644 --- a/lib/helpers/blog.rb +++ b/lib/helpers/blog.rb @@ -14,12 +14,12 @@ module BlogHelper end end - def figure(img_url, caption, alt = nil) + def figure(img_url, caption, alt = nil, img_class: nil) alt ||= caption <<~HTML
- #{alt} + #{alt}
#{caption}