Forum

Thread tagged as: Question, Blog

Blog Entries inside a homepage image carousel

Perch: 2.8.34, PHP: 5.6.25, MySQL: mysqlnd 5.0.11-dev - 20120503 - $Id$, with PDO Server OS: Darwin, apache2handler Installed apps: content (2.8.34), assets (2.8.34), categories (2.8.34), perch_blog (4.6), perch_forms (1.8.3), perch_members (1.5) App runtimes: <?php $apps_list = array( 'content', 'categories', 'perch_forms', 'perch_blog', 'perch_members', ); PERCH_LOGINPATH: /perch PERCH_PATH: /www/sites/blackdoghill/htdocs/perch PERCH_CORE: /www/sites/blackdoghill/htdocs/perch/core PERCH_RESFILEPATH: /www/sites/blackdoghill/htdocs/perch/resources Image manipulation: GD PHP limits: Max upload 2M, Max POST 8M, Memory: 128M, Total max file upload: 2M F1: 6a33f95eca3667f9e0c39bf5ca2980fe Resource folder writeable: Yes HTTP_HOST: blackdoghill.sites.dev DOCUMENT_ROOT: /www/sites/blackdoghill/htdocs REQUEST_URI: /perch/core/settings/diagnostics/ SCRIPT_NAME: /perch/core/settings/diagnostics/index.php

<perch:repeater id="home_slider" label="Home Slider">
<perch:before>
<div class="home__slider">
</perch:before>
  <div>
    <div class="first-slide" style="background-image:url('<perch:content type="image" id="home-slider-bg" label="Background Image" />');">
      <div class="slider__content-container">
        <span class="home-slick-arrow home-slick-prev"></span>
        <div class="slider__content">

         [INSERT BLOG POST CONTENT HERE - TITLE, EXCERPT AND LINK]

        </div>
        <span class="home-slick-arrow home-slick-next"></span>
      </div>
    </div>
  </div>
<perch:after>
</div>
</perch:after>

What I am trying to do is have a image carousel on the homepage, with a container overlaid on top showing a blog post (title, excerpt and link). Each slide would show a different blog post in descending order. Currently, I have home-slider template that is separate from the blog.

How would I pull through the blog entries onto the home-slider template?

Many thanks

Steve

Steve Forbes 0 points

4 years ago

Mike Harrison 37 points

4 years ago

Hi,

I have the following on a site, which might help you. This on my index.php:

perch_blog_custom([
      'count'=>3,
      'sort'=>'postDateTime',
      'sort-order'=>'DESC',
      'template'=>'homepage_posts'
]);

And this is the template:

<perch:before>
  <h2>Latest News</h2>
  <div class="newscarousel">
</perch:before>

<div class="slide">

        <h3><a href="<perch:blog id="postURL" />" rel="bookmark" class="entry-title"><perch:blog id="postTitle" /></a></h3>
        <div class="description entry-summary">

 <perch:if exists="excerpt">
       <perch:blog id="excerpt" type="textarea" markdown="true" />
 <perch:else />
     <perch:blog id="introduction" type="textarea" label="Post" editor="markitup" markdown="true" words="60" append="…" />
</perch:if>




        <a href="<perch:blog id="postURL" />" class="button">Read More</a>
        </div>

        </div>


<perch:after>
</div>
</perch:after>

Steve Forbes 0 points

4 years ago

Hi Mike

Thanks for the reply.

That's what I had before, however I need a way to attaching a background image to the slide. Unless there is a way to add an additional field to the blog post to upload a large background image for the slide?

Thanks again!

Steve

Mike Harrison 37 points

4 years ago

That's what I would do - add an image to the blog post to be used as the slide background for that post. So something like this in post.html

<perch:blog id="background_image" type="image" label="Large Background Image" width="1200" height="600" />

And then use it like this in the template:

<perch:before>
<h2>Latest News</h2>
<div class="newscarousel">
</perch:before>

<div class="slide" style="background-image: url(<perch:blog id="background_image" type="image" width="1200" height="600" />)" >

<h3><a href="<perch:blog id="postURL" />" rel="bookmark" class="entry-title"><perch:blog id="postTitle" /></a></h3>
<div class="description entry-summary">

<perch:if exists="excerpt">
<perch:blog id="excerpt" type="textarea" markdown="true" />
<perch:else />
<perch:blog id="introduction" type="textarea" label="Post" editor="markitup" markdown="true" words="60" append="…" />
</perch:if>




<a href="<perch:blog id="postURL" />" class="button">Read More</a>
</div>

</div>


<perch:after>
</div>
</perch:after>

Then do the rest with CSS for the position and size of the background image

Steve Forbes 0 points

4 years ago

Ah perfect. I've got it! Thanks for that Mike!