Developing (v7+)

Custom slideshow template - resize images, check for URL, output thumbs

Permalink August 02, 2012 at 3:25 AM

Hi there,

I've been building a simpler custom template for the slide show block and have the following which works great so far:

<div id="<?php echo $bID;?>">
  <?php // output each slide
    foreach($images as $imgInfo) {
    $f = File::getByID($imgInfo['fID']);
    $fp = new Permissions($f);
    if ($fp->canRead()) {
  ?>
   <a href="<?php echo $imgInfo['url']?>"><img src="<?php echo $f->getRelativePath()?>" height="<?php echo intval($imgInfo['imgHeight'])?>" alt="<?php echo $f->getDescription()?>"></a>
  <?php } } ?>
</div>

Questions:
- How could I conditionally output the link tag only if a link is present?
- Can I control the size of the rendered main images?
- Can I output thumbnails at a smaller size?

Sorry if this is easy but I had trouble working out what was javascript and what was php in the built-in template.

Any pointers in the right direction would be much appreciated.

Cheers

JohntheFish replied on Aug 2, 2012 at 4:10 am Permalink Reply

Some links that explain conditional code in php:
http://www.w3schools.com/php/php_if_else.asp...
http://php.net/manual/en/control-structures.if.php...

You need to do (this is pseudocode, not the actual code, just to give the gist):

if ($imgInfo['url']){
  //output image with link
} else {
  //output image without link
}

To get an image in a different size, you need to use the image helper:
http://www.concrete5.org/documentation/developers/files/helpers...

(all of this will be in php, none is JavaScript)

cmscss replied on Aug 2, 2012 at 2:48 pm Permalink Reply

Thanks heaps for the reply.

I do understand the basics of an if/else statement and can roughly see how to use the image helper based on other types of templates (page_list) etc - but I have trouble working out how to add another if/else statement into one that's already there (the permissions one).

Also I get errors - basically because I have trouble with the ways to output markup using php. It seems like every template (depending on who wrote it) renders markup completely differently.

I'm going to have another go and will post back with the errors if that's OK?

cmscss replied on Aug 2, 2012 at 3:04 pm Permalink Reply

OK, so outputting the two image sizes to begin with.

Reading the links you gave me and looking at Jordan's page_list template, I've given it a go like this:

<?php  defined('C5_EXECUTE') or die("Access Denied."); ?>
<?php
  $ih = Loader::helper('image'); //load the image helper
  $full = $ih->getThumbnail($img, 970, 485);   // resize full image
  $thumb = $ih->getThumbnail($img, 220, 152);   // resize thumbnail image
