Jump to content

Image Sizer options setting quality of image


Recommended Posts

How to set the image quality as per desired..

I tried using the above code but I get the original image size..

<!--Content with Image left-->
<?php 
    $i = 2;
    foreach($page->page_content as $each) {
    if( $i%2 == 0 ){ 
?>
   <section class="imageblock about-1">
          <div class="imageblock__content col-md-6 col-sm-4 pos-left animated fadeInLeft">
              <div class="background-image-holder">

                   <?php  
                   $option1 = array(
                                    'quality' => 60,
                                    'upscaling' => true,
                                    'cropping' => true,
                                    );

                   $pravin= $each->single_image->size(790,650,$option1); ?>
                   <img alt="image" src="<?php echo $pravin->url; ?>" />
              </div>
          </div>
                  <div class="container container-body">
                      <div class="row">
                          <div class="col-md-5 col-md-push-7 col-sm-8 col-sm-push-4 animated fadeInUp">
                              <?php echo $each->body; ?>
                          </div>
                      </div>
                      <!--end of row-->
                  </div>
                  <!--end of container-->
     
   </section>
<!--Content with Image on left-->

   <?php } else { ?>
<!--Content with Image on right-->
     <section class="imageblock about-1">
                <div class="imageblock__content col-md-6 col-sm-4 pos-right animated fadeInRight">
                    <div class="background-image-holder">
                    <?php $pravin= $each->single_image->size(790,650,$option1); ?>
                   <img alt="image" src="<?php echo $pravin->url; ?>" />
                    </div>
                </div>
                <div class="container container-body">
                    <div class="row">
                        <div class="col-md-5 col-sm-8 animated fadeInUp">
                            <?php echo $each->body; ?>
                        </div>
                    </div>
                    <!--end of row-->
                </div>
                <!--end of container-->
     </section>
  <?php } 
              ++$i;
              }         ?>
   
<!--Content with Image on right-->

 

Link to post
Share on other sites
17 hours ago, Pravin said:

I tried using the above code but I get the original image size.

You probably have an existing image variation from before you set a custom quality setting. PW looks to see if there is an existing variation for an image before it creates one. This works well for variations of width and height, but unfortunately the quality, sharpening and upscaling settings are not recorded in the image name so you have to force a new image if you change one of these settings. Some time ago I made a wishlist post about this.

You can clear the variations for an image via the admin, or you can temporarily add 'forceNew' => true to your settings array just to create the variation, then remove it.

$option1 = array(
	'quality' => 60,
	'upscaling' => true,
	'cropping' => true,
	'forceNew' => true,
);

 

  • Like 3
Link to post
Share on other sites
Just now, Pravin said:

So all I have to do is add 'forceNew' => true in the array right

Yeah, but don't leave it in there permanently or you'll be recreating the image over and over again needlessly.

  • Like 1
Link to post
Share on other sites

 

Spoiler

Yeah, but don't leave it in there permanently or you'll be recreating the image over and over again needlessly.

I need all the images on my site to be optimised so should i set it in the config file with 'forceNew'=> true or is there any alternate solution for the same @Robin S..

Link to post
Share on other sites
1 minute ago, Pravin said:

I need all the images on my site to be optimised so should i set it in the config file with 'forceNew'=> true or is there any alternate solution for the same

You only need to force a new variation if there is an existing variation that was created with different quality, sharpening or upscaling settings. Once you have got rid of these existing variations you don't need to keep creating new images as that's a waste of server resources. From that point forward PW will serve your variation with the custom quality setting.

If you are sure you want all your images with quality 60 then you could set that in config.php. Or if it will vary use the options array when you get the image via the API, as you are doing.

