Get images working from .md post files

gatsby-config.js

@@ -15,6 +15,20 @@ module.exports = {
         path: `${__dirname}/src/posts`,
       },
     },
-    `gatsby-transformer-remark`
+    `gatsby-transformer-sharp`,
+    `gatsby-plugin-sharp`,
+    {
+      resolve: `gatsby-transformer-remark`,      
+      options: {
+        plugins: [
+          {
+            resolve: `gatsby-remark-images`,
+            options: {
+              maxWidth: 800,
+            },
+          },
+        ],
+      },
+    }
   ],
 }

package.json

@@ -16,9 +16,13 @@
   "dependencies": {
     "disqus-react": "^1.0.10",
     "gatsby": "^2.24.61",
+    "gatsby-image": "^2.4.19",
     "gatsby-plugin-sass": "^2.3.13",
+    "gatsby-plugin-sharp": "^2.6.36",
+    "gatsby-remark-images": "^3.3.30",
     "gatsby-source-filesystem": "^2.3.30",
     "gatsby-transformer-remark": "^2.8.35",
+    "gatsby-transformer-sharp": "^2.5.15",
     "node-sass": "^4.14.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0"

src/posts/2012/03/15/change-the-color-of-an-icon-with-gimp.md

@@ -14,11 +14,11 @@ It took me a long time to figure out a good method (I’m no graphic designer!),
 
 The first step, of course, is to find an icon.  There are billions of free ones out there on the web.  This is mine.
 
-![Blue phone icon](/assets/images/2012-03-15-change-the-color-of-an-icon-with-gimp/icon-phone-blue.png)
+![Blue phone icon](./icon-phone-blue.png)
 
 I love it.  It’s just what I need–but what a terrible color!  I need something else.  It’s a PNG and when I open it in Gimp, here’s what it looks like.
 
-![Original in Gimp](/assets/images/2012-03-15-change-the-color-of-an-icon-with-gimp/original_in_gimp-300x236.png)
+![Original in Gimp](./original_in_gimp-300x236.png)
 
 You can see the edges have been blended into a white background which would work great if I only ever put it on a white background.  Well, I just might be doing that, but I’m too much of a perfectionist to use it like that.  So, let’s get to work.
 
@@ -26,7 +26,7 @@ You can see the edges have been blended into a white background which would work
 
 Add a new layer to the image by selecting Layer > New Layer.  Call it “color”.  Make sure it’s on top of the “Background” layer.
 
-![Adding a color layer](/assets/images/2012-03-15-change-the-color-of-an-icon-with-gimp/color_layer-149x300.png)
+![Adding a color layer](./color_layer-149x300.png)
 
 Fill this new layer with the color you want to change the icon to.  I’m using this lovely puke color (not my choice!): #afbd0a.
 
@@ -38,17 +38,17 @@ Select the “Background” layer.  Desaturate the image by selecting Colors > D
 
 Now, invert the image by selecting  Colors > Invert.  Next, create another layer called “mask” and fill it with black.  Move this layer below the “Background” layer.  Your layers should look like the image below.
 
-![Creating the mask layer](/assets/images/2012-03-15-change-the-color-of-an-icon-with-gimp/mask_layer-209x300.png)
+![Creating the mask layer](./mask_layer-209x300.png)
 
 Right-click on the “Background” layer and select “Merge down”.  Now you should have something similar to the image below.
 
-![After merging down](/assets/images/2012-03-15-change-the-color-of-an-icon-with-gimp/after_merge_down-300x156.png)
+![After merging down](./after_merge_down-300x156.png)
 
 ## 4. Adjust the curves
 
 Now, with the “mask” layer selected, select Colors > Curves.  In the dialog, drag the very middle of the line straight up to the top-center of the graph.  Gimp should look like the screenshot below.  Click “OK”.
 
-![Adjusting the curves](/assets/images/2012-03-15-change-the-color-of-an-icon-with-gimp/curves-300x189.png)
+![Adjusting the curves](./curves-300x189.png)
 
 ## 5. Create a layer mask on the “color” layer
 
@@ -62,7 +62,7 @@ Paste what you’ve copied to the layer mask by selecting Edit > Paste.  You’l
 
 Now hide your “mask” layer and show your “color” layer.  Perfect!
 
-![Completed image](/assets/images/2012-03-15-change-the-color-of-an-icon-with-gimp/done-300x163.png)
+![Completed image](./done-300x163.png)
 
 You now have a new icon with a completely different color, but with the nice blending at the edges and perfect shape of the original icon.  Don’t believe me?  Well, test it!  Select your “mask” layer and delete everything on it.  Fill it with any background color you want and see how it looks.  Make sure to show your “mask” layer again by click on the eye button.
 

src/posts/2012/06/12/limit-selected-items-on-sitecore-multilist-field.md

@@ -13,10 +13,10 @@ You want to limit the number of items a user can choose for a multilist field in
 The solution is easy enough.  Just add some validation to the field that will “count” the number of GUIDs in the raw value of the MultiList field.
 
 1. Open up the template in the tree navigation and click on the MultiList field you want to limit
-![sitecore_template_property_nav](/assets/images/2012-06-12-limit-selected-items-on-sitecore-multilist-field/sitecore_template_property_nav.png)
+![sitecore_template_property_nav](./sitecore_template_property_nav.png)
 
 2. Scroll down to the Validation field and enter this: ^(\{[^}]+\}\|?){0,5}$.  This regular expression simply makes sure you have between 0 and 5 GUIDs in the value of the MultiList, effectively limiting the number of items you select in the list.  The {0,5} is the range.  So, change the 0 to limit the lower bound and change the 5 to limit the upper bound.
