$image = $page->images->first();

[pwired]

Hi,

I only have 3 images in my home page (in the images field)

I know about $image = $page->images->first();

but is there something like this:

$image = $page->images->first();

$image = $page->images->second();

$image = $page->images->third();

Could not find those so I am afraid not.

What would be the easiest way to get the three images inside the img src=". . . .

in this code:

<div id="slideshow">
		<ul id="slides" class="rslides rslides1">
		  <li id="rslides1_s0" style="float: none; position: absolute; display: none;" class=""><img src="/test_image2.jpg" alt=""></li>
		  <li id="rslides1_s1" style="float: left; position: relative; display: list-item;" class="rslides1_on"><img src="/test_image3.jpg" alt=""></li>
		</ul>
	</div>

Besides that, using the pw api would require using php commands. Is that possible to do that

in the middle of html code ?

[kongondo]

Have a look at eq(n) - if you want to target a particular image....this is in the cheat sheet ....but maybe does not answer you question...but the usual suspects are about...so your question will be answered ....

[renobird]

can you just foreach the images and output each slide?

otherwise

$page->images->eq($n);

[Martijn Geerts]

$page->images->eq(1); // second image

[renobird]

quick on the draw kongondo.

I don't think responsiveSlides (looks like what you are using) needs custom markup for individual slides, but you probably have a reason.

[kongondo]

quick on the draw kongondo.

I don't think slides needs custom markup for individual slides, but you probably have a reason.

Just! Phew....

Back to the questions...yeah, @PWired, why not just use foreach? Why do you have to identify the images by index? Note, there is also last(), FYI

PHP starts anywhere you have this <?php......and ends here ?>

Btw, do you have to use those inline CSS styles?

[renobird]

<ul class="rslides">

<?php

foreach ($page->images as $img):?>

    <li><img src="<?=$img->url;?>"></li>

<? endforeach; ?>

</ul>

 

[Martijn Geerts]

Or difficult like this:

echo $page->images->implode(function($item) {
	$large = $item->size(1200,800);
	$thumb = $item->size(400,300);
	return "<li><a href='$large->url'><img src='$thumb->url' alt='$item->description'></a></li>";
}, array('prepend' => '<ul>', 'append' => '</ul>'));  

[renobird]

Martijn,

*showoff*  

[Martijn Geerts]

lol

[pwired]

Thanks guys, would not have found this easy my self.

Saved it in my script lib.

$page->images->eq($n);
$page->images->eq(1); // second image

Can keep on coding now

kongondo, PHP starts anywhere you have this <?php......and ends here ?>

thanks for that, sometimes I am confused if it is allowed to use php inside html

or html inside php

Btw, do you have to use those inline CSS styles?

Last night I found this really great 3 column, no nonsense and responsive layout.

It works great !!! I am studying the css but I believe the slideshow has little connection

with the css.

I am going to post this layout later on github (which will be my first github experience as well)

or post it as a pw profile. This 3 column responsive layout is very usable.

[pwired]

<ul class="rslides">
<?php
foreach ($page->images as $img):?>
    <li><img src="<?=$img->url;?>"></li>
<? endforeach ?>
</ul>

Thanks for that example.

[kongondo]

Normally, you don't want PHP inside your HTML files as the code will not be executed (unless you configure your server to do so)...there could be other issues/perspectives as well. But, HTML inside a PHP file is OK and the preferred way....though the debate never ends about how much HTML should be in your PHP file

I use inline CSS styles only when it is absolutely necessary...

[pwired]

I use inline CSS styles only when it is absolutely necessary...

Hi kongondo, working on it   copying all inline css into a single file.css

and put that inside the folder /styles/file.css

Then I delete all the inline css in the layout page

[renobird]

Further down the rabbit hole….

A function for responsive (retina) slideshows using Filament Group's responsive carousel and picturefill

