How to create a view mode preview within the display suite module I am using Display Suite to create two new view modes within my D7 instance. They are:


Wide
Square


I can get them created and and added to the content creation form BUT I'd like to create a preview image for those two view modes to give the end user some type of visual of what they're selecting.

I see there are layout previews when a layout is chosen but not for view modes. Do i just need to create a new layout template for the view mode? if so where should these files live?

First time using this module.
View modes are a Drupal concept, and layouts (in this context) are specific to Display Suite. Selecting a preview image for a view mode (if it can be done) has got nothing to do with Display Suite. The preview images that Display Suite show is specific to the layouts that it offers.

In Display Suite, you can define your own custom layouts, and there are a few ways of doing so. Some modules add layouts as well. To investigate how a module does that, download Display Suite Bootstrap Layouts and have a look at the files. You will see the module file, wherein the layout is declared as such:

$layouts['bootstrap_12'] = array(
    'label' =&gt; t('Bootstrap One Column: 12'),
    'path' =&gt; $onecol . '/bootstrap_12',
    'regions' =&gt; array(
      'central' =&gt; t('Content'),
    ),
    'form' =&gt; TRUE,
    'image' =&gt; TRUE, // this tells it that there is an image for the layout
  );


Note the key 'image' is set to TRUE to indicate the presence of an layout image, which you will find in the sub folders. 

The template files that goes with this declaration is found in layouts -&gt; onecol -&gt; bootstrap_12 -&gt; bootstrap-12.tpl.php and looks like this:

&lt;&lt;?php print $layout_wrapper; print $layout_attributes; ?&gt; class="&lt;?php print $classes; ?&gt;"&gt;
  &lt;?php if (isset($title_suffix['contextual_links'])): ?&gt;
    &lt;?php print render($title_suffix['contextual_links']); ?&gt;
  &lt;?php endif; ?&gt;
  &lt;div class="row"&gt;
    &lt;&lt;?php print $central_wrapper; ?&gt; class="col-sm-12 &lt;?php print $central_classes; ?&gt;"&gt;
      &lt;?php print $central; ?&gt;
    &lt;/&lt;?php print $central_wrapper; ?&gt;&gt;
  &lt;/div&gt;
&lt;/&lt;?php print $layout_wrapper ?&gt;&gt;


&lt;!-- Needed to activate display suite support on forms --&gt;
&lt;?php if (!empty($drupal_render_children)): ?&gt;
  &lt;?php print $drupal_render_children ?&gt;
&lt;?php endif; ?&gt;


Here you can see how the central region defined in the module file is rendered within the template using a naming convention.

You can add layouts to this module directly if you want by following the convention above. But better would be to define them in your own theme folder so that you don't wipe out your changes during an upgrade.

You can do that manually or using drush, and the layout files will live in a subfolder 'ds_layouts' within your theme folder. The process is fully described in Adding custom layouts to your theme. It is really very easy to do, and well worth the effort.

So to come back to your question, in order to associate a preview image with a view mode, you could declare a new layout with a peview image that is used only for a specific view mode, thereby creating a one-to-one relationship between them.