?>
<div id="<?php echo $bID;?>">
  <?php // output each slide
    foreach($images as $imgInfo) {
      $f = File::getByID($imgInfo['fID']);
      $fp = new Permissions($f);
      if ($fp->canRead()) {
  ?>
  <a href="<?php echo $imgInfo['url']?>">
    <img src="<?php echo $full->src ?>" width="<?php echo $thumb->width ?>" height="<?php echo $thumb->height ?>" alt="<?php echo $title ?>" />

Viewing 15 lines of 27 lines. View entire code block.

 
<?php  defined('C5_EXECUTE') or die("Access Denied."); ?>
 
<?php
  $ih = Loader::helper('image'); //load the image helper
  $full = $ih->getThumbnail($img, 970, 485);   // resize full image
  $thumb = $ih->getThumbnail($img, 220, 152);   // resize thumbnail image
?>
 
<div id="<?php echo $bID;?>">
  <?php // output each slide
    foreach($images as $imgInfo) {
      $f = File::getByID($imgInfo['fID']);
      $fp = new Permissions($f);
      if ($fp->canRead()) {
  ?>
  <a href="<?php echo $imgInfo['url']?>">
    <img src="<?php echo $full->src ?>" width="<?php echo $thumb->width ?>" height="<?php echo $thumb->height ?>" alt="<?php echo $title ?>" />
    <img src="<?php echo $thumb->src ?>" width="<?php echo $thumb->width ?>" height="<?php echo $thumb->height ?>" alt="<?php echo $title ?>" />
  </a>
  <?php } } ?>
</div>
 
<script type="text/javascript">
  $(document).ready(function() {
    $('#<?php echo $bID;?>').orbit({
      animation: 'horizontal-slide', // fade, horizontal-slide, vertical-slide, horizontal-push
      animationSpeed: 400 // how fast animtion plays
    });
  });
</script>

But no images get output - do I need to somehow define the images in the foreach statement so they're available for output?

JohntheFish replied on Aug 2, 2012 at 3:08 pm Permalink Reply

My apologies if that was a bit too novice. There are lots of forum posts from users with no programming experience and having checked your profile I probably aimed too low.

Have a look at List Files From Set (http://www.concrete5.org/marketplace/addons/list-files-from-set/... ), and in particular, at a template I posted that uses the image helper to output a list of thumbnails - about 3/4 of the way down.
http://www.concrete5.org/marketplace/addons/list-files-from-set/for...

(EDIT: Looks like our posts crossed over)

cmscss replied on Aug 2, 2012 at 3:12 pm Permalink Reply

Mate, when it comes to php (I'm used to Expression Engine and Modx tags) I'm a total noob!

cmscss replied on Aug 2, 2012 at 3:24 pm Permalink Reply

Thanks for the links but I still don't really understand your template and need the link and custom image functionality of the built-in slideshow (I have this all working using Jordan's designer_gallery block but need the extra functionality of the Slideshow block).

Looking at my template, I'm guessing that while I'm loading the image helper, I'm not really applying it to the images?

e.g. I need something like:

$ih = Loader::helper('image'); //load the image helper
  $img = $images; // NEED SOMETHING LIKE THIS?
  $full = $ih->getThumbnail($img, 970, 485); // resize full image
  $thumb = $ih->getThumbnail($img, 220, 152); // resize thumbnail image

Which obviously doesn't work but I suspect I'm missing some way of applying the image helper to the images?

JohntheFish replied on Aug 3, 2012 at 9:00 am Permalink Reply

Maybe something like:

$f = (the original file object, from the file helper);
// eg:
$f = File::getByID($fileID);
$ih = Loader::helper('image'); //load the image helper
$full = $ih->getThumbnail($f, 970, 485); // resize full image
if ($full) {
  ?>
  <a href="<?php echo $full->src; ?>">
    <?php 
    $ih->outputThumbnail($f, 220, 152); 
    ?>
  </a>
  <?php
}

cmscss replied on Aug 3, 2012 at 3:03 pm Permalink Reply

Thanks for this but I'm having trouble integrating it into the code I already have - do I put that into the top or into the foreach statement I have?

Also, does your code retain that permissions if statement:

if ($fp->canRead())

Or do I need to integrate your if statement into that if statement somehow?

This is what I'm trying:

<?php  defined('C5_EXECUTE') or die("Access Denied."); ?>
<?php
  $f = File::getByID($fileID);
  $ih = Loader::helper('image'); //load the image helper
  $full = $ih->getThumbnail($f, 970, 485); // resize full image
?>
<div id="<?php echo $bID;?>">
  <?php // output each slide
    foreach($images as $imgInfo) {
      $f = File::getByID($imgInfo['fID']);
      $fp = new Permissions($f);
      if ($fp->canRead()) {
        if ($full) {
          ?>
            <a href="<?php echo $imgInfo['url']?>">

Viewing 15 lines of 30 lines. View entire code block.

 
<?php  defined('C5_EXECUTE') or die("Access Denied."); ?>
 
<?php
  $f = File::getByID($fileID);
  $ih = Loader::helper('image'); //load the image helper
  $full = $ih->getThumbnail($f, 970, 485); // resize full image
?>
 
<div id="<?php echo $bID;?>">
  <?php // output each slide
    foreach($images as $imgInfo) {
      $f = File::getByID($imgInfo['fID']);
      $fp = new Permissions($f);
      if ($fp->canRead()) {
        if ($full) {
          ?>
            <a href="<?php echo $imgInfo['url']?>">
              <?php $ih->outputThumbnail($f, 220, 152); ?>
            </a>
          <?php
        }
  ?>
  <?php } } ?>
</div>
 
<script type="text/javascript">
  $(document).ready(function() {
    $('#<?php echo $bID;?>').orbit({
      animation: 'horizontal-slide', // fade, horizontal-slide, vertical-slide, horizontal-push
      animationSpeed: 400 // how fast animtion plays
    });
  });
</script>

Sorry for the simple questions, but because I have trouble with php syntax (and how to construct statements) I'm trying to keep things consistent with the other templates I have.

JohntheFish replied on Aug 3, 2012 at 3:47 pm Permalink Best Answer Reply

Something like

<?php
  $ih = Loader::helper('image'); //load the image helper
?>
<div id="<?php echo $bID;?>">
  <?php 
    // output each slide
    foreach($images as $imgInfo) {
      // get file obj for the slide
      $f = File::getByID($imgInfo['fID']);
      // resize the full size file to fit
      $full = $ih->getThumbnail($f, 970, 485);
      $fp = new Permissions($f);
      if ($fp->canRead()) {
        // only output link if we have a target available
        if ($full) {

Viewing 15 lines of 29 lines. View entire code block.

 
<?php
  $ih = Loader::helper('image'); //load the image helper
?>
 
<div id="<?php echo $bID;?>">
  <?php 
    // output each slide
    foreach($images as $imgInfo) {
      // get file obj for the slide
      $f = File::getByID($imgInfo['fID']);
 
      // resize the full size file to fit
      $full = $ih->getThumbnail($f, 970, 485);
      $fp = new Permissions($f);
      if ($fp->canRead()) {
        // only output link if we have a target available
        if ($full) {
          ?>
            <a href="<?php echo $imgInfo['url']?>">
              <?php $ih->outputThumbnail($f, 220, 152); ?>
            </a>
          <?php
 
        // output a thumbnail without link
        } else {
          $ih->outputThumbnail($f, 220, 152);
        }
  ?>
  <?php 
      } 
    } ?>
</div>

(Edited to correct syntax error, as reported below)

cmscss replied on Aug 3, 2012 at 4:01 pm Permalink Reply

Awesome mate, there was a syntax error outputting the image without the a tag so I just copied the syntax for the if ($full) statement above it - for my own ref, this is what I used:

<?php
  $ih = Loader::helper('image'); //load the image helper
?>
<div id="<?php echo $bID;?>">
  <?php
    // output each slide
    foreach($images as $imgInfo) {
      // get file obj for the slide
      $f = File::getByID($imgInfo['fID']);
      // resize the full size file to fit
      $full = $ih->getThumbnail($f, 970, 485);
      $fp = new Permissions($f);
      if ($fp->canRead()) {
        // only output link if we have a target available
        if ($full) {

Viewing 15 lines of 29 lines. View entire code block.

 
<?php
  $ih = Loader::helper('image'); //load the image helper
?>
 
<div id="<?php echo $bID;?>">
  <?php
    // output each slide
    foreach($images as $imgInfo) {
      // get file obj for the slide
      $f = File::getByID($imgInfo['fID']);
 
      // resize the full size file to fit
      $full = $ih->getThumbnail($f, 970, 485);
      $fp = new Permissions($f);
      if ($fp->canRead()) {
        // only output link if we have a target available
        if ($full) {
          ?>
            <a href="<?php echo $imgInfo['url']?>">
              <?php $ih->outputThumbnail($f, 970, 485); ?>
            </a>
          <?php
 
        // output a thumbnail without link
        } else {
          ?>
            <?php $ih->outputThumbnail($f, 970, 485); ?>
          <?php
        }
  ?>
  <?php } } ?>
</div>

cmscss replied on Aug 4, 2012 at 2:15 am Permalink Reply

So the only issue I've discovered is that if I use an image set instead of specific images, the path to the file is outputted as the url - so a link is generated.

Is that just how the built-in slideshow block works or is there a way to check for a url specifically in the non-file set url field only - hope that makes sense?

Thanks for all your help though - I now understand a little more about how to construct the statements.

Cheers

Ben

MarshaB replied on Aug 3, 2012 at 7:36 am Permalink Reply

To help control the size of the image, you can place overflow:hidden; in the css file. It won't help for images that are too small, but for those people that try to put a 800x800 pixel image into a 300x300 pixel space, it will cut off those images. Then maybe they'll see they need a smaller image!
Marsha
Templates in Time
http://templatesintime.com

Forums

Developing (v7+)

Custom slideshow template - resize images, check for URL, output thumbs

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?