slider carousel

Hi Daniel, Happy Friday to you!

Before the carousel, you should create your Projects page and Region template to give you template tags to hook into for when you call your carousel using Perch Content Custom.

But your template would eventually look something like this.

<perch:before>
    <section class="slider">        
</perch:before>
        <div>
            <a href="/projects.php?s<perch:content id="slug" type="slug" for="heading" />"><img src="<perch:content type="image" id="image" label="Image" width="960" height="588" crop="true" />" alt="<perch:content type="text" id="alt" label="Description" required="true" />" class="d-all t-all m-hide" /></a>
        </div>
<perch:after>   
    </section><!-- /slider -->
</perch:after>

Your homepage code would be:

<?php
    perch_content_custom('Projects', [
        'page'=>'/projects.php',
        'template'=>'my_project_carousel.html',
    ]); 
?>

Thanks very much for this Simon - it looks good. However, Perch isn't picking up on: <?php perch_content_custom('Projects', [ 'page'=>'/projects.php', 'template'=>'my_project_carousel.html', ]); ?>

When I delete what I had, then refresh the page, perch isn't seeing a new page. Basically perch is now not seeing the entire page

Hi, do you have your Projects page set up yet? As mentioned, you'll need to have your projects.php page set up with some projects added for you to be able to pull from into the homepage.

Unless Perch is not going to manage the Projects?

I have since got the carousel working on the home page from your code help Simon, thanks.

Now maybe its just the tricker side of them linking to each project - I think this is what you describe as what I needs to do first....

Any input on me making this happen would be much appriciated

Yes the projects are in projects, and each project goes on to its own page - this is all in perch

I now have all of the slider images linking to the overall projects page.

now just a matter of linking number one in the slider to https://dev.griffbuild.co.nz/projects.html?s=new-build-lincon

Hi, your projects page seems to be projects.html?s=new-build-lincon is this page managed by Perch? If it was, I'd expect to see a list of all projects at https://dev.griffbuild.co.nz/projects.php and each project at https://dev.griffbuild.co.nz/projects.php?s=new-build-lincon

https://dev.griffbuild.co.nz/projects.html is managed by perch and is the projects listing page

by clicking on each project image link we go to the detail

1- https://dev.griffbuild.co.nz/projects.html?s=extension-christchurch

2- https://dev.griffbuild.co.nz/projects.html?s=new-build-lincon

3- https://dev.griffbuild.co.nz/projects.html?s=new-build-lincoln

All managed by perch.

thank you for your persistence

In an ideal world I imagine somehow telling the slider to do this:

1-slider go to '?s=extension-christchurch'

2-slider go to '?s=new-build-lincon'

3-slider go to '?s=new-build-lincoln'

No problem at all. Thanks, You're cleverly parsing the html pages as php! :)

We're almost there, can you show me your project template?

portfolio_detail.html

<div class="project-header project-header-m"> <div class="project-title-d project-title-m"> <p><perch:content id="type" type="text" label="Type of project" textile="true" /></p> </div>

<div class="project-location-d project-location-m"> <p><perch:content id="location" type="text" label="Location of project" textile="true" /></p> </div>

<perch:content id="slug" for="project_name_location" type="slug" suppress="true" />

<div class="project-describe-d project-describe-m"> <p><perch:content id="describe" type="textarea" label="Describe project" textile="true" editor="markitup" /></p> </div> <section id="griff-project-content" style="display:none">

<h3><perch:content id="project_name_location" type="text" label="Project Type, Location" required="true" help="Example: New Build, Lincoln (seen on list page, repeat as above)" title="true" suppress="true"/></h3>

<perch:repeater id="images" label="Images" max="20">

<perch:before>
<ul>
</perch:before>

<div class="project-pic-d project-pic-t project-pic-m">

<li>
    <img src="<perch:content type="image" id="image" label="Image" width="980" height="600" crop="true"/>" class="fullimg" alt="<perch:content type="text" id="alt" label="Description" />"
</li>

</div>

    <perch:after>
</ul>
</perch:after>

</perch:repeater>

</section><!-- /project-content -->

portfolio_listing.html

<li class="projects-pic-d projects-pic-t projects-pic-m">

<h3><perch:content id="project_name_location" type="text" label="Project Type, Location" required="true" help="Example: New Build, Lincoln (seen on list page, repeat as above)" title="true" /></h3>

<a href="?s=<perch:content id="slug" type="slug" />">

<perch:repeater id="images" label="Images" max="1"> <img src="<perch:content type="image" id="image" label="Image" scope-parent="true" width="980" height="600" crop="true"/>" class="fullimg" alt="<perch:content type="text" id="alt" label="Description" />" </perch:repeater>

</a>

</li>

portfolio_h_detail.html

<section id="griff-project-content">

<perch:content id="slug" for="project_name_location" type="slug" suppress="true" />

<perch:repeater id="images" label="Images" max="10">

<perch:before>
<ul>
</perch:before>

<div class="project-pic-d project-pic-t project-pic-m">

<li>
    <img src="<perch:content type="image" id="image" label="Image" width="980" height="600" crop="true"/>" class="fullimg" alt="<perch:content type="text" id="alt" label="Description" />"
</li>

</div>

<perch:after> </ul> </perch:after>

</perch:repeater>

</section><!-- /project-content -->

portfolio_next.html -

<li class="right_link right"><a href="?s=<perch:content id="slug" type="slug" />">Next <span class="glyphicon glyphicon-menu-right"></span> </a> </li>

portfolio_prev.html -

<li class="left_link"><a href="?s=<perch:content id="slug" type="slug" />"><span class="glyphicon glyphicon-menu-left"></span> Prev </a></li>

any advances here?

Ahh, Simon Clay was being helpful...

Hi Daniel,

Thanks for the templates. In that case I think your template for the homepage slider would be 'project_carousel.html':

<perch:before>
<section class="slider"> 
</perch:before>
<div>
  <a href="/projects.html?s<perch:content id="slug" type="slug" />"><perch:repeater id="images" label="Images" max="1"><img src="<perch:content type="image" id="image" label="Image" scope-parent="true" width="980" height="600" crop="true"/>" class="d-all t-all m-hide" alt="<perch:content type="text" id="alt" label="Description" />"</perch:repeater></a>
</div>
<perch:after>
</section><!-- /slider -->
</perch:after>

And on the actual page, (if you're saving projects as a multi-item Region with the name 'Projects'):

<?php perch_content_custom('Projects', [ 
 'page'=>'/projects.html', 
 'template'=>'project_carousel.html', 
 ]);  
?>

Let me know if that works.

Thanks Simon (all-round good guy)

I follow up till 'And on the actual page,..'

did you mean to put html on the end: And on the actual page, (if you're saving projects as a multi-item Region with the name 'Projects.html'):

??

So I need to add the following in to projects.html as well as keep all that is there?

<?php perch_content_custom('Projects', [ 'page'=>'/projects.html', 'template'=>'project_carousel.html', ]); ?>

Ha ha! That's me!

I mean put the php code on index.html in place of where your carousel/slider code is at the mo.

Thanks Simon,

unfortunately Perch isn't picking up on it as a new page region ... I'ver tried a few things like getting rid of 'template'=>'project_carousel.html', and making it 'perch_content' rather than 'perch_content_custom'.

I have had perch pick up on it with this but then there is no sign of where to link the picture to....