Figure shortcode, css improvements

3 files changed, 35 insertions, 11 deletions

diff --git a/exampleSite/content/posts/2016/lorem-ipsum.md b/exampleSite/content/posts/2016/lorem-ipsum.md
index c95380c..41dea22 100644
--- a/exampleSite/content/posts/2016/lorem-ipsum.md
+++ b/exampleSite/content/posts/2016/lorem-ipsum.md
@@ -11,18 +11,18 @@ slug: lorem-ipsum-dolor-sit-amet-consectetur-adipiscing-elit-donec-ultrices-elit
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices elit et rhoncus maximus. Suspendisse potenti. Vivamus ante lacus, congue vitae nisi vitae, pellentesque tempor justo. Aliquam congue tortor a urna ornare scelerisque. Fusce tristique in leo id scelerisque. Cras augue sapien, rhoncus sed nisl non, mattis varius nunc. Etiam accumsan velit placerat diam luctus, vel venenatis urna auctor. Aenean accumsan turpis enim, a facilisis nibh ullamcorper cursus. Cras ac metus ac diam lobortis euismod id ac quam. Nunc tempor ligula quis diam mattis, ac lobortis urna mattis. Sed a odio ut enim auctor ultricies nec nec lectus. Nam molestie dignissim malesuada. In vitae lectus eu dolor finibus accumsan nec eu enim. Nulla elementum at libero vel euismod. Aliquam sollicitudin orci id tincidunt dignissim. Quisque mollis quam pretium lacus finibus gravida.
 
-### Part 2
+## Part 2
 
 Vestibulum vel sollicitudin diam. Nulla hendrerit sapien mauris, in consequat turpis ornare vel. Nunc condimentum nunc ante, sit amet porta nunc cursus suscipit. Pellentesque erat metus, scelerisque sit amet euismod et, eleifend a est. Etiam quis congue ante. Sed suscipit enim placerat condimentum malesuada. Nam vitae metus fermentum, ullamcorper nibh vitae, ultricies purus. Cras nec efficitur felis, eleifend sodales mauris. Sed accumsan ligula ut libero porta, non blandit nulla suscipit. Etiam id posuere ante.
 
-#### Part 3
+## Part 3
 
 Etiam non ipsum gravida, sagittis lorem a, mollis libero. Donec sed rutrum lectus. Aenean sagittis ante ut consequat ultrices. Cras dapibus nibh augue, et accumsan nisi dictum quis. Curabitur nec nibh justo. Pellentesque sit amet magna tristique, dapibus justo quis, porta erat. Ut cursus posuere magna, sed tristique ante porta non. Curabitur efficitur nunc sed pellentesque ullamcorper. Proin ac quam eget diam convallis volutpat. Vestibulum eget nibh egestas, semper sem ac, vestibulum nisi. Aliquam scelerisque id tellus id laoreet. Nunc sed justo justo. Praesent quis ipsum vel ligula consequat tincidunt.
 
-##### Part 4
+## Part 4
 
 Praesent non libero vel eros semper cursus. Mauris accumsan volutpat lorem, id placerat est finibus vel. Integer vitae justo eleifend, tincidunt dolor eu, semper ligula. Cras sit amet ligula nec lorem vehicula tempor. Morbi hendrerit sollicitudin erat non malesuada. Duis at mi et mi tempor iaculis. Cras neque ex, faucibus quis leo id, convallis pharetra arcu. Vestibulum nec massa mauris. Nullam sollicitudin commodo commodo. Nullam placerat mattis metus a faucibus. Nunc non ex urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
 
-###### Part 5
+## Part 5
 
 Donec sodales, nulla ut pharetra eleifend, mauris erat malesuada diam, mattis placerat neque mi rutrum ante. Nulla ex nibh, ultricies eu gravida non, pellentesque ut elit. Sed ullamcorper erat non augue venenatis cursus. Aliquam vehicula quam lacus, quis cursus elit tristique venenatis. In eget suscipit tortor. Proin metus quam, malesuada ac posuere vitae, lobortis ut ipsum. Donec odio magna, feugiat posuere pulvinar ac, mollis quis augue. Vestibulum molestie lectus et libero porttitor, non viverra mi suscipit. Nulla ac elit quis arcu lobortis bibendum vel ac leo. Curabitur euismod, nulla eu rutrum congue, nunc velit euismod orci, non vehicula ipsum elit vulputate elit. Duis iaculis interdum leo sit amet viverra. Proin consequat a elit sed iaculis. Sed magna est, sodales nec dolor at, imperdiet eleifend nunc. Phasellus vel est ut est egestas dapibus.
diff --git a/exampleSite/content/posts/2017/images.md b/exampleSite/content/posts/2017/images.md
index bec0eff..2dda62b 100644
--- a/exampleSite/content/posts/2017/images.md
+++ b/exampleSite/content/posts/2017/images.md
@@ -1,21 +1,45 @@
 ---
-title: Images - lightbox
+title: Images
 date: 2017-11-11T10:15:01+02:00
 categories: ["writing"]
 tags: ["images", "lightbox"]
 language: en
-slug: images-lightbox
+slug: images
 images: [/images/image-1.jpg]
 ---
 
-You can use ```img``` shortcode to insert image using Lightbox.
+Use markdown to diplay an image.
+
+```markdown
+![Alt text](/images/image-1.jpg "Photo by Ales Krivec on Unsplash")
+```
+
+Result:
+
+![Alt text](/images/image-1.jpg "Photo by Ales Krivec on Unsplash")
+
+
+You can use ```figure``` shortcode to insert an image with caption.
+
+Example code:
+
+```html
+&#123;{< figure src="/images/image-1.jpg" title="Photo by Ales Krivec on Unsplash" >}&#125;
+```
+
+Result:
+
+{{< figure src="/images/image-1.jpg" title="Photo by Ales Krivec on Unsplash" >}}
+
+
+You can add ```lightbox="true"``` parameter to use lightbox plugin.
 
 Example code:
 
 ```html
-&#123;{< img src="/images/image-1.jpg" title="Photo by Ales Krivec on Unsplash" >}&#125;
+&#123;{< figure src="/images/image-1.jpg" title="Photo by Ales Krivec on Unsplash" lightbox="true" >}&#125;
 ```
 
 Result (click on the image):
 
-{{< img src="/images/image-1.jpg" title="Photo by Ales Krivec on Unsplash" >}}
+{{< figure src="/images/image-1.jpg" title="Photo by Ales Krivec on Unsplash" lightbox="true" >}}
diff --git a/exampleSite/content/posts/2017/typography.md b/exampleSite/content/posts/2017/typography.md
index a034d78..3141e20 100644
--- a/exampleSite/content/posts/2017/typography.md
+++ b/exampleSite/content/posts/2017/typography.md
@@ -168,10 +168,10 @@ Then, anywhere in the document, you define your link label like this, on a line
 
 ![Alt text](/images/image-1.jpg "Photo by Ales Krivec on Unsplash")
 
-{{< img src="/images/image-1.jpg" title="Photo by Ales Krivec on Unsplash" >}}
-
 {{< figure src="/images/image-1.jpg" title="Photo by Ales Krivec on Unsplash" >}}
 
+{{< figure src="/images/image-1.jpg" title="Photo by Ales Krivec on Unsplash" lightbox="true" >}}
+
 ---
 
 {{< instagram BbTLbYSH59J >}}