Jump to content
apeisa

Release: Thumbnails

Recommended Posts

It would be great if imageSizerOptions like in $image->size() would be available as well:

$image->getThumb('thumbnail', $options);

Maybe, but as of Thumbnails is a visual Tool, I wish to have it like in my dirty Hack.

plus one additional feature: If you have created a Thumb and quality isn't what you have expected, when you go back to recreate it, the CropRectangle should be placed automaticaly at its place, so you have only to select a different quality and / or sharpening pattern.

(Just a dream, - but sometimes they become true) :)

  • Like 2

Share this post


Link to post
Share on other sites

Sorry, I don't understand how to use in my templates :undecided:
I have the "main_image" field using "CropImage" type. I set: thumbnail,310,175
What code I should to use if I want to display this field in a list of pages and in one individual page?
Thanks in advanced

Fernando

Share this post


Link to post
Share on other sites

This should do it. Replace eq(0) with the number of the image in the main_image field.

echo $page->main_image->eq(0)->getThumb('thumbnail');
 
  • Like 1

Share this post


Link to post
Share on other sites

Sorry, I don't understand how to use in my templates :undecided:

I have the "main_image" field using "CropImage" type. I set: thumbnail,310,175

What code I should to use if I want to display this field in a list of pages and in one individual page?

Thanks in advanced

Fernando

thumbnail in this case is the name you reference in the template.

The first() method selects the first image in the list of images attached to the page.

$page->main_image->first()->getThumb('thumbnail');

if it is "portait-small,300,500" it woud be 

$page->main_image->first()->getThumb('portrait-small');
  • Like 1

Share this post


Link to post
Share on other sites

Very clear, however it doesn't work for me.

I'm getting an error in the template. It's strange because in the Admin side, this module works fine

Error:     Exception: Method Pageimage::first does not exist or is not
callable in this context (in C:\xampp\htdocs\test\wire\core\Wire.php line 232)

#0 [internal function]: Wire->__call('first', Array)
#1 C:\xampp\htdocs\test\site\templates\trabajo.php(16): Pageimage->first()
#2 C:\xampp\htdocs\test\wire\core\TemplateFile.php(125): require('C:\xampp\htdocs...')
#3 [internal function]: TemplateFile->___render()
#4 C:\xampp\htdocs\test\wire\core\Wire.php(271): call_user_func_array(Array, Array)
#5 C:\xampp\htdocs\test\wire\core\Wire.php(229): Wire->runHooks('render', Array)
#6 [internal function]: Wire->__call('render', Array)
#7 C:\xampp\htdocs\test\wire\modules\PageRender.module(250): TemplateFile->render()
#8 [internal function]: PageRender->___renderPage(Object(HookEvent))
#9 C:\xampp\htdocs\test\wire\core\Wire.php(271): call_user_func_array(Array, Array)
#10 C:\xampp\htdocs\test\wire\core\Wire.php(229): Wire->runHooks('renderPage', Array)
#11 [internal function]: Wire->__call('renderPage', Array)
#12 C:\xam

This error message was shown because you are logged in as a Superuser. Error has been logged.  

Any idea?

Share this post


Link to post
Share on other sites

This is because it's set to be a single image field, so just don't use first() or eq(0).

Or to make it a multi images field go to the the field settings / Details and set Maximum files allowed to 0 (infinite) or any number greater that 0.

  • Like 2

Share this post


Link to post
Share on other sites

Yes, you're right. Now, I am not getting errors.
But, I'd want this field be limited to one image.
So, should code change?

Share this post


Link to post
Share on other sites

As Ozwim eluded to:

$page->main_image->getThumb('thumbnail');
 
  • Like 1

Share this post


Link to post
Share on other sites

first() or eq(0) for an array of (multiple) images, and leave it off if it's a single image.

Single image:

echo $page->main_image->getThumb('thumbnail');

Edit: adrian beat me to it =)

  • Like 2

Share this post


Link to post
Share on other sites

Guys, many thank for the patience. Very appreciated. I already got it.
Sorry for many questions as well.
My respects

  • Like 1

