web-dev-qa-db-ja.com

火傷した画像にクラスを追加する方法は？

Drupal 7 Bootstrap テーマと Scald 。コンテキストの使用方法を理解しましたが、画像が表示されるときにimg-responsiveクラス。

これは、レンダー配列を操作することで実行できますか？

誰かがこれを達成するための最良の方法を指摘できますか？

7themingscald
4
inertiahz

余分な<div class="img-responsive">標準のラッパーatom Scaldによって生成されたマークアップが動作します（一種の-凡例は見栄えが良くありません）。

ただし、Bootstrap img-responsiveクラス、Scaldのオーバーライドとして使用dnd-atom-wrapperクラス：

// Just copy the Bootstrap CSS for img-reponsive.
.dnd-atom-wrapper {
  max-width: 100%;
  display: block;
  height: auto;
}

これは、Scaldのすべての画像アトムで機能するようです（他のタイプのアトムを壊す可能性があります-私は画像にScaldアトムのみを使用しています）。

私は本当に完全なBootstrap "thumbnail" concept（include nice borders and captions））をエミュレートしたいのですが、標準のScald atom cssクラスを使用しているので、結局関連するクラスのこれらのオーバーライドを使用します（これはデフォルトのプレーヤーです-HTML5プレーヤーで動作するように少し調整する必要があります）：

// CSS fror Scald image atoms
.dnd-atom-wrapper {
  max-width: 100%;
  display: block;
  height: auto;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  line-height: 1.42857;
  margin-bottom: 5px;
  padding: 4px;
  transition: border 0.2s ease-in-out 0s;
}
.dnd-legend-wrapper {
  margin: 0;
  text-align: center;
  font-size: 0.8em;
  width: 100%;
}
.dnd-atom-wrapper,
.dnd-drop-wrapper img {
  margin-left: auto;
  margin-right: auto;
  float: none;
  display: block;
}
.dnd-atom-wrapper.atom-align-right {
  @media (min-width: @screen-lg-min) {
    margin-left: 0.7em;
  }
}
.dnd-atom-wrapper.atom-align-left {
  @media (min-width: @screen-lg-min) {
    margin-right: 0.7em;
  }
}
.atom-align-right {
  @media (min-width: @screen-lg-min) {
    float: right !important;
  }
}
.atom-align-left {
  @media (min-width: @screen-lg-min) {
    float: left !important;
  }
}

私はこのCSSをless/overrides.less in my Bootstrapサブテーマ。

lesscでコンパイルし、キャッシュをクリアして機能させることを忘れないでください。

以下に、実際の動作を示します。左が大画面、右が小画面。

enter image description here

3
Free Radical

ようやくこれを解決しました。それはまだハックですが、ラッパーを追加せず、追加のCSSを必要としません。私はそれが解決できないと思います「Drupal方法」、方法Scald機能します。

Scaldアトムのマークアップは既にレンダー配列に存在しており、レンダー配列に属性として追加されたクラス（通常のように）は無視されます。

以下をnode.tpl.phpの先頭に追加すると機能します。

$markup = $content['field_scald_atom_ref'][0]['#markup'];
$markup = str_replace('typeof="foaf:Image"',
  'typeof="foaf:Image" class="img-responsive"', $markup);
$content['field_scald_atom_ref'][0]['#markup'] = $markup;

このコードがスニップすることは、Scaldによってすでに生成されたマークアップをハックしてclass="img-responsive"を含めることです。

1
Free Radical