Unorganized List Using Repeater Field Help

[texobyte]

In my template I have an UL (see code example 1) which I am converting to the ProcessWire CMS. Now I am unsure how to do this... and I have done the code on the repeater via the docs example (see code example 2) but I am not getting any results. My backend is setup with a repeater field called home_slider and inside the repeater is: [ image is sliderimg title is slider_title and text is slider_text].

 

Thanks!

CODE EXAMPLE 1:

<ul class="orbit-container">
  <button aria-label="previous" class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀</button>
  <button aria-label="next" class="orbit-next"><span class="show-for-sr">Next Slide</span>▶</button>
  <li class="orbit-slide">
    <div class="clearfix">
      <div class="small-12 large-10 large-centered columns">
        <div class="featured-image float-left"> 
          <img src="/assets/img/sans-graphic.jpg" style="height:340px;width:auto;" alt="Scrolling Featured Images"/></div>
        <div class="featured-text">
          <h3>SANS</h3>
          <p>The Submarine Acoustic Navigation System Beacon is an undersea, bottom-mounted...</p>
          <a href="/technology.html" class="button">Read More</a>
        </div>
      </div>
    </div>
  </li>
  <li class="orbit-slide">
    <div class="clearfix">
      <div class="small-12 large-10 large-centered columns">
        <div class="featured-image float-left">
          <img src="/assets/img/smart.jpg" style="height:340px;width:auto;" alt="Scrolling Featured Images"/>
        </div>
        <div class="featured-text">
          <h3>SMART</h3>
          <p>Standardized Metrics Assesments of Readiness and Training is an analysis tool...</p>
          <a href="/technology.html" class="button">Read More</a>
        </div>
      </div>
    </div>
  </li>
  <li class="orbit-slide">
    <div class="clearfix">
      <div class="small-12 large-10 large-centered columns">
        <div class="featured-image float-left">
          <img src="/assets/img/acms/acms-2.png" style="height:340px;width:auto;" alt="Scrolling Featured Images"/>
        </div>
        <div class="featured-text">
          <h3>ACMS</h3>
          <p>Advanced Contact Management Systems aids commanding officers in gathering actionable sonar information...</p>
          <a href="/technology.html" class="button">Read More</a>
        </div>
      </div>
    </div>
  </li>
</ul>

CODE EXAMPLE 2:

<? foreach($page->home_sliders as $home_slider) {
  <li class='orbit-slide'>
      <div class='clearfix'>
          <div class='small-12 large-10 large-centered columns'>
              <div class='featured-image float-left'>
              	echo "<img src='{$home_slider->sliderimg}' style='height:340px;width:auto;' alt='Scrolling Featured Images'/>";
           	  </div>
              <div class='featured-text'>
                  echo "<h3>{$home_slider->slider_title}</h3>";
                  echo "<p>{$home_slider->slider_text}</p>";
                  echo "<a href='{$home_slider->slider_btn_url}' class='button'>Read More</a>";
              </div>
          </div>
      </div>
  </li>
  }	
?>

 

[Macrura]

48 minutes ago, texobyte said:

$home_slider->sliderimg

would need to be

$home_slider->sliderimg->url

or

$home_slider->sliderimg->first()->url

depending on if the image field is single or multi

[Robin S]

I think the problem here is the way you are mixing PHP and HTML together:

<? foreach($page->home_sliders as $home_slider) {
  <li class='orbit-slide'>

This isn't valid PHP - you need to either echo all the HTML or switch in and out of PHP like so...

<?php foreach($page->home_sliders as $home_slider): ?>
    <li class="orbit-slide">
    ...more HTML...
<?php endforeach; ?>

As an aside, the short PHP open tag <? is discouraged - the short echo tag <?= is okay though.