詳細カスタムフィールド背景の競合

Question

私は高度なカスタムフィールドを使用して再利用可能なモジュールを構築し、柔軟なコンテンツを使用して視差モジュールを構築しています。

モジュールテンプレート

<style> 
    .parallax-bg { 
     background-size: cover; 
     background-position: center center; 
     background-repeat: no-repeat; 
    } 

    .hero-child { 
     position: absolute; 
     width: 100%; 
     background-repeat: no-repeat; 
     background-size: cover; 
     z-index: 0; 
     height:100%; 
     background-image:url("<?php the_sub_field('parallax_image_sm'); ?>"); 

    } 

    @media only screen and (min-width: 768px) { 
     .parallax-bg { 
      background-size: cover; 
      background-position: top center; 
      background-repeat: no-repeat; 
      position: relative; 
     } 
     .hero-child { 
      background-image:url("<?php the_sub_field('parallax_image_lrg'); ?>"); 
     } 
    } 


</style> 



<section class="parallax-bg <?php the_sub_field('add_class'); ?>" style="overflow:hidden;"> 
    <div class="hero-child" data-bottom-top="background-position:50% 100px;" data-top-bottom="background-position:50% -100px;"></div> 
    <div class="row"> 
      <div class="parallax-content"> 
      <?php the_sub_field('parallax_content'); ?> 
     </div><!!--end parallax content --> 
    </div> 
</section> 

私はページ上の同じモジュールを使用すると、同じ背景画像が同じセクションのために表示されます。私はこれを回避する方法を見つけようとしています。私はGUIDを使用することを考えていましたが、より単純なソリューションがあることを望んでいましたか？

Answer 1

提供されているコードが複数回繰り返されていると仮定しているため、各タグで同じクラス名が使用されるため、最終的なコンテンツセットが表示されます。他のすべてのスタイルをオーバーライドします。

独自の独自のスタイルを与えるには、ある種のカウンタを実装する必要があります。このような多分何か：あなたのループ/リピータ前

、この追加：以下を行い、その後

<?php $i++; ?> 

：あなたのループ/リピータが開始直後に、これを追加し、その後

<?php $i = 0; ?> 

を

<style> 
.parallax-bg<?php echo $i; ?> { 
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat; 
} 

.hero-child<?php echo $i; ?> { 
    position: absolute; 
    width: 100%; 
    background-repeat: no-repeat; 
    background-size: cover; 
    z-index: 0; 
    height:100%; 
    background-image:url("<?php the_sub_field('parallax_image_sm'); ?>"); 

} 

@media only screen and (min-width: 768px) { 
    .parallax-bg<?php echo $i; ?> { 
     background-size: cover; 
     background-position: top center; 
     background-repeat: no-repeat; 
     position: relative; 
    } 
    .hero-child<?php echo $i; ?> { 
     background-image:url("<?php the_sub_field('parallax_image_lrg'); ?>"); 
    } 
} 


</style> 
<section class="parallax-bg<?php echo $i; ?> <?php the_sub_field('add_class'); ?>" style="overflow:hidden;"> 
<div class="hero-child<?php echo $i; ?>" data-bottom-top="background-position:50% 100px;" data-top-bottom="background-position:50% -100px;"></div> 
<div class="row"> 
     <div class="parallax-content"> 
     <?php the_sub_field('parallax_content'); ?> 
    </div><!!--end parallax content --> 
</div> 

：あなたのコードの変更

あなたのループの最初のインスタンスのために、このようなので、この意志の出力はあなたのhtml：クラス視差-BG1とクラス英雄-child1の付きであなたのAを与える

<style> 
.parallax-bg1 { 
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat; 
} 

.hero-child1 { 
    position: absolute; 
    width: 100%; 
    background-repeat: no-repeat; 
    background-size: cover; 
    z-index: 0; 
    height:100%; 
    background-image:url("<?php the_sub_field('parallax_image_sm'); ?>"); 

} 

@media only screen and (min-width: 768px) { 
    .parallax-bg1 { 
     background-size: cover; 
     background-position: top center; 
     background-repeat: no-repeat; 
     position: relative; 
    } 
    .hero-child1 { 
     background-image:url("<?php the_sub_field('parallax_image_lrg'); ?>"); 
    } 
} 


</style> 
<section class="parallax-bg1 <?php the_sub_field('add_class'); ?>" style="overflow:hidden;"> 
<div class="hero-child1" data-bottom-top="background-position:50% 100px;" data-top-bottom="background-position:50% -100px;"></div> 
<div class="row"> 
     <div class="parallax-content"> 
     <?php the_sub_field('parallax_content'); ?> 
    </div><!!--end parallax content --> 
</div> 

。 2番目のインスタンスは、代わりに2で終了します。

一般的なスタイルをCSSファイルの中に入れておき、残りのスタイルはおそらくすべての要素と要素の間に残っているので、ループ内に背景画像スタイルを置くことをお勧めします。