-![sitecore_template_validation_field](/assets/images/2012-06-12-limit-selected-items-on-sitecore-multilist-field/sitecore_template_validation_field.png)
+![sitecore_template_validation_field](./sitecore_template_validation_field.png)
 
 3. Enter an appropriate message that explains why the validation failed in the ValidationText field.
-![sitecore_template_validationtext_field](/assets/images/2012-06-12-limit-selected-items-on-sitecore-multilist-field/sitecore_template_validationtext_field.png)
+![sitecore_template_validationtext_field](./sitecore_template_validationtext_field.png)

src/posts/2012/10/05/retrieve-dynamic-module-choice-field-value-options-in-sitefinity.md

@@ -13,7 +13,7 @@ As with all software though, you will inevitably run into things you can’t do
 ## Problem
 My problem was this: how do I retrieve the available options for a Choices field in a dynamic module (built with the Module Builder). Honestly, I’m not sure it really matters. That is, I don’t think Sitefinity validates the value of a Choices field against what is technically a “valid” option. I think I read somewhere that it can store any option. However, I wanted to present a drop-down to users that had values that were essentially controlled by the available choices for this field. Here’s the dialog I’m talking about:
 
-![Choices field choice options](/assets/images/2012-10-05-retrieve-dynamic-module-choice-field-value-options-in-sitefinity/choices_dialog.png)
+![Choices field choice options](./choices_dialog.png)
 
 ## Solution
 Finding a way to retrieve this options through the Sitefinity API (which, in all other respects I’ve investigated so far is really good) was impossible. I started decompiling Sitefinity DLLs to see how it was done and still didn’t really get anywhere. All I could see was the choices being picked up from a config file.

src/posts/2012/10/19/indexing-taxonomy-fields-for-search-in-sitefinity-51.md

@@ -16,7 +16,7 @@ It took me about 13 hours of research to figure out what to do and then just abo
 
 When you create a search index in Sitefinity’s back-end, you can add a comma-separated list of extra fields to index. Sitefinity indexes a standard set (like Title). But, if you create custom dynamic modules with other fields you want to index you have to add them in this Additional Fields box. Here here:
 
-![Additional Fields](/assets/images/2012-10-19-indexing-taxonomy-fields-for-search-in-sitefinity-51/addtionalfields.png)
+![Additional Fields](./addtionalfields.png)
 
 Looking through the de-compiled code for Sitefinity’s SearchModule, I found that it registered a special outbound pipe that updates the Lucene indexes (not directly, but through Sitefinity’s abstraction, it appears) when you publish an item. It also registered various Translator classes with PipeTranslatorFactory.RegisterTranslator. Digging through the code in that SearchIndexOutboundPipe and the various translator classes it registered, I finally found that when the SearchIndexOutboundPipe runs, it reads that comma-separated list of additional fields from your index and ties them to the ConcatenationTranslator through some type of mapping. It looked like these translators were being used by the SearchModule to translate content values into index-able values for the Lucene indexing system.
 

