WaveMakerで外部リンクつき画像を作成する方法


実現したいこと

ローコードSaaSプラットフォームのWaveMaker上で、画像をクリックすると外部リンクを開く設定をする。

以前にページの移動方法の記事で、WaveMaker上で写真ウェジェットなどで写真をクリックして外部サイトのリンクを開く設定ができないので外部リンクを開くことができるのAnchorウェジェットを使う必要があると説明しました。今回はそのAnchorウェジェットを使って実際に画像を外部リンクつき画像を作成する方法を記載したいと思います。

前記事:WaveMaker: ページの移動方法

例:

 

結論:

    • Anchorウェジェットのバックグラウンドのスタイルを設定する
    • Display Styleを画像に合わせて調節する

の二つになります。

実現方法:

1. Anchorウェジェットのバックグラウンドのスタイルを設定する

まず初めに、今まで同様にUI編集画面でAnchorウェジェットをドラッグアンドドロップします。

ドラッグアンドドロップしてきたAnchorウェジェットをクリックして画面右側のスタイル設定の画面をクリックし、スクロールしますと、Background Styleという項目が出てくると思います。

今回はテストですのでImageにはインターネット上に掲載されてる適当な画像のリンクをの載せておきます。パソコンにある画像ファイルをアップロードしたい場合は、Image入力欄の右にあるチェーンマークをクリックして表示される画面のResourceタブからアップロードすることができます

Repeat欄にはno-repeat、Attachment欄にはLocalと選択します。Size欄はバックグランドのサイズを指定できますので今回は100%としておきます。

 

画像ファイルをアップロードしたい場合:

2. Display Styleを画像に合わせて調節する
Background Styleが設定できましたら、同じ設定タブにあるDisplay Styleの項目のPaddingを変えていきます。今回は縦100px、横200pxの写真にしていきたいのでそれぞれ以下の写真のように指定します。

最後にクリックした時のリンク先(Hyperlink)の設定とTargetの値を_blankに設定して、プレビュー画面で、動作確認できたら完成です。

今回はテストですので、HyperlinkにはWaveMakerのホームページのリンクを開くように設定します。

プレビュー画面で確認:

Get notified on new marketing insights

Be the first to know about new B2B SaaS Marketing insights to build or refine your marketing function with the tools and knowledge of today’s industry.