Forums

Page List using c5 generated Thumbnails

Permalink
Hi all,

I am a newb with Concrete5 and I am just setting up a simple small site using the elemental theme. I'm using a custom portfolio page that is essentially exactly the same as the included portfolio page in that it includes a page list block showing the thumbnails of the project pages under the portfolio page.

I am having some issues with the images I am using for the thumbnails though, the images are different sizes and are causing the page list to display weirdly with odd gaps and spaces.

I know that concrete5 generates different thumbnails of varying sizes from images. Is there a way I can use one of these generated thumbnails (such as ones with set dimensions) as my thumbnail for the specific project page? That way I think it would look much neater and avoid the random gaps and spacing.

Thanks in advance!
FlappyHands
 
mnakalay replied on at Permalink Reply
mnakalay
If you want to use thumbnail type, first you have to create a thumbnail type with the dimensions you need. If you want to make sure all images will be exactly the same size, make sure you select to crop if necessary. Make note of your thumb type handle as you'll need it later.

Then you have to create a template for the page list (are you sure it is the page list as on Elemental's portfolio page they use the topic list?)

To create the template just take a full copy of the page list's view.php file and put it in application/blocks/page_list/templates and give it a new name with only small caps and underscores. For instance my_template.php

Then you will modify that file. More or less around line 105 you will see this:
<?php if (is_object($thumbnail)) {
    ?>
    <div class="ccm-block-page-list-page-entry-thumbnail">
        <?php
        $img = Core::make('html/image', array($thumbnail));
        $tag = $img->getTag();
        $tag->addClass('img-responsive');
        echo $tag; ?>
    </div>
    <?php
} ?>

You will replace it all with this
<?php if (is_object($thumbnail)) {
    $thumbType = \Concrete\Core\File\Image\Thumbnail\Type\Type::getByHandle("your_thumb_type_handle");
    $baseVersion = $thumbType->getBaseVersion();
    $imageSrc = $thumbnail->getThumbnailURL($baseVersion);
    ?>
        <div class="ccm-block-page-list-page-entry-thumbnail">
            <img src="<?php echo $imageSrc; ?>" class="img-responsive">
        </div>
        <?php
} ?>

And it should work.
FlappyHands replied on at Permalink Reply
FlappyHands
Thanks for your reply, man!

I was hoping I would be able to do this without diving in to PHP but I should have known better haha. It's been a very long time since I used PHP. I will certainly give it a bash though! Thanks for your help
FlappyHands replied on at Permalink Reply
FlappyHands
Okay, so I just realised my page list was using the pre-made custom template "thumbnail_grid", how can I use your code to apply it to the thumbnail_grid template? Can I just whack a "thumbnail_grid_custom.php" inside the thumbnail_grid folder and edit the code there to use thumbnails in a similar fashion?

What code would I need to change to achieve the same result in this case? Thanks again for your help, man.

EDIT: After messing around with the thumbnail_grid preset I think I found the code that I should replace with the handy code you gave me, but I think it is being overridden/messed with by the view.css file.

What do I need to change in the view.css file to achieve the same results but in the thumbnail_grid format?
mnakalay replied on at Permalink Best Answer Reply 1 Attachment
mnakalay
That CSS really doesn't have anything that would mess that up.

And you should never modify directly a core file.

I'm attaching the grid template modified to use the thumbnail type. Unzip the archive in application/blocks then modify the file view.php inside application/blocks/page_list/templates/thumbnail_grid_modified to use your own thumbnail type handle (line 3)

Then apply the template Thumbnail Grid Modified to your page list
FlappyHands replied on at Permalink Reply
FlappyHands
I didn't edit the core file, I made a copy of it from the concrete/blocks/ folder, placed it in the application folder and changed the folder name to thumbnail_grid_custom as it seems folder titles are also found when making custom templates :)

Hope that's alright? I didn't want to mess with thed default blocks so I put my custom stuff in the application folder where there is nothing under blocks.

Okay, I deleted the view.css file in my custom folder and it seems to be working well! The thumbs are all the same size, but it's cropping them strangely. I'm guessing that's an option I can change in the thumbnail settings?

Also the link text is displaying below the image instead of on top of the image when hovering. Not sure how I can change that?

EDIT: I'm using your attached file and it works perfectly :) Though the gap between the images is a little large. How can I make the gap a bit smaller?

Thanks once again for all your help, man. You didn't have to go to all this trouble to help out an idiot like me, it's much appreciated.
mnakalay replied on at Permalink Reply
mnakalay
You are very welcome, I think it's no trouble helping someone who has legitimate questions.

As for the gap, weirdly enough, it is controlled by CSS in the theme (Elemental) instead of the block.

Paste the following CSS in your thumbnail grid CSS file, at the bottom for instance and modify it to your liking. 

div.ccm-page div.ccm-block-page-list-thumbnail-grid-wrapper div.ccm-block-page-list-page-entry-grid-item {
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 30px;
}