src/posts/2014/05/21/create-a-list-selector-field-in-a-widget-designer-in-sitefinity-6-2.md

@@ -96,38 +96,38 @@ public ActionResult Index()
 #### Step 2: Create widget designer/public
 Once your widget is created, you can create your widget designer.  Using Thunder, create a widget designer for an existing widget. Name your widget designer.  I use the name of the widget and append "Designer".
 
-![FAQItemDesigner widget designer naming](/assets/images/create-a-list-selector-field-in-a-widget-designer-in-sitefinity-6-2/widget-designer-naming.png)
+![FAQItemDesigner widget designer naming](./widget-designer-naming.png)
 
 Click "Next" on the next screen. Choose your FAQItemController from the list on the next screen.
 
 ##### Step 2.1: Choose widget designer fields
 Next, choose the List property from your controller and set it up as follows.  Especially note two things.  First, choose the DynamicContentSelector.  Second, update the "Select the content type for the selector" to 'Telerik.Sitefinity.Lists.Model.List'.  Click on "Add".
 
-![Create a widget designer](/assets/images/create-a-list-selector-field-in-a-widget-designer-in-sitefinity-6-2/widget-designer-fields1.png)
+![Create a widget designer](./widget-designer-fields1.png)
 
 ##### Step 2.2: Update generated widget designer files
 In the generated .ascx file, update the 'ServiceUrl' property on the FlatSelector control to '/Sitefinity/Services/Lists/ListService.svc/?managerType=&providerName=&itemType=Telerik.Sitefinity.Lists.Model.List&provider=&sortExpression=LastModified%20DESC&skip=0&take=50'.
 
-![Service URL 1](/assets/images/create-a-list-selector-field-in-a-widget-designer-in-sitefinity-6-2/widget-designer-serviceurl1.png)
+![Service URL 1](./widget-designer-serviceurl1.png)
 
 In the generated .cs file, remove line 135 that sets the ConstantFilter property to 'Visible=true'.
 
-![FAQItemDesigner remove line 135](/assets/images/create-a-list-selector-field-in-a-widget-designer-in-sitefinity-6-2/widget-designer-removeline135.png)
+![FAQItemDesigner remove line 135](./widget-designer-removeline135.png)
 
 Finally, in the generated .js file, change the property that is used as the value of the selected list from 'OriginalContentId' to 'Id'.  This code can be found in the '_ListDoneSelecting' method.
 
-![FAQItemDesigner update js file](/assets/images/create-a-list-selector-field-in-a-widget-designer-in-sitefinity-6-2/widget-designer-changejsfile.png)
+![FAQItemDesigner update js file](./widget-designer-changejsfile.png)
 
 At this point, you should be done!  Build your project, plop your new widget on a page and test it out!  Here's what mine looks like.
 
 The edit dialog:
-![FAQItemDesigner edit screen](/assets/images/create-a-list-selector-field-in-a-widget-designer-in-sitefinity-6-2/widget-designer-editscreen.png)
+![FAQItemDesigner edit screen](./widget-designer-editscreen.png)
 
 The list select screen:
-![FAQItemDesigner select screen](/assets/images/create-a-list-selector-field-in-a-widget-designer-in-sitefinity-6-2/widget-designer-selectscreen.png)
+![FAQItemDesigner select screen](./widget-designer-selectscreen.png)
 
 The selected item screen:
-![FAQItemDesigner selected screen](/assets/images/create-a-list-selector-field-in-a-widget-designer-in-sitefinity-6-2/widget-designer-selectedscreen.png)
+![FAQItemDesigner selected screen](./widget-designer-selectedscreen.png)
 
 
 [sf-article]: http://www.sitefinity.com/documentation/documentationarticles/change-your-dynamic-content-selector-to-choose-from-generic-content