Filtered portfolio picture size is not efficient

• vunguyen

  said

  Hi guys,

  I have a filtered portfolio page with 4 columns. The top image of each portfolio is 242x136px
  However, the site is loading 768×432px pictures.
  I have a very large number of portfolio items. It is quite a big problem for me :/
  I think I have 2 solutions:

  1. How do I get the theme to load a smaller version of the pictures?
  OR
  2. Does any one knows a photo lazy load plugin that works with Moxie?

  Cheers guys!

• andy

  said

  Because it’s impossible to predict the settings a customer is going to use (number of columns, etc) we have to set the image size to fit the largest potential size. I did make the assumption you weren’t going to be creating 1 column portfolio pages or the the images would be 1300px wide.

  You can modify the thumbnail sizes generated by WP in the theme’s “functions.php” file.

• vunguyen

  said

  Thank you @andy
  Do you or anyone know a lazy load plugin that works with Moxie?
  I try not to modify the theme core files as much as possible.

  Thank you!

• andy

  said

  I’ve never used a lazy load plugin of any kind.

• vunguyen

  said

  Hi @andy,

  I tried to modify the functions.php

          // Image sizes
    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 783, 9999 ); // default width, unlimited height, soft crop
    add_image_size( 'portfolio-thumb',  234, 131, true ); // 16x9 ratio, hard crop
    add_image_size( 'half-width-thumb', 575, 9999 );
    add_image_size( 'full-width-thumb', 1200, 9999 );
  

  However, the theme is still loading 768x432px pictures.
  Could you please let me know what else do I need to do?

  Thank you!

• jeffw

  said

  Hi, vsync.

  You’ve changed the correct parameters. When I make this change on my Moxie sandbox site I get 234×131 portfolio thumbnails. Are you using a cache plugin? if so, deactivate it and try again.

  Always keep in mind that if you modify the core theme files then when you need to update the theme your modified files may be overwritten and your modifications lost. Tweaks to CSS can be added to your Custom CSS box in Design Settings. If you feel that you need to modify CSS files consider using a custom stylesheet, if you feel that you need to modify PHP files consider creating a child theme, otherwise updating the theme may become quite difficult for you.

• vunguyen

  said

  Hi jeffw,

  The display portfolio thumbnail showing up in the correct size.
  However, if you look in the resource tab, the image they are loading is still 768x432px. They just look like they are 234×131.
  I have no cache of any kind.
  To test it, I go into the installation using ftp and delete some image with 768x432px size. The result is missing thumbnail. You can see it on my test site here:
  http://trgn.org/about-us/our-people/

  I understand that changing the functions file going to be a problem for me when I upgrade the theme. However, it’s a tiny change so I think it would be ok.

  Thank you.

• jeffw

  said

  Sorry, vsync, I should have explained in more detail.

  Changing those parameters won’t affect any featured images that have been set prior to you making that change. It will affect only featured images that you set after making that change. To make existing featured images load a smaller thumbnail you will need to remove each featured image from existing portfolio items and then set the featured image again for each of those portfolio items. This is because the thumbnail associated with each featured image is created and set in stone (by WordPress) at the time the featured image is set.

  Do you follow?

• vunguyen

  said

  Hi jeffw,

  I did do that :/
  I removed the featured image and re-added them but it doesn’t seem to make a difference.
  I will delete the image entirely and then try to re-upload them to see what happens.

  Thank you.

• jeffw

  said

  First change and save those parameters in ‘functions.php’, then visit each portfolio item and remove the featured image. Now when you add a featured image a thumbnail of the dimensions you set in those parameters will be created and used. I’ve tested this, I know that it works. You don’t need to upload anything, the thumbnail is created automatically at the time the featured image is set.

• vunguyen

  said

  Hi jeffw,

  For the life of me. I can’t get it to work like you said.
  - I made the change in the functions file.
  - I removed featured image.
  - I add a featured image
  > doesn’t work so i remove the featured image and then go delete all the resize versions of all upload image.
  - I re-add the featured image.
  > It still doesn’t work.
  > Because I deleted the 768x432px version, now it’s showing up as missing picture.

  Clarification: By “doesn’t work” I meant that the code looks something like this:

  <img width="234" height="131" src="http://localhost/sample/wp-content/uploads/2013/06/sample-picture-768x432.png" class="attachment-portfolio-thumb wp-post-image" alt="portrait-holder">
  

  If I check the resources tab, I can see the image being load is 768x432px
  You can see a sample page on http://trgn.org/about-us/our-people/

  Thank you.

• jeffw

  said

  I’m not sure why it works for me but not for you. Try deleting all your old portfolio items and creating them again from scratch.

• andy

  said

  WordPress doesn’t regenerate thumbnails for existing media when the parameters change. Try uploading a new image with the updated dimensions and it should be the correct size.

  After the sizes are changed in the code you can run a plugin to resize your existing media files. I’ve used this one a dozen or more times in my development because that’s when the size is most likely to be in flux, before the theme is complete.

  http://wordpress.org/plugins/ajax-thumbnail-rebuild/

  Keep in mind, if you’re still expecting Moxie to be a hi-dpi theme, the images must be at least double the size of the area they are filling (which is 4x the file size). So if you have a 200×100 pixel image area it must have a minimum of 400×200 pixel image inserted.

• andy

  said

  Also, make sure it’s not loading a cached page.

  Test a clean Moxie install with your edited functions.php file to get a better idea of where the problem is happening. If the clean install works properly you need to check your WP settings and other site specific things (like caching).

• jeffw

  said

  I now realise the reason why it worked for me was because (as I very often have to when testing anything) I was working with a fresh install so all my portfolio item featured images were being created for the first time.