Jump to content
Sign in to follow this  
statestreet

image->size() without crop

Recommended Posts

I'm building a little photography portfolio site and I'm running into a question with image->size(). For most applications, the sizing to fit and center-crop is great, but for this site, I want to have a maximum width and maximum height, so that if the photo is narrower than the specified size, it gets smaller and has space on the sides, and if it's shorter, it gets space on the top and bottom.

In other words, I'm looking to size the image such that it never gets cropped; you see the whole image even if it means making it smaller. Is there a way to do that with size()?

Share this post


Link to post
Share on other sites

You would have to write some logic to check the width and height using $image->width() and $image->height() to see which side you want to scale it down on, but then I think it's just a case of using $image->size() and only putting in the width or height

For exams I think I you had an image that was landscape and you wanted to scale to a width of 400px you should be able to do $image->size(400,0) and to scale by height only switch the numbers around.

This is all off the top of my head but I'm pretty sure that setting 0 as one of the dimensions just let's PW work out that other dimension for you.

Was that what you were after?

  • Like 2

Share this post


Link to post
Share on other sites

Ah yes, that's what I needed! It turns out $image->width() and $image->height() are actually rendering functions, so I was able to just do this:

$mainimage = $page->image;
if($mainimage->width >= $mainimage->height) {
 echo '<img src="' . $page->image->width(768)->url . '" alt="' . $page->title . '" id="displayimg" />';
} else {
 echo '<img src="' . $page->image->height(575)->url . '" alt="' . $page->title . '" id="displayimg" />';
};
  • Like 5

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Marvin
      Hello, my name Marvin, i want to ask something. I'm new at processwire, and still learn it, i try yo showing an image, at a table, the image was show, but i can't resize the image
      please HELP
      Here i attach, my code belor
      <?php $num = 1; foreach($pages->get("/files/")->children as $child) { $current = $child === $page ? " class='current'" : ''; $result = $child->images; // $result->width(900); // $result->height(100); foreach($result as $items){ foreach($pages->get($child->name)->files as $file) { // $file = $child->files; // echo $file->name; echo "<tr><td>".$num++.".</td><td>".$child->title."</td><td>".$child->text_1."</td><td>".$child->text_2."</td><td>".$child->text_3."</td><td><a href='".$file->httpUrl."'>".$file->name."</a></td><td><img src='".$items->url."'></td></tr>"; } } } ?>  
    • By Bike
      Hello everyone!
      I am new to PW and at this moment there are these issues that I cannot clearly understand:
      1) Image Position
      Previously I used TinyMCE and there I could get an image floating left or right by simply selecting it and pressing the text justify buttons from the menu bar. In CKEditor however it just causes the hole paragraphs content to be aligned which results in code like this and of course the image is not floating that way:
      <p class="xyz" style="text-align:right"><img alt="" src="someimage.jpg" width="1000" /></p> Q: Is it possible to add float to images just by clicking the text align buttons? As far as I figured it out the only way to align images is within the image dialouge which I find is pretty inconvenient.
      2) Image Caption / Figure / Figcaption
      When a title is given to an image it is wrapped inside a figure tag and a figcaption tag is applied. That's fine. But I need the image to be wrapped inside another picture tag for styling reasons (I want to add a shadow png with picture::after). I'd like to end up with this:
      <figure><picture><img alt="" src="someimage.jpg" width="1000" /></picture> <figcaption>Caption there</figcaption> </figure> Q: I think I have to modify the plugins code to achieve it, right? If so does anyone knows the file / location?
      Q: If a figure tag is placed how would I change its position say to another paragraph? Drag & drop just relocates the image leaving the figure tag where it was. How to reposition the whole thing?
      Q: How / where would I enter image description the be shown only in say a lightbox but not alongside the image itself? I thought the textarea provided in the image field could do the job but how to access it from the editor? Even possible?
      Well I hope someone understands and I'd be thankful for a clue of any of these questions.
      ✌️ Bike
       
    • By dfile
      Hello,
      I am running ProcessWire 3.0.165 but $input->urlSegmentLast or $input->urlSegment(-1) does not work as expected.
      Or do I something wrong?
      Thank you.

    • By theoretic
      Hi there! And thanks for Processwire!
      It appears there's a possible bug in Processwire 3.0.170 concerning file and/or image inputfield. Creating such a field results in the following error:

      Fatal Error: Uncaught Error: Call to a member function get() on null
      The inputfield is created however. The closer look reveals a problem at line 60 in wire\modules\Fieldtype\FieldtypeFile\config.php:
      if(!$value) $value = $fieldtype->get('defaultFileExtensions'); Commenting this line removes the problem, but the newly created inputfield requires 'Allowed file extensions' config option to be set (which is rather expectable since i commented the above-cited line of code). Never faced this problem before, hope it can be resolved.
    • By bramwolf
      Hi Guys,

      I found here: https://processwire.com/docs/selectors/#finding2 that I can exclude results from my $pages->find($selctor); query by using parent!=123 ( parent ID ) But I was wondering if I can
      also do so based on the parent template? I've tried doing it by itterating over the matches array and dropping the matches with the parent but since the result is limited for use with the paginator
      it only drops the items from the batch displayed on this page. Say from the results within matches 0 - 20 and not the entire 0 - 220.

      Anybody have a idea of how to achieve this? 🙂

      Thanks in advace!
      Bram 
×
×
  • Create New...