web-dev-qa-db-ja.com

フラグリンクにカスタムアイコンまたはシンボルを追加する方法

Flag 、 Views 、セッション、および小さなカスタムコードを使用して、コマースサイトの「サンプルリクエスト」の実装に取り​​組んでいます。

アイコンまたはシンボルを追加して、表示しているアイテムにフラグが付けられたことをユーザーに通知します。

私はこれにどのように取り組むか正確にわかりません、おそらく Rules またはajaxによって変更される画像またはチェックボックスを表示する条件付きフィールドを追加すること、またはおそらくJavaScriptでより複雑なことを想像できますか？

フラグリンクがクリックされたときにチェックされるか、またはチェックされないチェックボックスを追加するか、クリックされたcss/htmlを変更してマークされていると識別されるようにするのと同じくらい簡単です。

とにかく、ここでのアドバイスに感謝しています。

7rulesflags
5
nizz0k

オプション1：フラグテキストの横に画像を表示する

CSSを使用して、テキストの左側にパディングを追加し、その中に背景画像を表示できます。これは、コミュニティドキュメントの テキストの横に画像を表示する方法 にも示されています。以下はその抜粋です（「ブックマーク」をフラグのマシン名に置き換えます）。

.flag-bookmarks a {
  padding-left: 20px;
}
.flag-bookmarks a.flag-action {
  background: url(images/i-dont-like-it.png) no-repeat left center;
}


.flag-bookmarks a.unflag-action {
  background: url(images/i-like-it.png) no-repeat left center;
}

（方法）詳細については フラグテーマガイド を参照してください。

  • CSSを使用したフラグリンクのテーマ設定 。フラグリンクを作成するHTMLの「マップ」を提供します。
  • テンプレートを使用したフラグリンクのテーマ設定 。これは、フラグ自体のフォルダー内にある「テーマ」フォルダー内のflag.tpl.phpファイルの使用方法を説明し、フラグのHTMLを生成するために使用されます。リンク。また、フラグ固有のflag--FLAGNAME.tpl.phpファイル（FLAGNAMEはフラグのマシン名）を使用して、さまざまなフラグに異なるテーマを設定する方法についても説明します。
  • テーマの例 。これには、いくつかの一般的なテーマタスクの解決策が含まれています。

オプション2：フラグリンクをボタンに変換する

次のCSS（そのリンクからの引用）を追加することにより、 フラグリンクをボタンに変換 できます。

.flag-wrapper.{flag-name} a.flag-action {
  background-image: url('path to the button image');
  display:block;
  text-indent:-9999em;
}
.flag-wrapper.{flag-name} a.unflag-action {
  background-image: url('path to the button image');
  display:block;
  text-indent:-9999em;
}

メモ：

  • text-indent:-9999emは、要素を非表示にします（画面から外して配置します）。
  • .{flag-name}をフラグのマシン名に置き換えます。
14
Pierre.Vriens

フラグリンクのレンダリングに Flag モジュールを使用している場合は、リンクテキストの代わりに次のコードを使用して画像を表示できます。

function theme_preprocess_flag(&$vars){
    $state = ($vars['action'] == 'flag' ? 'off' : 'on');
    $image_file = $vars['directory'] . '/images/flag-' . $vars['flag']->name . '-' . $state . '.png';
    if (file_exists($image_file)) {
        $vars['link_text'] = theme_image(array('path' => $image_file,   'attributes' => 
        array('class' => array('flag-' . $vars['flag']->name . '-' . $state))));
     }
}

このコードをtemplate.phpで使用した後、flag-flag_machine_name>-off|on.pngのような名前のテーマディレクトリに画像を配置します。

6
Yatendra Singh

このコードをtemplate.phpに貼り付けます

function Your_theme_preprocess_flag(&$vars) {
  $class = ($vars['action'] == 'flag') ? '<i class="fa fa-heart-o">   </i>' : '<i class="fa fa-heart"></i>';
  $vars['link_text'] = $class;
  $title_wishlist = ($vars['action'] == 'flag') ? 'Add to wishlist' : 'Remove from wishlist';
  $vars['link_title'] = $title_wishlist;
}
4
Vamsi

sites/all/modules/your_flag_module_name/flag_tpl_fileのtplファイルをsites/all/themes/your_theme_name/templates/paste tpl fileにコピーした後、選択に応じてtplデザインを変更できます。

フラグのステータスなど、このtplですべての変数を使用できます。

3
Kamal Oberoi

Bootstrap theme（glyphicons built-in））を使用すると、フラグのテキストフィールド（通常はフラグリンクのテキストを入力する）にアイコンを直接追加することもできます。テキストを書く代わりに次のように入力します。

<span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>

enter image description here

1
user24957

私はこれが古い投稿であることを知っていますが、FontawesomeモジュールとFlagsモジュールを使用して簡単な解決策を追加したいと思いました。

フラグを作成するときに、「フラグリンクテキスト」と「フラグ解除リンクテキスト」の両方でフラグに入力するテキストを尋ねました

これらのボックスにfontawesmeコードを貼り付けると、ページにfontawesomeアイコンが表示されます。これはビューでも機能します。したがって、次のようなものを追加します

<i class="far fa-bookmark"></i>

それらの設定ボックスで、それは動作します。

enter image description here

0
Anon Ymous