The Snappy Snippets team is pleased to announce the release of the Image browser gallery module for both free and pro plan accounts.

The Image browser gallery module allows users to select an image that can be inserted into the WYSIWYG editor from a designated folder on a website’s FTP space.

In addition to being able to select images from a specific folder, the ability to delete and upload new images to the configured images folder can be applied intuitively by a designer.

• Switching the image browser gallery module on/off on a website level (switched off by default when a new website is configured)
• Enable or disable the ability for editors to upload new images to the website’s configured images folder.
• Enable or disable the ability for editors to delete images from the website’s configured images folder.
• Specify allowed image file types that can be uploaded to the website’s configured images folder.
• To optimize your web pages loading times, limit the maximum image file size that can be allowed to be uploaded to the website’s configured images folder (defaults to 1 MB).

The image browser gallery module is not turned on by default; an account administrator is required to explicitly enable the module through the selected websites administration panel. Steps for enabling the Image browser gallery

• First and foremost, it is considered a best practise to create a designated folder within your website’s index page folder, which will eventually contain all user uploaded images. You may name this folder "snappysnippets_images"
• Select the website you wish to configure in the list of websites on the right hand pane
• Select the option "Configure image gallery option"
  
  
• You are presented with a form that allows you to enable the Image browser module, browse to your designated images folder and click on "Select folder"
  
  
• When the steps above are completed, an image gallery button option is displayed within the WYSIWYG control, select or place your cursor within the editor where you wish to insert your image, and click the button.
  
  
• All images from the configured images folder are then displayed within the gallery; select the desired image to insert.

In not so distant future, we will look into

• Support for full screen mode, to enable editors to have a wider view of images
• Linking the images to the image editor module for image resizing, rotation, and cropping.

We hope you enjoy using this new image gallery module

The SnappySnippets team is pleased to announce the new Remote content editor feature.

The remote content editor enables pro account subscribers to modify a web page source code from within the editor itself.

A very popular feature request from our users has been the ability to add editable regions to pages from within the CMS itself, and today release this new premium module. It has to be noted that the editor is not built to be a fully fledged text editor, and does not intend to replace Dreamweaver or any other text editor on the market.

We have intentionally striped the remote code editor down to only support functionality that we think will make it easier for you to make quick edits to your page content. It also does not currently support our version control or the check-in/check-out control. We intend to integrate these modules at a not too distant future.

• Configure your web page to become editable within SnappySnippets. If the page happens to be a non-content file such as a css or JavaScript file, you can have it disabled within the CMS portal so that it is not listed on your clients list of available pages to edit.
• Select the file and click on the edit file code button

• Syntax highlighting: We currently support syntax highlighting for css, html, php, javascript and xml files. We are looking to add support for other file types in the future.
• Search, un-do, re-do: Search for phrases within your file, we have purposely left out a search and replace feature, if we can’t trust it 100%, then we should not let you!
• Font size: Set the font size for the code
• Font style: Use a different font style
• Code wrap: toggle wrapping on display
• Remove syntax highlighting: For the note pad loving developers, you can turn off syntax highlighting so that the file code is rendered in a plain text area.

We hope that this new feature makes it easier for you to work within SnappySnippets.

We have just re-designed the website for SnappySnippets. The new designed pages now feature the new pricing plan breakdown page and an in-dept step by step guide as to how SnappySnippets works.

We hope that the new information on the pricing plan page helps clarify the two simple subscription options.

We will also start working on a new version for documentation files. As pointed out by some of you, some new features on the CMS such as remote password reminder forms, Image editor and designer to editor ticketing module are yet to be documented. We are currently working hard on this.

We are pleased to announce the new remote password reminder form feature that we have just released for our Pro subscribers.

As a pro subscriber, in addition to been able to create a login page that enables your clients to sign in from your website, you can now create your password reminder form which will send the password to an account via email.

A sample password reminder form is HTML is listed below:

		 <form method="post" action="http://www.snappysnippets.com/reminder/default.aspx">
			 
			 
			 

			 
		 </form>
   

You can read more about the password reminder feature form the documentation section

Over the last month, we have been working on a new and exciting premium feature that will enable users to edit images with a proper image editor.

It's has been a hell of a rollercoaster ride trying to get the image editor into production. Our first prototype had major issues with the speed of rendering the image on IE. Out went that one and the dev team decided to take a new approach, this time developing and testing primarily within IE, as developers, we all know how scrupulously painful that can be, unfortunately it was the only way we could guarantee that we did not commit too much development time and effort into prototype that would have to be scrapped yet again.

