Another Important topic that we would like to add in Our SharePoint 2013 Design Manager Tutorials is about How to use “Snippet gallery” and how to add Snippets for SharePoint Controls in Layout Pages and Master Pages using the new Design manager.
The following example shows How to add Snippets from Snippet Gallery in Layout Pages.For adding Snippets to Master Pages simply navigate to Design Manager -> “Edit Master Pages” and then select the master page you need to add the Snippets in.
How to Edit Page Layout
In SharePoint 2013 for every Layout page two files – .aspx and html are Created by default.For making Changes to the Custom Layout, you need to download the html file of the layout page and make Changes to it. The modified html file is then saved back to the MasterPage Page gallery and the corresponding .aspx file gets updated automatically.
In our case below are two files created.
To work with these files you can either navigate to the Master Page gallery of your site or you can download them by Mapping the MasterPage Gallery as a Netwrok drive .See the Step-by-Step tutorial on How to Map MasterPage Gallery as a Netwrok drive.
Once your download a copy of “Custom Page Layout.html” file( using ‘Download a Copy’ option in callup menu \ecb menu) you can simply add\remove the desired code snippets from the file and save it.
Lets look at an example of adding a SharePoint field Control copied from the new Snippet Gallery feature into our Custom Layout page.
By Definition –Snippet Gallery is a feature that lets you add SharePoint Components to your HTML or Master Page Design file. Users can select a component like Navigation or Search box from the Gallery and configure its properties. They can then copy the HTML snippet that’s generated and add it to the HTML design file\Master page. After you add SharePoint components to your HTML files, you can use CSS to fully brand them
To Open a Master Page in Snippet Gallery select the Master Page from Design Manager -> “Edit Master Pages”.
When you click on the layout you will be taken to the Preview page of your layout.Click on “Snippets” top right corner.See below
Once you select the Field, a preview of the Field and the corresponding HTML Code gets displayed. Copy the HMTL code for this field to clipboard and add it to our Layout Page’s HTML. Open the Layout Page in an editor of your choice and paste the Copied Code in it.
Next Create a Page using the new Custom Layout (See Steps Here) or edit the existing Layout for a page.
See Complete Complete SharePoint 2013 Design Manager Tutorials