Share this post


Link to post
Share on other sites

Sorry, one more thing - is it possible (or should I say, can you make it possible) to set just one dimension, or perhaps neither (set them to 0). I would like to allow the user the ability to crop freeform, and then resize automatically (if one dimension set), or later through a template if no dimensions set. I think this would be really useful - often in layouts you want all images the same width, but you don't care about height, and vice versa.

First of all, thank you for this module apeisa (and your sponsor!). I’m also in the need of having this freeform cropping functionality, the only thing you need to do is to set the aspectRatio of jCrop to 0. Thing is, when I try to enter this in the config file:

thumbnail,0,0

The page I use the field on will give me this error:

Width and/or height not found for thumb: thumbnail

It would be a nice piece of extra functionality to have in there and it seems super simple to do it this way. I’ve been going through the module files but I havent found a way around this yet, any insights from you guys?

Thanks in advance!

Thijs

Share this post


Link to post
Share on other sites

Found it, it’s in here: (FieldtypeCropImage.module)

if ($this->w < 1 || $this->h < 1) {
    throw new WireException(sprintf($this->_("Width and/or height not found for thumb: %s"), $thumb));
    return;
}    
I’ll see if I can rewrite this to check for the presence of the values and not for them to be smaller than 1. I think this piece of code casts an empty value (no dimensions entered in config) to 0
$this->w = (int) $crop[1];
$this->h = (int) $crop[2];

So I can’t use is_numeric or is_empty to check if there is a value present. And even if I work around this for the time being (by commeting out the width/height check), the crop I make is not being saved.

Share this post


Link to post
Share on other sites

Sorry guys, I am having busy week and not able to take look. If someone's figures way to support freeform (full or half) cropping, without braking backwards compatibility, I am happy to merge.

Share this post


Link to post
Share on other sites

Hi apeisa,

Thanks for your reply! These are the changes I needed to do in order to make it work:

Comment out this line in FieldtypeCropImage.module

if ($this->w < 1 || $this->h < 1) {
  throw new WireException(sprintf($this->_("Width and/or height not found for thumb: %s"), $thumb));
  return;
}  


And I’ve changed the if / condition in ProcessCropImage.module:

if (!$prefix || $targetWidth == 0 || $targetHeight == 0) {
    $targetHeight = (int) $crop['h'];
    $targetWidth = (int) $crop['w'];
}
 

Not sure if this is the proper way to do it, I guess a second set of eyes would be good before I propose to merge anything!

Share this post


Link to post
Share on other sites

Hi apeisa,

Thanks for your reply! These are the changes I needed to do in order to make it work:

Comment out this line in FieldtypeCropImage.module

if ($this->w < 1 || $this->h < 1) {
throw new WireException(sprintf($this->_("Width and/or height not found for thumb: %s"), $thumb));
  return;
}  


And I’ve changed the if / condition in ProcessCropImage.module:

if (!$prefix || $targetWidth == 0 || $targetHeight == 0) {
    $targetHeight = (int) $crop['h'];
    $targetWidth = (int) $crop['w'];
}

Not sure if this is the proper way to do it, I guess a second set of eyes would be good before I propose to merge anything!

Share this post


Link to post
Share on other sites

I'd like to report an issue:

 

Here is screenshot of what I get when I click on the Profile link. post-1067-0-17449500-1372318808_thumb.pn

Do duplicate the issue:

1. Create new field with type CropImage

2. Assign this field to the "user" template (system template)

3. Go to Modules -> User Profile module.

4. Check the new field you created so that it will show up in the Profile screen.

3. Click on Profile link - right beside Logout. You should be able to see the Profile screen... for now.

4. Now upload a new thumbnail.

5. Save.

6. Meet the screenshot above.

This is the list of site modules I have installed:

AdminBar
AfterSaveActions
FieldtypeCropImage
FieldtypeTemplates.module
MarkupTwitterFeed
ModulesManager
PageEditFoldStatus
PageEditPerRole
PageEditPerUser
PageListPin
PagesCreatedEdit.module
ProcessLatestComments
ProcessPageDelete
ProcessSelectorTest
README.txt
TextformatterVideoEmbed
 
 
Everything goes to normal if you uncheck the thumbnail field from displaying in the User Profile config module.
 