If you want to do a one-off clearing of variations site-wide there is a module for that, but note the warning about variations used in RTE fields.

  • Like 1
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
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By spercy16
      These issues should be fairly easy for any intermediate to advanced ProcessWire developer to answer. I'm new to PHP and relatively new to ProcessWire and just need a bit of help. What I'm trying to do is bring in a couple of cards from my Projects page to display on my home page. I finally got the code right to bring in the cards but right now they're using my original images instead of my resized "variations". So firstly, I would like to know how to reference the variations of my images instead of using the original. Secondly, I need to grab only four of the cards from the Project page and not import in all ten. It should be just two small changes to my code to do these things (I would imagine). Here is the code I currently have for that section:
      <?php // https://processwire.com/api/arrays/ // check if the array of images has items if (count($pages->get("/projects/")->images)) : // get array of images from the field $images = $pages->get("/projects/")->images; $count = 0; // iterate over each one foreach ($images as $image) : $count++; $sectionText = $pages->get("/projects/")->get("paragraph_$count"); $img = $image; $buttonCode = $pages->get("/projects/")->get("url_$count"); ?> <span id="card<?php echo $count?>" class="card"> <img class="cardThumb" src="<?php echo $img->url; ?>" alt="<?php echo $image->description; ?> Thumbnail" /> <div class="cardBody"> <div class="cardText"> <h2><?php echo $img->description; ?></h2> <?php echo $sectionText; ?> </div> <div class="primaryBtn"> <a href="https://www.paypal.com/donate?hosted_button_id= <?php echo $buttonCode; ?> &source=url"> <button> <i class="fas fa-donate"></i> Donate </button> </a> </div> </div> </span> <?php endforeach; endif; ?> Thanks in advance for any help!
    • By skeltern
      WebP image support is great and works fine. But once created I've issues to get rid of all API generated WebP variations.
      The backend image field variations "Delete" works and I can remove all variations JPEG plus WebP. Image list is clean but all WebP API variations are still stored in file system (for instance files/12345/84.900x675.webp etc). I can only use ImageSizer with temp 'force' option to request fresh WebP variations or have to delete WebP files from folders. No other way so far. Tested with 2 sites and latest master PW 3.0.165.
      Is there somewhere a "magic button" or config/setup thing to solve my sticky WebP issue?
    • By psy
      I've searched, and maybe missed, the solution. I have a 'normal' images field and uploading images with a file size greater than 10Kb is fine. Any image size smaller results in the never-ending spinner and no upload.
      No min/max width/height set on image uploads in admin, ie just the defaults.
      Any ideas on how to fix?
      Using:
      PW: 3.0.175
      PHP: 7.3
      Marking it as "Resolved" rather than "Solved" as it auto-magically fixed itself. No idea whether PW, PHP, or just an internet hiccough... All good now 🤞
    • By totoff
      Dear all,
      tomorrow I'll have to introduce some editors on how to upload and edit images in image fields in Processwire. The site in question is quite image rich and I've spent some time to serve the appropriate images via scrcset already cropped for different screen sizes.
      However, the backend offers a lot of possibilities to manipulate images and most of them I'm not familiar with because as a developer I've never spent much thinking on what all the features might be good for … Yet I'm concerned that my editors work on images in the backend may interfere with my optimization strategies in the templates.
      Is there a general rule of thumb what content editors should do or not do with images in order not to break srcset strategies etc.? Maybe there is already a source of information you could point me to?
      Your recommendations are much appreciated!
    • By totoff
      Dear all,
      I'm upgrading an older side with the new custom fields for images feature as of 3.0.142. My image field is set to "Automatic" and holds a bunch of images together with their respective description on each page. New custom fields include "caption" among others and to make my live easier I I'm trying to populate "caption" with the value from the (default) description field. But unfortunately I can't seem to find out how to save the newly set values. This is my code:
      <?php foreach (page()->images as $image) { $image->set('caption', $image->description); bd($image->caption); echo files()->render("markup/views/view-card-image-fancybox.php", array('image'=>$image)); } ?> <?php $page->save(); bd($page->save()); ?> This sets the value as intended (see screenshot) but doesn't save it permanently to the database. What am I doing wrong?
      Thanks!
       

×
×
  • Create New...