The second prototype performed relatively well, speed wise within IE 7 and was even surprisingly snappy in IE8. The only gripe we had was with IE 8's dynamic positioning of absolute elements, it just does not like repositioning fixed elements once it has been rendered. We hacked away, back and forth and after a few more days, we were able to get a satisfactory result.

Eventually, we were able incorporate the prototype into the portal, fine-tune it and test with various image sizes, types and formats.

As of this release, when an image tag matches a snippet definition, it will attempt to use the image Editor as opposed to a WYSIWYG to modify the image. The image editor can be used to modify the image if:

• It goes without saying; a src attribute is specified.
• The src value has to be relative to your website URL. Hence if your website address is www.websitename.com and you store an image called family_pet.jpg in a folder called “images", the recommended src attribute should be “/images/family_pet.jpg". You may also specify an absolute URL path of http://www.websitename.com/images/family_pet.jpg
• It is recommended that you specify an alternative (alt) value for the image
• It is also recommended that you specify an image “width" and “height" value within the image tag, for precise image preview rendering.

• Upload a new image to replace the current image
• Modify a current image by
  Cropping it
  Rotating it
  Enlarge or reduce it's dimensions
• You can also rename a newly uploaded image or a modified image.

We do appreciate that some users would haply rather use the WYSIWYG editor to edit images. Also there might be times when an image may not be accessible due to in-sufficient access rights on your FTP space. Hence, we have still provided the option to edit an image with the configured WYSIWYG rather than the image editor.

A new basic editor has now been deployed on the latest build of the portal. A popular demand amongst designers was the ability to automatically use a basic editor as opposed to a rich text editor when editable content within HTML tags such as <h1>, <h2> etc are parsed.

Hence, from now on, editors would be presented with a Text area editable regions are detected within such tags.

Take for example the following HTML fragment.

Welcome to our site

Please browse through our site

We are also working on a configurable option on a website level which would allow Designers to turn this feature off if it’s not needed.

SnappySnippets has now been in public beta for the past 6 weeks now and overall, feedback has been very positive. I would like to take this opportunity to thank everyone who went through the closed beta stage programme for helping us further shape the direction of the service.

One of the few features that many of you have requested is a built-in coherent support ticket module within the portal, which will enable your editors to raise issues that they need assistance with.

A few designers and developers pointed out that the current support mechanism is slightly confusing for two main reasons

With the new ticketing system which will be put in place on the next build scheduled for the 22nd of April, your editors are now able to raise a support issue within the portal, and an email is sent to the editor’s designer/developer alerting him/her of the new ticket status. This process creates a forum thread-like discussion between you and the editor who raised the ticket. We would also be looking to update the documentation for this new functionality.

As a designer, you may then add comments to the ticket update the status or request more feedback.

It is worth noting that this is a very simple but effective ticketing system, the idea, as with all other modules within the Editor is to keep it simple and straight forward, hence you won’t be seeing many advanced bug tracking features on it.

Here are some of the features of the new ticketing Module

New SnappySnippets editor to designer Support module

Please not that this module does not currently support ticket raised by designers for the attention of SnappySnippet’s technical support group.

Happy Snippeting

One of the fundamental features of SnappySnippet is the ability to define your client’s editable content regions within an HTML document in a flexible way. SnappySnippet niether restricts you to using a specific CSS class nor make you upgrade to a premium account for you to use this feature.

One of the fundamental features of SnappySnippet is the ability to define your client’s editable content regions within an HTML document in a flexible way. SnappySnippet niether restricts you to using a specific CSS class nor make you upgrade to a premium account for you to use this feature.

At the design stages of SnappySnippets, we were very wary of the notion of over-engineering this feature, after all, as designers and to some extent developers, do we really want to start messing around with XPath queries?

As with most advanced features within SnappySnippets, they are there purely for your convenience should you need to use them at any stage. As a default, we have assumed that most designers will use class="snippet" within their document which is in my opinion, the most semantically correct way to tag up your HTML. However, believe it or not, by the time you start to configure your 3rd or 4th web site for editing, a simple class="snippet" identifier may not cut it.

This tutorial features many of the ways in which you can define editable regions within your HTML document, and will eventually replace the XPath section within the designers documentation guide.