function slideshow(){

 $page = wire('page');

 // Resposive Carousel from Filament Group
 // https://github.com/filamentgroup/responsive-carousel

 $out = "<div class='carousel arrows' data-paginate data-autoplay data-interval='8000'>";

foreach ($page->images as $image){

  // create required images sizes (based on 16:9 aspect ratio)
  
  //large
  $large = $image->size(920,518);
  $large_2x = $image->size(1840,1036,array('quality' => 25));
  
  //medium
  $medium = $image->size(720,405);
  $medium_2x = $image->size(1440,810,array('quality' => 25));
  
  //small
  $small = $image->size(540,304);
  $small_2x = $image->size(1080,604,array('quality' => 25));
  
  //extra small
  $xsmall = $image->size(300,169);
  $xsmall_2x = $image->size(600,338,array('quality' => 25));
  
  // serve 2x thumb to all devices
  $thumb = $image->size(200,106,array('quality' => 50));
  
  $out .= "<div data-thumb='{$thumb->url}'>";

   $out .= "<span data-picture data-alt='{$image->description}'>";
          
    // extra small
    $out .= "<span data-src='{$xsmall->url}'></span>";
    $out .= "<span data-src='{$xsmall_2x->url}' data-media='(max-width: 399px) and (min-device-pixel-ratio: 2.0)'> </span>";
          
          //small
          $out .= "<span data-src='{$small->url}' data-media='(min-width: 400px)'></span>";
          $out .= "<span data-src='{$small_2x->url}' data-media='(min-width: 400px) and (min-device-pixel-ratio: 2.0)'></span>";
          
          // medium
          $out .= "<span data-src='{$medium->url}' data-media='(min-width: 800px)'></span>";
          $out .= "<span data-src='{$medium_2x->url}' data-media='(min-width: 800px) and (min-device-pixel-ratio: 2.0)'></span>";

          // large
          $out .= "<span data-src='{$large->url}' data-media='(min-width: 1000px)'></span>";
          $out .= "<span data-src='{$large_2x->url}' data-media='(min-width: 1000px) and (min-device-pixel-ratio: 2.0)'></span>";
          
          // Internet Explorer 8 and older have no support for CSS3 Media Queries
          // serve large image to older version of IE desktop.
       
          $out .= "<!--[if (lt IE 9) & (!IEMobile)]>";
          $out .= "<span data-src='{$large->url}'></span>";
          $out .= "<![endif]-->";

          // Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. 
          $out .= "<noscript>";
              $out .= "<img src='{$large->url}' alt='{$image->description}'/>";
          $out .= "</noscript>";

      $out .= "</span>"; // end picturefill
   
   // use image description field to generate a caption
   $out .= $image->description ? "<div class='caption'>{$image->description}</div>" : "";
  
  $out .= "</div>"; // end slide
 }

 $out .= "</div>"; //  end carousel

 return $out;
}

In your template

<?php

// render slideshow if there are images
if (count($page->images) > 0){
    echo slideshow();
}

?>

*gah, formatting got a little mangled in the forum. You get the idea.

[Martijn Geerts]

When projects become more complex and need more logic, mostly I end up only using PHP. So never escaping HTML.

ProcessWire has changed how I quote HTML. 

Before PW: <body class="tralala">

Now with PW: "<body class='tralala'>"

[pwired]

Thanks for the second code example renobird. I am going to do this in 3 steps.

First your easy example, then your second example for studying the how and what,

and third replacing it with a show off slide show which I already have but do not

know how to implement yet.

[cstevensjr]

You guys are too smart.  I'm learning a lot today.

[renobird]

Slideshows can get complicated quickly. Especially when serving different image sizes and resolutions like the example above.

Then you can start intermingling video slides, and well, the rabbit hole goes further and further...

You guys are too smart.  I'm learning a lot today.

I only look smart because I hang around here and absorb everyone's great examples. So, you are doing the right thing.

[Martijn Geerts]

yep Tom, this community makes learning fun.

[renobird]

Keep in mind — If you have a lot of images the very first page view will take a bit while all the different sizes get created.

After that it will be fast.