[a-blog cms]一つのユニットで、PCとスマホの画像出しわけをする

<!-- BEGIN unit#media_swap -->
<!-- media_swap -->
<div class="column-media-{align}{display_size_class}"{display_size}[raw]><!-- BEGIN type#image -->
	<!-- BEGIN link#front -->
	<a href="{url}"{viewer}[raw]><!-- END link#front -->
		<picture>
			<source media="(min-width: 768px)"
			srcset="%{HTTP_ROOT}{path}">
			<source media="(min-width: 320px)"
			srcset="%{HTTP_ROOT}{path}[filenameExtend('-sp')]">
			<img src="%{HTTP_ROOT}{path}" alt="{alt}" width="{x}">
		</picture><!-- BEGIN link#rear -->
	</a><!-- END link#rear --><!-- BEGIN_IF [{caption}[delnl]/nem] -->
	<p class="caption">{caption}[nl2br]</p><!-- END_IF --><!-- BEGIN text:veil -->
	<p class="">{text}</p><!-- END text:veil -->
	<!-- END type#image -->
</div>
<!-- END unit#media_swap -->

    public function filenameExtend($filepath, $extend)
    {
		$pathinfo = pathinfo($filepath);
		$dir = $pathinfo["dirname"];
		$name = $pathinfo["filename"];
		$extention = $pathinfo["extension"];
		return $dir."/".$name.$extend[0].".".$extention;
    }

メディアユニット
メディアユニットとはメディア管理ページでアップロードした画像やPDFを挿入するためのユニットです。（中略）エントリー編集画面のユニット追加ボタンからメディアを選択すれば画像やPDFを挿入できます。

ユニットの拡張機能
ユニットの拡張機能をつかえば、デフォルトで出力されるエントリーのテキストユニットや画像ユニットに足りないHTMLやCSSを補うことが出来ます。

<!-- BEGIN unit#media -->
@section(media-unit)
<!-- media -->
<div class="column-media-{align}{display_size_class}"{display_size}[raw]><!-- BEGIN type#image -->
	<!-- BEGIN link#front -->
	<a href="{url}"{viewer}[raw]><!-- END link#front -->
		<img class="columnImage" src="%{HTTP_ROOT}{path}" alt="{alt}" width="{x}"><!-- BEGIN link#rear -->
	</a><!-- END link#rear --><!-- BEGIN_IF [{caption}[delnl]/nem] -->
	<p class="caption">{caption}[nl2br]</p><!-- END_IF --><!-- BEGIN text:veil -->
	<p class="">{text}</p><!-- END text:veil -->

	<!-- END type#image --><!-- BEGIN type#file -->

	<a href="%{HTTP_ROOT}{path}"><!-- BEGIN_IF [{thumbnail}/nem/] -->
	<img class="columnIcon" src="%{HTTP_ARCHIVES_DIR}{thumbnail}" alt="ファイルを開く" width="{x}" height="{y}"><!-- ELSE -->
	<img class="columnIcon" src="%{HTTP_ROOT}{icon}" alt="ファイルを開く" width="{x}" height="{y}"><!-- END_IF -->
	</a><!-- BEGIN_IF [{caption}[delnl]/nem] -->
	<p class="caption">{caption}[nl2br]</p><!-- END_IF --><!-- BEGIN text:veil -->
	<p class="">{text}</p><!-- END text:veil -->
	<!-- END type#file -->
</div>
@endsection
<!-- END unit#media -->

<!-- BEGIN unit#media_swap -->
<!-- media_swap -->
<div class="column-media-{align}{display_size_class}"{display_size}[raw]><!-- BEGIN type#image -->
	<!-- BEGIN link#front -->
	<a href="{url}"{viewer}[raw]><!-- END link#front -->
		<picture>
			<source media="(min-width: 768px)"
			srcset="%{HTTP_ROOT}{path}">
			<source media="(min-width: 320px)"
			srcset="%{HTTP_ROOT}{path}">
			<img src="%{HTTP_ROOT}{path}" alt="{alt}" width="{x}">
		</picture><!-- BEGIN link#rear -->
	</a><!-- END link#rear --><!-- BEGIN_IF [{caption}[delnl]/nem] -->
	<p class="caption">{caption}[nl2br]</p><!-- END_IF --><!-- BEGIN text:veil -->
	<p class="">{text}</p><!-- END text:veil -->
	<!-- END type#image -->
</div>
<!-- END unit#media_swap -->

校正オプション（https://developer.a-blogcms.jp/document/reference/proofreading.html）
{var}[option]というように、変数の後に[]を記述して校正オプションを使用します。また、オプションはパイプ ( | ) を使用して複数指定することもできます。

校正オプションの拡張について
Acms\Custom\Correctorクラス（extension/acms/Corrector.php）にメソッドを定義することで、校正オプションの拡張が可能です。Acms\Custom\Correctorクラスが記述される、extension/acms/Corrector.phpは、アップデート時の上書き対象ではないので、自由に拡張してご利用いただけます。

    public function filenameExtend($filepath, $extend)
    {
		$pathinfo = pathinfo($filepath);
		$dir = $pathinfo["dirname"];
		$name = $pathinfo["filename"];
		$extention = $pathinfo["extension"];
		return $dir."/".$name.$extend[0].".".$extention;
    }

<!-- BEGIN unit#media_swap -->
<!-- media_swap -->
<div class="column-media-{align}{display_size_class}"{display_size}[raw]><!-- BEGIN type#image -->
	<!-- BEGIN link#front -->
	<a href="{url}"{viewer}[raw]><!-- END link#front -->
		<picture>
			<source media="(min-width: 768px)"
			srcset="%{HTTP_ROOT}{path}">
			<source media="(min-width: 320px)"
			srcset="%{HTTP_ROOT}{path}[filenameExtend('-sp')]">
			<img src="%{HTTP_ROOT}{path}" alt="{alt}" width="{x}">
		</picture><!-- BEGIN link#rear -->
	</a><!-- END link#rear --><!-- BEGIN_IF [{caption}[delnl]/nem] -->
	<p class="caption">{caption}[nl2br]</p><!-- END_IF --><!-- BEGIN text:veil -->
	<p class="">{text}</p><!-- END text:veil -->
	<!-- END type#image -->
</div>
<!-- END unit#media_swap -->