Share this post


Link to post
Share on other sites

Thanks for the report. It will take few days before I can test this, so if anyone can try this with default install without any other modules or custom admin theme it would definitely help.

Share this post


Link to post
Share on other sites

**EDIT**

The problem is solved. I basically hadn't upload all the relevant files for the module. Basic error, my apologies.

ps

It's a very good module, I'm happy!

**//EDIT**

Hello. I've just started using this promising-looking module on the latest build of ProcessWire but I'm having some problems fairly early on.

I installed the module as instructed. Created a new Image field. Change the Inputfield type to CropImage. Set the maximum file uploads to 1. And added this field to a template.

Now when I try and add an image to this field in the page-edit dialogue I get the error message as pictured in the attached image (in short, it says Method PageImage::getThumb does not exist...)

thumb_error_message.jpg

Am I doing something wrong here? Any thoughts on a solution?

Many thanks in advance.

b

Share this post


Link to post
Share on other sites

Am I the only one who finds the naming in this module rather confusing?

In ModulesManager/on PW Site:
- it is called Thumbnails
 
Module detail page:
- after installing it, the title in Admin > Module says Images with cropping
- the class is called ProcessCropImage
- the description says Crop thumbnails
 
in Modules list its components are listed as:
- FieldType: Images with cropping
- Inputfield: Images with cropping
- Process: Image cropping tool
 
So we have about 5 different names:
Image cropping tool
CropImage (FieldtypeCropImage/InputfieldCropImage/ProcessCropImage)
Thumbnails
Images with cropping
Crop thumbnails
 
Is there a reason behind this? I feel this should be more organized.
  • Like 1

Share this post


Link to post
Share on other sites

The classnames are following the nameing conventions,

but the descriptions not all.

I would like the name Thumbnail in front of all 3 descriptions because it is known as "the Thumbnails module"! :)

Share this post


Link to post
Share on other sites

The classnames are following the nameing conventions,

but the descriptions not all.

I would like the name Thumbnail in front of all 3 descriptions because it is known as "the Thumbnails module"! :)

They still could be named FieldtypeThumbnails, InputfieldThumbnails and ProcessThumbnails ... if Thumbnails is the way to go.

  • Like 2

Share this post


Link to post
Share on other sites

Hi all,

is there a method to regenerate all thumbs from api (command line)?

I have to change all thumbnail setting and after that recreate thumbs with different sizes and delete the oldest.

Probably a double request but I cannot find the right post/thread.

Thanks

Share this post


Link to post
Share on other sites

I have just tested and merged pull request from horst and owzim that adds support for PageImageManipulator in thumbnails cropping view. This is great addition!

If you don't have PIM installed, it will work just as usual, so updating should be safe. If you do use PIM, make sure you are running latest version, since earlier throws error when using cropping tool.

Thanks for your work on this horst and owzim!

post-18-0-08896300-1378485336_thumb.png

PS: It maintains the settings and also coordinates, but coordinates aren't active when re-cropping. It shows preview of different part of image, but when proceeding still (rightly) crops the old part. Probably the cropping tool JS needs some refresh...?

  • Like 3

Share this post


Link to post
Share on other sites

Hi all,

is there a method to regenerate all thumbs from api (command line)?

I have to change all thumbnail setting and after that recreate thumbs with different sizes and delete the oldest.

Probably a double request but I cannot find the right post/thread.

Thanks

Unfortunately there ain't API for that. Should be possible with PHP though. Anyone done cleaning script for that?

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.

