Creating a slideshow and grabbing each child with image field

[Danjuan]

Hi

I am trying to create a slideshow based on children/sub-menu items.

Each child/sub-menu has an image field called hero_image

The following code displays the amount of slides that matches the amount of children I have and displays the child's title so I know it's correct.

So far the below code works perfectly although there may be a better way of doing it.

<!-- HERO-->
  <div class="section" id="hero">
    <?php
foreach($page->children as $child)
   echo "<div class='slide' id='hero-slide-$child->title'>$child->title</div>\n";
   ?>
  </div>
<!-- /HERO--> 

What I now need to do is replace the title with the hero_image that I have uploaded in the child page.

In my html version, I have this image placed inside an external CSS file so ideally I need to keep it the same.

In my external CSS file, I have tried the following but nothing shows, is this even possible to do in an external CSS file?

#hero-slide-design {
	background-image: url('<?= $page->hero_image->url ?>;');
}

[Tom.]

Hello - Welcome,

It isn't possible to do PHP in CSS. However it's possible to do CSS in PHP. 

<!-- HERO-->
  <div class="section" id="hero">
    <?php
foreach($page->children as $child)
   echo "<div class='slide' id='hero-slide-$child->title' style="background-image: url('{$child->hero_image->url}')">$child->title</div>\n";
   ?>
  </div>
<!-- /HERO--> 

[LostKobrakai]

The best thing about your stylesheet is that it's stateless and therefore cacheable. Using php to generate it dynamically would deny exactly that. For stateful styles inline-styles are perfectly fine if you need dynamic files.

[Danjuan]

Hello - Welcome,

It isn't possible to do PHP in CSS. However it's possible to do CSS in PHP. 

<!-- HERO-->
  <div class="section" id="hero">
    <?php
foreach($page->children as $child)
   echo "<div class='slide' id='hero-slide-$child->title' style="background-image: url('{$child->hero_image->url}')">$child->title</div>\n";
   ?>
  </div>
<!-- /HERO--> 

Thanks for the code, I tried this but the image won't show.

Looking at the html code in generates, i can see it outputs 

<div class='slide' id='hero-slide-Design' style='background-image: url('/site/assets/files/1023/')'>Design</div>

Any ideas?

[BitPoet]

Make sure your hero_image field is set to "Single item".

[Danjuan]

Make sure your hero_image field is set to "Single item".

Thank you for the reply.

Ok so that appears to have done something to the output but the image is still not showing.

So I changed

url('{$child->hero_image->url}')

to

url({$child->hero_image->url})

and it now appears to work although I have 2 important issues

Issue 1:

When click inspect element

I get a 3 notices at the bottom of the page

<b>Notice</b>
" : Trying to get property of non-object in "

blah blah blah on line 7 which is

"<a href='$child'><div class='slide' id='hero-slide-$child->title' style='background-image: url({$child->hero_image->url})'>$child->title</div></a>\n";

Issue 2:

So after a little testing, it appears to add 

/#section1
/#section1/1
/#section1/2
/#section1/3

to the url depending on what slide it's on, I know this is nothing to do with the original post but I didn't want to create a new post as it's really part of the same question.

How do i remove this from the url so it's nice and clean?

Thanks