I'll try not to run the risk of boring you with too much technical jargon, basically, The SnappySnippets engine uses XPath v1.0 to traverse your HTML document. When you configure a website within SnappySnippets, the field titled X-Path for snippets with a default value of //*[@class="snippet"] represents the XPath query with which SnappySnippet will use to retrieve your editable content regions.

Intro: The default and probably the most common way to configure your editable regions within SnappySnippets

In your HTML documents: assign a class of snippet to your HTML elements

In your SnappySnippet website configuration form, use the XPath: //*[@class="snippet"]

Sample HTML match:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Welcome to Total Design</title>
        <meta name="keywords" content="total,designs" />
        <meta name="description" content="total design for your web pages" />
    </head>
    <body>
        <div class="snippet" title="Our mission intro">
            Our mission is to provide you with an expertise service ...
        </div>
        <div class="snippet" title="Our customer promise">
            Our Customer Promise sets out the standards of service...
        </div>
    </body>
</html>

NB : It is worth noting at this point, as mentioned earlier in this post, you do not have to use "snippet" as your content region class identifier. Assuming you wanted to use a class of "totaldesigns", you can simply follow the steps below:

In your HTML documents: assign a class of totaldesigns to your HTML elements

In your SnappySnippet website configuration form, use the XPath: //*[@class="totaldesigns"]

Sample HTML match:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Welcome to Total Design</title>
        <meta name="keywords" content="total,designs" />
        <meta name="description" content="total design for your web pages" />
    </head>
    <body>
        <div class="totaldesigns" title="Our mission intro">
            Our mission is to provide you with an expertise service ...
        </div>
        <div class="totaldesigns" title="Our customer promise">
            Our Customer Promise sets out the standards of service...
        </div>
    </body>
</html>

Intro: This particular method is mostly useful in a scenario when your editor has medium to advanced HTML skills and he or she is unlikely to make a dog's meal out of your design template. You basically want to give the editor editing control over a chunk of HTML as opposed to mini snippets within the document.

In your HTML documents: assign an id of snippet to your HTML element

NB: Although SnappySnippets will happily parse your document if you specify more tham one id attribute with the same attribute value within the same HTML document, this is semantically in-correct and will cause your web page to fail the W3C markup validation

In your SnappySnippet website configuration form, use the XPath: //*[@id="snippet"]

Sample HTML match:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Welcome to Total Design</title>
        <meta name="keywords" content="total,designs" />
        <meta name="description" content="total design for your web pages" />
    </head>
    <body>
        <div id="snippet" title="Our mission intro">
            At total designs, our mission is to provide you with the Internet 
            tools and services that will grow your business. The core of our 
            operation is the offering of technical solutions and Internet 
            marketing consultation, along with the graphic design and 
            writing expertise that will elevate your website to a new level
            of effectiveness and functionality.
            <br />
            At all stages of your web solution - flexibility is our hallmark. If you 
            have your own writers, designers, or marketing personnel with which you 
            wish us to collaborate, we are happy to develop a project plan that will 
            meet your needs and exceed your expectations.
        </div>
    </body>
</html>

Intro: You wish to just make ANY HTML element that has a specific attribute editable, for the sake of this argument, say "title"

In your HTML documents: assign an attribute of title to your HTML element

In your SnappySnippet website configuration form, use the XPath: //*[@title]

Sample HTML match:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Welcome to Total Design</title>
        <meta name="keywords" content="total,designs" />
        <meta name="description" content="total design for your web pages" />
    </head>
    <body>
        <div title="Our mission intro">
            At total designs, our mission is to provide you .....
        </div> 
        <p title="How can we help you">
            We have many ways we can help you depending on your problem. 
            Find the description below that matches your current.....
        </p> 
    </body>
</html>

Intro: You wish to make all HTML elements of a particular element type editable, for the sake of this argument, all <p> tags

In your HTML documents: ensure that you have at least one <p> HTML node

In your SnappySnippet website configuration form, use the XPath: //p

Sample HTML match:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Welcome to Total Design</title>
        <meta name="keywords" content="total,designs" />
        <meta name="description" content="total design for your web pages" />
    </head>
    <body>
        <p title="Our mission intro">
            At total designs, our mission is to provide you .....
        </div> 
        <p title="How can we help you">
            We have many ways we can help you depending on your problem. 
            Find the description below that matches your current.....
        </p> 
    </body>
</html>

Intro: You wish to make the nth HTML elements of a particular element type editable, for the sake of this argument, the very first <div> element within the HTML document

