[EC-CUBE4]トップ画面スライダー画像を管理画面から差し替える

環境

EC-CUBE4.0.2

やりたいこと

EC-CUBE4のトップ画面のスライダ画像を差し替えたい。

手順

• 画像を用意する
• 画像をアップロードする
• スライダ定義画像タグを編集する

画像を用意する

横:1090px 縦:463pxの画像を1枚以上用意します。

初期状態で利用されている画像ファイルはこれより大きいですが実際の表示はこれが最大のようです。
また、スマホ表示時でも同じ画像ファイルが縮小されて表示されます。

画像をアップロードする

用意した画像を「ファイル管理」機能でアップロードします。

任意の場所でよいのですが、以下は初期状態から存在する user_data / assets / imgの下にsliderディレクトリを作成して、slider01.png,slider02.pngという名前で配置した例です。

HTMLタグ定義

スライダ画像を定義しているタグを「ページ管理」機能で編集します。

管理サイト > コンテンツ管理 > ページ管理 > TOPページ で コードの108行目のmain_visualクラスが設定されたタグ内にアップロードした画像定義を反映します。

例えばファイル管理機能で画像をアップロードした場所がuser_data/assets/img/sliderで、表示したい画像が２枚、ファイル名がそれぞれ slider01.png , slider02.png とすると以下のような定義となります。

変更前

        <div class="main_visual">
            <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc01.jpg') }}"></div>
            <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc02.jpg') }}"></div>
            <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc03.jpg') }}"></div>
        </div>

変更後

        <div class="main_visual">
            <div class="item slick-slide"><img src="/html/user_data/assets/img/slider/slider01.png"></div>
            <div class="item slick-slide"><img src="/html/user_data/assets/img/slider/slider02.png"></div>
        </div>