A question in the textpattern forum prompted a more general interest in short-tags, Textpattern’s addition to its arsenal of tags available from version 4.7.+. The idea of short-tags is explained in the docs but it is basically adopts much of the functionality of smd_macro, which made it possible to encapsulate a set of instructions in a single tag which can be used in articles. To understand short-tags, it is helpful to know how the updated yield tag works.

This tip sheds some light on its basic usage. The code creates a container for audio-files which can then be embedded in articles.

First create a miscellaneous form and call it audio and paste in the following code.

<txp:if_yield name="title">
	<audio controls>
		<txp:if_yield name="m4a">
			<source src="/files/<txp:yield name="title" />.m4a" type="audio/mp4">
		</txp:if_yield>
		<txp:if_yield name="mp3">
			<source src="/files/<txp:yield name="title" />.mp3" type="audio/mpeg">
		</txp:if_yield>
		<txp:if_yield name="ogg">
			<source src="/files/<txp:yield name="title" />.ogg" type="audio/ogg">
		</txp:if_yield>
		<txp:if_yield name="wav">
			<source src="/files/<txp:yield name="title" />.wav" type="audio/wav">
		</txp:if_yield>
		Your browser does not support the audio element.
	</audio>
</txp:if_yield>

How it works

The new html5 audio tag, provides native playback of audio files in most modern browsers. This of course also depends on what audio extensions your computer supports. The audio tag allows you to provide the same audio file in several alternative file types from which the browser automatically determines the most suitable file to play.

The above code assumes that you use the same file name for the different encodings of the same audio file. The tag can be called in an article very simply inserting using <txp::audio title="your_title" m4a mp3 />.

A breakdown of this tag is self evident once the logic is understood. ie. The code will load the m4a and mp3 versions uploaded by the webmaster in the files directory whilst the yield tag is used to define the audio file’s name.

The final parsed html will look like:

<audio controls>
	<source src="/files/your_title.m4a" type="audio/mp4">
	<source src="/files/your_title.mp3" type="audio/mpeg">
</audio>

Happy listening!