Jump to content
Pravin

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-->

 

Share this post


Link to post
Share on other sites

Yeah missed my cup of coffee so the things got messy a bit @szabesz..

15 hours ago, szabesz said:

Hi, Did you post it twice by accident?

 

 
 
 

Share this post


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

Share this post


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

Share this post


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..

Share this post


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

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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • 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!
       

    • By dalibor
      I'm using hook for retrieving data from image metadata (IPTC) after image upload and filling them to some fields. When I choose server-side image resize, everything works well. But when I use client-side resize (which si much faster and client comfortable  - it uses PWImageResizer.js) image metadata are lost during resizing - I have downloaded the file after resize and checked for EXIF, IPTC etc. and they are not present.  Using PW 3.0.165. Tried to look into PWImageResizer.js but uhh it's too javascreepy to me:) 
    • By fruid
      I'm using custom fields for images (as mentioned here: processwire.com/blog/posts/pw-3.0.142) for a specific images-field, the images of which need to have an HTML-caption. It works fine so far. Now I'm trying to import pages that use this field. I first exported some pages of that kind to see what the spreadsheet would look like. It seems to not separate the captions for each images but instead put all images in one cell and all captions in another.
      How could I go about importing these pages and assign the captions to the images accordingly?
×
×
  • Create New...