カスタムデザインされたティーザー、次に完全なポスト別デザイン

ティーザー・ビューに必要なデザインとカスタム・デザインがあります。私はカスタムティーザービューを出力し、次に完全な投稿を別のテンプレートに従わせる必要があります。

ティーザーには、サムネイル画像が左に浮かび、右に数行のテキストがあります。実際の投稿には多くの画像とテキストが含まれます。

これは可能ですか?

ベストアンサー

確かに可能です。そのためには、あなたのコンテンツタイプにカスタム画像を追加する必要があります。
ビューを作成する際には、まずそのフィールドを使用してください。

float: left;

それを左に揃えるためのイメージフィールドのCSSクラス

私のサイト www.techiestuffs.com
を見ることができます。これはあなたが言ったこととまったく同じです。ティーザーは、いずれかの画像またはタイトルをクリックすると、元のコンテンツにつながります。
私はこれを達成するために使用された以下のCSSコードを参照してください

  .view-recentarticles .views-field-field-image {
float: left;
padding: 3px;
border: 1px solid #C9C9C9;
white-space: nowrap;
margin-right:10px;
margin-bottom:5px;
}
.view-recentarticles {
padding:5px;
border:1px solid #ccc;
background-color:#ffffff;
}

.view-recentarticles .views-field-title {
  margin-bottom: 10px;
  padding-left:10px;
  font-size: 18px;
  line-height: 1.4;
  font-weight:bold;
  background-color:#f4f4f4;
  }
  .view-recentarticles .views-field-title a {
  transition: all 0.2s;
  -moz-transition: all 0.2s;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
 }
 .view-recentarticles .views-field-title a:hover {
  color: #181818;
 -webkit-transition: all 0.2s;
  text-decoration: none;
  background-color: #f6ecdd;
 }
  .view-recentarticles .views-field-body {
  padding-bottom:5px;
  border-bottom:2px solid #f4f4f4;
  }
    .view-recentarticles .views-field-field-blog-author {
    font-size:10px;
    font-weight:bold;
  padding:5px 2px 5px 2px;
  background-color:#f4f4f4;
  }

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です