Blog

If you're reading our blog, hopefully you're aware by now that we're a different breed of CMS. To add to the list of reasons why is this: we listen to our designers. Vae is an exceptional platform, but we aggressively seek new ways we can make it better, faster, and easier to work with. We've already added several features in response to the needs of our designers (see also: Blog Post Scheduling).

So today, we're reaching out and asking you to tell us what you think about Vae. Is something slowing you down? Is there a problem you're trying to solve and you don't know how? In return, you can expect we'll work with you to find a solution if one exists already (more often than not this is the case), or we'll log it as a feature request and let you know how long you can expect to wait before it's available.

So send us an email, or contact your account manager. We look forward to hearing from you!

Vae's Checkbox Structure is a great way to store boolean values. Checkboxes hold a yes-or-no value which you can use with the <v:if> tag to perform conditional statements in your code. As an example, we'll add one to our Action Verb Record store, and perform a basic if-statement with it.

Here we are adding a new Checkbox Structure to our Artists Collection in the Backstage:

Once you've added your Checkbox, you can set it's value under the Content tab. For our example, we'll check the Checkbox under the Collection for 'The Sheets':

Great, now for each Artist we can perform an if statement to see if this Checkbox is checked, and it will only be true for 'The Sheets'. We'll do this on the page where we list our Artists, and we'll modify the Artists listing if they have the 'Has albums on sale' Checkbox checked.

<h3><v:a><v:text path="artist_name"/><v:if path="has_albums_on_sale"> -- Album Sale Going On Now!</v:if></v:a></h3>

Great, now 'The Sheets' appear with the modified title:

...and today's mini-tutorial is complete! Please contact your account manager, or email us, if you'd like to see more examples on how to use the Checkbox Structure.

Vae's AJAX attribute can save you time and make your code more readable. As always, checkout our Documentation and Integration Center for more videos and tutorials.

Vae recently began including integrated support for Subversion.  This is awesome for our designers who code websites in teams or anyone who wants to keep better track of their source code.

Subversion is a source control tool that makes it possible to rollback your code to previous versions, or branch and merge your code with the code of your fellow designers. We recommend using source control even if you're coding independently; checking your code in often to a source control system enables you to rollback to a previous version if you ever need to. It also serves as a backup in the event that you accidentally make a big change to a file, or delete one altogether.

We do make full filesystem backups of your code automatically every six hours, but you don’t have control over this process like you do with Subversion. Additionally, recovering these backups requires contacting us, whereas rolling back to a previous revision in Subversion takes seconds.

To start using Subversion, make sure it’s installed on your machine. It comes standard on many operating systems, but it’s a free download if you’re without it.  Once you’ve got the software installed, navigate in your Vae site’s Backstage to the FTP/Subversion tab:

Copy the address to your repository. Next, make sure you've created a user under the Users tab in your Backstage with permissions set to allow the use of Subversion. You will use these two pieces of information to checkout our Subversion repository:

By default, all that exists in the repository is a configuration file called '__verb.yml'.  This file is important for the Vae Local Development environment; it provides the Local Development Environment with necessary information about your site.

You need to manually add the files you want to source control. Once you've downloaded them from your FTP server, use the 'svn add' command to mark them as needing to be added to your repository:

Next, it's time to check in:

Your files are now safely within source control! Just repeat the check in process once you've made edits to your files. To make your changes live, you'll need to deploy the latest revision in Subversion to your live site.

There are two ways to do this.  One way is to return to the FTP/Subversion tab of your site's Backstage. Click the 'Deploy Subversion Site to Live Site' button, and click 'Okay' on the dialogue box to push your revisions out to the site:

Alternatively, if you have the Vae Local Development Environment installed, you may simply type 'verb deploy' at the command line.

Use the Subversion manual if you're in need of further reference. We hope to see more of our designers utilizing this powerful service. Our account managers will be more than happy to assist you as you make the transition over to source control.

VaeML is Vae’s proprietary presentation language that designers can code right into their HTML and PHP files. Because Vae is a hosted solution, Vae automatically processes your VaeML into HTML readable by any browser.

However, as a web designer, you’re likely interested in exactly how this happens.

To find out how a specific VaeML tag translates into HTML, use our tag library documentation. On each tag’s documentation page, we always make a point to demonstrate how a given tag is rendered.

Our tags that are translated into a single HTML tag also accept any attributes their respective HTML tags can handle. For example, Vae’s <v:img> tag is capable of accepting any attributes that the HTML <img> tag can accept.  Whenever this is the case, we make this clear on the tag's documentation page.

While we do think VaeML is a pretty simple language to use, mistakes do happen. Today we'll cover a few things that even we stumble over sometimes. We might try to make this a reoccurring series as we notice new trends in our troubleshooting efforts. Remember, anytime you have a problem with your code, your account manager can help you find the culprit.

Remember What Context You're In

A common mistake early on is to try to specify a path to a Structure that doesn't exist, because you're in the wrong context. Say we have a collection called 'Artists' which contains Albums, Artist Bio, Artist Genre. Assuming Albums doesn't contain a Structure that's also called 'Artist Genre', this code won't work:

<v:collection path="Artists" filter_input="query">
 Here's the albums by <v:text path="artist" />:
 <v:collection path="albums">
  <v:text path="album_name" />
  <v:text path="artist_genre" />
 </v:collection>
</v:collection>

The problematic code is bolded. Since 'Artist Genre' is a Substructure of Artists and not Albums, this path is incorrect. To fix it, and grab the Artist Genre succesfully, we'd need to go up one level:

<v:text path="../artist_genre" />

Image Sizes Are Case Sensitive

Is the crop you setup in the Backstage not showing up on your site? One thing to check is that you spelled your Image Size correctly, and that you have the correct capitalization. The latter trips up a lot of people. Vae doesn't make Image Sizes all lowercase, nor replace spaces with underlines, as it does with xpaths. Instead, and Image Size called 'Big Square' should be used to like this:

<v:img path="about_us/photo_of_employees" image_size="Big Square" />

Don't Close Shortcut Tags

Shortcut tags aren't like other tags, in that they should not be closed (even self closed!). Here's a piece of code that would cause an error:

<div style="background: url(<v=/styles/background_image,480,360 />);"></div>

Instead, you should remove the self-closing '/':

<div style="background: url(<v=/styles/background_image,480,360>);"></div>

Here's a question that new designers sometimes ask when they begin using our documentation: what's the difference between a Simple Structure and a Superstructure?

Superstructures

The two Superstructures are the Collection and the Section. The difference between the two is that the Collection can hold multiple entries of data (think multiple rows in a database), while the Section only has one entry (think about a static text file). Superstructures are the only Structures that can exist on the top-level of your website and are used to organize your content. Superstructures can contain other Superstructures.

Simple Structures

Simple Structures are the Structures which actually hold data. Some Simple Structures include Text, Text Area, Checkbox, Date, File, and Video. Simple Structures always exist within a Superstructure.