Jump to content

Backend page table list thumbnail size

Recommended Posts

Hi there,

i am wondering about the possibility to define a fixed size for thumbnails displayed in a page table list.
At the moment ist looks like image 1 - but i would like to get something like image 2!

Is this possible? Thanks 

Cheers Simon



Share this post

Link to post
Share on other sites

in your config.php

// min: 100, max: 259 default: 130
$config->adminThumbOptions = array_merge($config->adminThumbOptions, array('gridSize' => 100));

Smaller than 100 (like in your screenshot) is not possible using this approach.

I tried this one too but didn't work. (I think it should!)

$config->adminThumbOptions['gridSize'] = 100;

Learn more about this by reading the comment in /wire/config.php

Share this post

Link to post
Share on other sites

I think you could use CSS, eg with Admin Custom Files or AdminOnSteroids. Phisicaly images would be the same size but would appear smaller.

Share this post

Link to post
Share on other sites
2 hours ago, kixe said:

I tried this one too but didn't work. (I think it should!)

It doesn't because $config->adminThumbOptions is not an array, which you could manipulate. It's just a getter of an object. That's just how php works.

Share this post

Link to post
Share on other sites

Not sure how you got the rectangular thumbnails - mine are always square when rendered inside a PageTable, regardless of the the image field settings. Which isn't a bad thing in this case because the solution involves overriding the JS image sizing with CSS and you're not going to be able to preserve the aspect ratio for each image.

These custom CSS settings (use AdminCustomFiles or AdminOnSteroids) gave the result that follows.

.Inputfield_pt_thumbnails .InputfieldImage .gridImage__overflow img { height:100%; }
.Inputfield_pt_thumbnails td:nth-child(2) .InputfieldImage .gridImage__overflow { height:260px !important; width:260px !important; }
.Inputfield_pt_thumbnails td:nth-child(3) .InputfieldImage .gridImage__overflow { height:100px !important; width:100px !important; }

There is no way to identify individual image fields from the markup so you have use nth-child() selectors to target table columns.

Portrait-format images will not fill their frames.


  • Like 1

Share this post

Link to post
Share on other sites

Just stumbled across this thread and I have a question regarding thumbnail image size in ProcessPageLister grids.

I have this grid in a Process Module:


What I try to do is to resize the thumbnail images in "Product Image(s)" column to 60x60px.

$adminThumbOptions = $this->wire('config')->adminThumbOptions; 
$adminThumbOptions['gridSize'] = 60; 
$this->wire('config')->adminThumbOptions = $adminThumbOptions;

// Instantiate ProcessPageLister with default settings
$this->productsLister = $this->wire('modules')->get('ProcessPageLister');
$this->productsLister->initSelector = '';
$this->productsLister->imageFirst = true;
$this->productsLister->allowBookmarks = false;

But this doesn't work although the $config->adminThumbOptions array has the correct value for "gridSize" the thumbnails are rendered 130x130px.

Any hints?

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By DV-JF
      after searching for nearly an hour, I've found nothing suitable:
      Is it possible to display the name / label of the template in the table-view used for a specific page?
      $template->name template->name template.name $template->label template->label template.label None of above does the job ;(
      The reason I'm asking: I'm using pagtables for a small layoutsystem and want to display also the template name of the page in the table.
      Many greets!
    • By Peter Knight
      I have an image field as follows:
      Max files allowed = 1
      Formatted value = Automatic
      Inputfield = cropimage
      If I follow the instructions here, this needs to be my echo call 
      <?php echo $page->photo_for_course->getThumb('crop-for-course-detail'); ?> But this just outputs the fullpath as a string. The documentations states that "getThumb returns url to the thumbnail you have asked for". So I then thought I needed to tag an ->url on the end as follows
      <?php echo $page->photo_for_course->getThumb('crop-for-course-detail')->url; ?> It's not a first() issue as the file only allows for one image so Im a bit stuck.
      I've achieved this before but was using the $pages API and had a foreach loop. Surely I don't need to foreach here as I'm only using a single image?
      Thanks in advance. I feel like it's you guys that are building this site :-/
    • By Lars
      I have a field called thumbnail_image. It is used in 14 of my templates. It started out as a normal image field reducing uploaded images into 150X150px images.
      After installing CropImage I altered the field type from normal Image into CropImage.
      Something went badly wrong. Already while saving the field change something went wrong after confirming I wanted the change. Unfortunately I did not save the error message at that point.
      Now I get error message in the following cases:
      1: While trying to edit a page based on any of the templates that has the thumbnail_image (CropImage type) field.
      2: If trying to delete the field thumbnail_image (CropImage type) from any of the 14 templates. Once confirming "Delete" I get the error screen.
      3: If trying to edit the thumbnail_image field I get the error screen instead of the Edit Field screen.
      In all cases the error message comes on a plain white page as text only with the following text being the same for all three cases:
      Warning: Creating default object from empty value in C:\wamp\www\wire\modules\Fieldtype\FieldtypeFile.module on line 54
      Catchable fatal error: Argument 3 passed to FieldtypeFile::setupHooks() must be an instance of Inputfield, instance of stdClass given, called in C:\wamp\www\wire\modules\Fieldtype\FieldtypeFile.module on line 56 and defined inC:\wamp\www\wire\modules\Fieldtype\FieldtypeFile.module on line 80
      This error message was shown because site is in debug mode ($config->debug = true; in /site/config.php). Error has been logged.
      I cannot remove the CropImage module since the field is in use.
      I cannot delete the thumbnail_image field since it is used in templates.
      Hoping for some assistance so I can avoid re-creating all my 14 templates...!
      I do not mind loosing what is already in the thumbnail_image field.
    • By Peter Knight
      If my client has added more than 1 image to an image field (called "blog_images"), how could I
      1. Output a grid of images on my webpage as cropped thumbnails.
      2. Make them clickable so they display a lightbox such as http://fancyapps.com/fancybox/
    • By photoman355
      I've been putting together a simple lightbox gallery using prettyPhoto.  I have this working but I only want one thumbnail to launch the gallery and at the moment I'm getting one thumbnail for each image.  Apologies for my poor php skills, I know this is coming from the echo but don't know how to display <img> only for the first list item.
      Here's my code:
      <ul id="gallery1"> <?php foreach($page->images as $img) { $thumb = $page->thumbnail->size(220, 200); echo "<li><a href='{$img->url}' rel='prettyPhoto[gallery1]'><img src='{$thumb->url}' alt='{$thumb->description}' width='{$thumb->width}' height='{$thumb->height}' /></a></li>"; }?> </ul> And my original code:
      <ul id="gallery1"> <li><a href="assets/library/image01.jpg" rel="prettyPhoto[gallery1]"><img src="assets/library/thumb1.jpg"/></a></li> <li><a href="assets/library/image02.jpg" rel="prettyPhoto[gallery1]"></a></li> <li><a href="assets/library/image03.jpg" rel="prettyPhoto[gallery1]"></a></li> </ul> Any help would be greatly appreciated.
  • Create New...