In your HTML documents: ensure that you have at least one <div> HTML node

In your SnappySnippet website configuration form, use the XPath: //div[1]

Sample HTML match:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Welcome to Total Design</title>
        <meta name="keywords" content="total,designs" />
        <meta name="description" content="total design for your web pages" />
    </head>
    <body>
        <div title="Our mission intro">
            This content will become editable .....
        </div> 
        <div title="How can we help you">
            This content will NOT become editable
        </p> 
    </body>
</html>

Intro: I have been recieving a lot of enquiries with regards to this method and it seems to be a very common scenario. You already have a class assigned to an HTML element, however you wish to make the element editable.

In your HTML documents: Append your class attribute value to your already existing class eg class="bodyText snippet"

In your SnappySnippet website configuration form, use the XPath: //*[contains(@class,"snippet")]

Sample HTML match:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Welcome to Total Design</title>
        <meta name="keywords" content="total,designs" />
        <meta name="description" content="total design for your web pages" />
    </head>
    <body>
        <div class="missionStatement snippet" title="Our mission intro">
             At total designs, our mission is to provide you .....
        </div> 
        <div class="helpStatement snippet" title="How can we help you">
            We have many ways we can help you depending on your problem. 
            Find the description below that matches your current.....
        </p> 
    </body>
</html>

Intro: Using custom attributes, again this is not recommended as introducing custom attributes within your HTML document makes it anything else but HTML.

In your HTML documents: Append your custom attribute and it's value eg editable="true"

In your SnappySnippet website configuration form, use the XPath: //*[@editable="true"]

Sample HTML match:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Welcome to Total Design</title>
        <meta name="keywords" content="total,designs" />
        <meta name="description" content="total design for your web pages" />
    </head>
    <body>
        <div editable="true" title="Our mission intro">
              This content will become editable .....
        </div> 
        <div editable="false" title="How can we help you">
             This content will NOT become editable .....
        </p> 
    </body>
</html>

I’ve been collecting user feedback on SnappySnippets for the past few days and overall, generally feedback has been very positive. I received an interesting comment form an ex-colleague of mine who was participating in the closed beta testing stages of the service who asked me why I regard SnappySnippets as a Content Management System; after all, its main functionality is to enable end users to edit defined sections within their web pages. In his opinion, this basic functionality does not warrant the Tag name "CMS" per se

While the term CMS is most synonymous to the idea of being able to define templates, assign them to pages and drop components within it with more advanced features such as workflows, content authoring and such, the basics of the operation I find is still the creation and manipulation of content that are visible to the end user.

A lot of thought went into the process of writing the site content for SnappySnippets.com and one of the key phrases we thought about emphasizing on was “snippet management system” as we also did feel at that time that it was not entirely a content management system. 

After doing a bit of research and goggling, I cam across this article by Greg Johnson who simply categorises such systems as "Remote content editors" (RCE). I personally think this is a closer descriptor of the service compared to content management systems as it emphasizes does what it says on the tin; "a system that enables you to edit your remote content".

Just before I got on the phone to the Marketing Guru I get free advice from to ask him whether we should start branding the service as an RCE, I paused for a minute and thought to myself, as SnappySnippets.com gives you both the ability to clone pages and even edit the entire documents structure, one can argue that it does have the basics functionality of a fully fledged CMS, it is to a designer what a designer wishes for a simple CMS to be, it incorporates the features of remote content editors whilst giving you more functionality if required.

In the next few weeks, I will be publishing a few articles regarding customising your editable regions on a web page, which elaborates on various techniques that you may use to define what part of your web page is editable.

Happy Snippeting

The team at SnappySnippets are pleased to announce that the first stages of the closed beta testing has commenced. So far we have had very few issues, which is always a good sign. We are targeting 50 core designers to launch on the portal and so far, we have had over 20 people sign up. This is great given that we are yet to broadcast the release of the service to major technology blogs.

If you are interested in participating in the closed beta testing program, you can get an invite code by making a request on the invite page.

In addition to issuing beta invites to access the portal, we can also create an FTP account space for you to test with should you require one. A demonstration site would also be pre-installed within the FTP space to get you started quickly.

What we intend to achieve within the next few weeks in the beta testing program are your suggestions and recommendations. We want the system to work for you and we would like to hear about any issues of features that you would like for us to consider including within the roadmap of the service.

All approved beta testers will be given a free premium account for at least 2 years commencing from the commercial launch date of the service.  

Happy Snippeting