Guest
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 Mike Rockett
      Jumplinks for ProcessWire
      Release: 1.5.56
      Composer: rockett/jumplinks
      Jumplinks is an enhanced version of the original ProcessRedirects by Antti Peisa.
      The Process module manages your permanent and temporary redirects (we'll call these "jumplinks" from now on, unless in reference to redirects from another module), useful for when you're migrating over to ProcessWire from another system/platform. Each jumplink supports wildcards, shortening the time needed to create them.
      Unlike similar modules for other platforms, wildcards in Jumplinks are much easier to work with, as Regular Expressions are not fully exposed. Instead, parameters wrapped in curly braces are used - these are described in the documentation.
      Under Development: 2.0, to be powered by FastRoute
      As of version 1.5.0, Jumplinks requires at least ProcessWire 2.6.1 to run.
      View on GitLab
      Download via the Modules Directory
      Read the docs
      Features
      The most prominent features include:
      Basic jumplinks (from one fixed route to another) Parameter-based wildcards with "Smart" equivalents Mapping Collections (for converting ID-based routes to their named-equivalents without the need to create multiple jumplinks) Destination Selectors (for finding and redirecting to pages containing legacy location information) Timed Activation (activate and/or deactivate jumplinks at specific times) 404-Monitor (for creating jumplinks based on 404 hits) Additionally, the following features may come in handy:
      Stale jumplink management Legacy domain support for slow migrations An importer (from CSV or ProcessRedirects) Feedback & Feature Requests
      I’d love to know what you think of this module. Please provide some feedback on the module as a whole, or even regarding smaller things that make it whole. Also, please feel free to submit feature requests and their use-cases.
      Note: Features requested so far have been added to the to-do list, and will be added to 2.0, and not the current dev/master branches.
      Open Source

      Jumplinks is an open-source project, and is free to use. In fact, Jumplinks will always be open-source, and will always remain free to use. Forever. If you would like to support the development of Jumplinks, please consider making a small donation via PayPal.
      Enjoy! :)
    • By BitPoet
      As threatened in Ryan's announcement for 3.0.139, I built a little module for sliding toggles as a replacement for checkboxes. Styling of the input is CSS3 only (with all the usual caveats about older browsers), no JS necessary, and may still be a bit "rough around the edges", so to speak, since I didn't have much time for testing on different devices or brushing things up enough so I'd feel comfortable pushing it to the module directory. But here's the link to the GitHub repo for now:
      InputfieldSlideToggle
      Fieldtype and Inputfield that implements smartphone-style toggles as replacement for checkbox inputs. The visualization is CSS-only, no additional JS necessary.
      Status
      Still very alpha, use with caution!
      Features / Field Settings
      Size
      You can render the toggles in four different sizes: small, medium, large and extra large.
      Off Color
      Currently, "unchecked" toggles can be displayed either in grey (default) or red.
      On Color
      "Checked" toggles can be rendered in one of these colors: blue (default), black, green, grey, orange or red.
      Screenshots

      Some examples with checkbox label


      View all Size and Color Combinations
      Small toggles Medium toggles Big toggles Extra big toggles  









    • By Orkun
      Hi Guys
      I needed to add extended functionalities for the InputfieldDatetime Module (module is from processwire version 2.7.3) because of a Request of Customer.
      So I duplicated the module and placed it under /site/modules/.
      I have added 3 new Settings to the InputfieldDatetime Module.
      1. Day Restriction - Restrict different days based on weekdays selection (e.g. saturday, sunday) - WORKING

       
      2. Time Slots - Define Time slots based on custom Integer Value (max is 60 for 1 hour) - WORKING

       
      3. Time Range Rules per Weekday - Define a minTime and MaxTime per Weekday (e.g. Opening Hours of a Restaurant) - NOT WORKING PROPERLY

       
      The Problem
      Time Slots and Day Restriction working fine so far. But the Time Range Rules per Weekday doesn't work right.
      What should happen is, that when you click on a date, it should update the minTime and maxTime of the Time Select.
      But the change on the select only happens if you select a date 2 times or when you select a date 1 time and then close the datepicker and reopen it again.
      The time select doesn't get change when you select a date 1 time and don't close the picker.
      Here is the whole extended InputfieldDatetime Module.
      The Files that I have changed:
      InputfieldDatetime.module InputfieldDatetime.js jquery-ui-timepicker-addon.js (https://trentrichardson.com/examples/timepicker/) - updated it to the newest version, because minTime and maxTime Option was only available in the new version  
      Thats the Part of the JS that is not working correctly:
      if(datetimerules && datetimerules.length){ options.onSelect = function(date, inst) { var day = $(this).datetimepicker("getDate").getDay(); day = day.toString(); var mintime = $(this).attr('data-weekday'+day+'-mintime'); var maxtime = $(this).attr('data-weekday'+day+'-maxtime'); console.log("weekday: "+day); console.log("minTime: "+mintime); console.log("maxTime: "+maxtime); var optionsAll = $(this).datetimepicker( "option", "all" ); optionsAll.minTime = mintime; optionsAll.maxTime = maxtime; $(this).datetimepicker('destroy'); $(this).datetimepicker(optionsAll); $(this).datetimepicker('refresh'); //$.datepicker._selectDate($(this).attr("id"),date); //$.datepicker._base_getDateDatepicker(); // var inst = $.datepicker._getInst($(this)); // $.datepicker._updateDatepicker(inst); /*$(this).datetimepicker('destroy'); InputfieldDatetimeDatepicker($(this), mintime, maxtime); $(this).datetimepicker('refresh'); */ // $(this).datetimepicker('option', {minTime: mintime, maxTime: maxtime}); } } Can you have a look and find out what the Problem is?
      InputfieldDatetime.zip
       
      Kind Regards
      Orkun
    • By teppo
      This module tracks changes, additions, removals etc. of public (as in "not under admin") pages of your site. Like it's name says, it doesn't attempt to be a version control system or anything like that - just a log of what's happened.
      At the moment it's still a work in progress and will most likely be a victim of many ruthless this-won't-work-let's-try-that-instead cycles, but I believe I've nailed basic functionality well enough to post it here.. so, once again, I'll be happy to hear any comments you folks can provide
      https://modules.processwire.com/modules/process-changelog/
      https://github.com/teppokoivula/ProcessChangelog
      How does it work?
      Exactly like it's (sort of) predecessor, Process Changelog actually consists of two modules: Process Changelog and Process Changelog Hooks. Hooks module exists only to serve main module by hooking into various functions within Pages class, collecting data of performed operations, refining it and keeping up a log of events in it's own custom database table (process_changelog.) Visible part is managed by Process Changelog, which provides users a (relatively) pretty view of the contents of said log table.
      How do you use it?
      When installed this module adds new page called Changelog under Admin > Setup which provides you with a table view of collected data and basic filtering tools See attached screenshots to get a general idea about what that page should look like after a while.
      For detailed installation instructions etc. see README.md.
       


    • By Gadgetto
      Status update links (inside this thread) for SnipWire development will be always posted here:
      2019-08-08
      2019-06-15
      2019-06-02
      2019-05-25
      If you are interested, you can test the current state of development:
      https://github.com/gadgetto/SnipWire
      Please note that the software is not yet intended for use in a production system (alpha version).
      If you like, you can also submit feature requests and suggestions for improvement. I also accept pull requests.
      ---- INITIAL POST FROM 2019-05-25 ----
      I wanted to let you know that I am currently working on a new ProcessWire module that fully integrates the Snipcart Shopping Cart System into ProcessWire. (this is a customer project, so I had to postpone the development of my other module GroupMailer).
      The new module SnipWire offers full integration of the Snipcart Shopping Cart System into ProcessWire.
      Here are some highlights:
      simple setup with (optional) pre-installed templates, product fields, sample products (quasi a complete shop system to get started immediately) store dashboard with all data from the snipcart system (no change to the snipcart dashboard itself required) Integrated REST API for controlling and querying snipcart data webhooks to trigger events from Snipcart (new order, new customer, etc.) multi currency support self-defined/configurable tax rates etc. Development is already well advanced and I plan to release the module in the next 2-3 months.
      I'm not sure yet if this will be a "Pro" module or if it will be made available for free.
      I would be grateful for suggestions and hints!
      (please have a look at the screenshots to get an idea what I'm talking about)
       




×
×
  • Create New...