2023年06月23日（金）子ブログ作成時便利機能備忘録

子ブログ作成時のPC/SPのメインビジュアル出しわけ

1.画像出力のカスタムフィールドを作成

カスタムフィールドで、入力用・出力用ソースを作成。

入力用コード(参考）

	<tr>
    <th>スマホのMV</th>
    <td class="js-img_resize_cf">
      <!-- BEGIN_IF [{spMein@path}/nem] -->
      <img src="%{ARCHIVES_DIR}{spMein@path}" class="acms-admin-img-responsive js-img_resize_preview" alt="{spMein@alt}" />
      <input type="hidden" name="spMein@old" value="{spMein@path}" />
      <div class="acms-admin-form-checkbox">
        <input type="checkbox" name="spMein@edit" value="delete" id="input-checkbox-spMein@edit" />
        <label for="input-checkbox-spMein@edit">
          <i class="acms-admin-ico-checkbox"></i>削除</label>
      </div>
      <!-- ELSE -->
      <img src="%{ARCHIVES_DIR}{spMein@path}" class="acms-admin-img-responsive js-img_resize_preview" style="display:none" />
      <!-- END_IF -->
      <input type="file" name="spMein" size="20" class="js-img_resize_input" />
      <br/>
      <input type="hidden" name="field[]" value="spMein" />
      <input type="hidden" name="spMein:extension" value="image" />
      <input type="hidden" name="spMein@filename" value="" />
    </td>
  </tr>

出力用コード

出力用コードは、出しわけの際は、以下を使うといい。
hoge_img@path の箇所だけ、入力用と同じ変数を使用すれば、ちゃんと出力される。

		<tr>
		  <td>
			 <div class="main_img">
			 <picture>
				<source media="(min-width: 479px)" srcset="%{ARCHIVES_DIR}{hoge_img@path}" /> 
			<img src="%{ARCHIVES_DIR}{hoge_img_SP@path}"  alt="{hoge_img_SP@path@alt}" />
			  </picture>
			 </div>		  
		  </td>
		</tr>

POINT

a-blog cmsの記事で、PC/SPの出しわけ方法が解説されている

以下、リンクがあります。

参考サイトを見る