Tagged: image, resize, responsive, size, width
-
AuthorPosts
-
April 18, 2014 at 7:48 am #253018
This has been a really great theme!
I just installed the latest theme update and am glad I kept a backup of the older release. I have been browsing the forums for an answer to my regarding why images site-wide (inserted using the editor) are now displaying incorrectly. It looks like the theme makers have decided to override the WP resize tool feature. Now any image inserted in the editor is displaying 100% of the parent container width. While I understand and appreciate that this was an effort to increase responsiveness, for some it can create more problems than it solves. The related thread I was reading is located here:
https://kriesi.at/support/topic/image-function-still-not-working-correctly/
I would have responded to this thread, however it has been closed. I just want to mention that this was the first thread I’ve encountered where the solution was less than desirable. I know this is not the norm (the solutions offered here are usually exceedingly helpful, positive and prompt). I thought I’d try to shed some new light on why the answers provided may feel unsatisfactory for some:
– Not being able to use a new feature of the latest WP 3.9 seems counter-intuitive.
– This may confuse users when they try to help themselves using the WordPress guides/codex, since everywhere they read will tell them how this feature should work (the first thing I did was go to the WordPress support site and RTFM to see what was up).
– The fix (although minor for an experienced user) requires a core edit that will be wiped out on the next theme update. This might be easy for me, but not for a client. It means I’m going to get a few calls to fix things that I’d rather not have to fix since I encourage clients and friends to purchase this theme.
– Being required to upload multiple copies of the same image (just to increase or decrease the image size by 10-50 pixels in my client’s case) is neither efficient nor convenient. Yes, users should ideally use images at the correct size whenever possible. However, expecting everyone should know how to use an image editor is not realistic. Expecting them to be able to mass edit and re-upload is also not realistic.
– There are plenty of reasons to not use the enfold layout builder image insert (such as the axillary fields/tabs provided on Woocommerce product pages where the layout builder is not available). Graphics inserted here can added up to thousands of images on a single e-commerce site suddenly not working correctly (this will be the case on one of my client sites if he chooses to update). Re-sizing all of these images and re-uploading and re-inserting is not a feasible option for him. Neither is editing the core to have it wiped out next update resulting in frustrated calls to the person who recommended this theme to them (me). Editing 2000+ product pages to assign a css style to re-size each image (slightly) as needed is also unfeasible.
– WordPress changed/modified the WP resize tool for a reason, because users wanted this to be an easy to use feature.
Anyway, I do very much appreciate all of the hard work that went into this theme. I don’t like to complain about any feature. I usually just open the child/custom CSS in Dreamweaver and make quick edits there, but it won’t work persistently in this case so I thought I’d post my feedback here.
Can you please consider making this an option that can be turned on/off so users can use the new feature provided in WP without making core edits?
Thanks,
Crys :)- This topic was modified 10 years, 7 months ago by cryscryb.
April 22, 2014 at 1:31 am #254084Hey cryscryb!
With the new image sizing tool there definitely might be a change in how images are handled for responsive layouts but there are some alternatives you may have missed in the current implementation.
Each time you upload an image to WordPress it auto creates a number of thumbnails for you. The theme hooks into this function and adds some more.
When you add an image into a layout you can choose the size of the image to add in based on any of these sizes. The theme then adds a rule to the image so that it auto expands to 100% width of its container on the front end regardless of what size you’ve chosen.
To control the size you would wrap that image in a container using a shortcode so that its container is smaller. In this way keeping the image responsive but in proportion to your layout.
Cheers!
DevinApril 22, 2014 at 3:00 am #254111I will keep this in mind for future use, however in my existing enfold install (and several clients) this requires editing 2000+ products/variation pages to add new image sizes and column shortcodes. I was hoping to avoid this as it is extremely time consuming. I’ll likely disable this in my own site to save the labor hours. As this will be wiped out on theme updates it’s not an option in my client’s sites and editing all products to add theme shortcodes is not feasible. I’ll try to figure out a way to delete all products and reupload with inserted shortcodes via a CSV mass import/update (after a database backup). Hopefully I can find a meaningful work around. Hmmm :/
- This reply was modified 10 years, 7 months ago by cryscryb.
April 22, 2014 at 3:00 pm #254363Hi!
Designing a responsive website is quite challenging and one of the hardest part of this is correcting the images. All of the properties, from the way they resize, to their dimensions and file size can give even the most experience developers a headache. It is true that not every users know how to use the image editor that’s why we added thumbnail sizes to take care of different orientations and layout sizes. You can find all sorts of thumbnail sizes on functions.php:
$avia_config['imgSize']['widget'] = array('width'=>36, 'height'=>36); // small preview pics eg sidebar news $avia_config['imgSize']['square'] = array('width'=>180, 'height'=>180); // small image for blogs $avia_config['imgSize']['featured'] = array('width'=>1500, 'height'=>430 ); // images for fullsize pages and fullsize slider $avia_config['imgSize']['featured_large'] = array('width'=>1500, 'height'=>630 ); // images for fullsize pages and fullsize slider $avia_config['imgSize']['extra_large'] = array('width'=>1500, 'height'=>1500 , 'crop' => false); // images for fullscrren slider $avia_config['imgSize']['portfolio'] = array('width'=>495, 'height'=>400 ); // images for portfolio entries (2,3 column) $avia_config['imgSize']['portfolio_small'] = array('width'=>260, 'height'=>185 ); // images for portfolio 4 columns $avia_config['imgSize']['gallery'] = array('width'=>710, 'height'=>575 ); // images for portfolio entries (2,3 column) $avia_config['imgSize']['magazine'] = array('width'=>710, 'height'=>375 ); // images for magazines $avia_config['imgSize']['masonry'] = array('width'=>705, 'height'=>705 , 'crop' => false); // images for fullscreen masonry $avia_config['imgSize']['entry_with_sidebar'] = array('width'=>710, 'height'=>270); // big images for blog and page entries $avia_config['imgSize']['entry_without_sidebar']= array('width'=>1030, 'height'=>360 ); // images for fullsize pages and fullsize slider //overwrite blog and fullwidth image on extra large layouts if(avia_get_option('responsive_layout') == "responsive responsive_large") { $avia_config['imgSize']['gallery'] = array('width'=>845, 'height'=>684 ); // images for portfolio entries (2,3 column) $avia_config['imgSize']['entry_with_sidebar'] = array('width'=>845, 'height'=>321); // big images for blog and page entries $avia_config['imgSize']['entry_without_sidebar']= array('width'=>1210, 'height'=>423 ); // images for fullsize pages and fullsize slider }
You can adjust the width and height attribute, you can even tell wp not to crop the images by setting the crop parameter to false. If you could tell us what image size you’re having trouble with, we might find a way to fix it. Note that the thumbnail image sizes for woocommerce can be found on config-woocommerce > config.php. Look for this code on line 13:
//product thumbnails $avia_config['imgSize']['shop_thumbnail'] = array('width'=>120, 'height'=>120); $avia_config['imgSize']['shop_catalog'] = array('width'=>450, 'height'=>450); $avia_config['imgSize']['shop_single'] = array('width'=>450, 'height'=>999, 'crop' => false);
You can change the dimension then easily regenerate 2000+ thumbnails or more using this plugin: http://wordpress.org/plugins/regenerate-thumbnails/
If you can explain to us your specific problem, we will be happy to assist you.
Best regards,
IsmaelApril 23, 2014 at 9:08 pm #255213You listed 12 image size options, however when I go to insert media, I have 4 options only?
April 24, 2014 at 1:52 pm #255483Hi!
@BrendaSarg: You’re using a very old version of the theme and if I am not mistaken, there are the same number of thumbnail size on Enfold version 2.4.5. Where do you see the 4 options for the images? Do you mind providing a screenshot? Please download the latest version from your themeforest account then update the theme via FTP. Please refer to this link for more info: http://kriesi.at/documentation/enfold/updating-your-theme-files/Regards,
IsmaelApril 30, 2014 at 9:27 am #258160Ok, I have updated to WordPress 3.9 and to the latest Enfold Version 2.7
Screenshot of image options.
https://www.dropbox.com/s/kpaol80oavk03h4/Screenshot%202014-04-30%2001.25.57.png
April 30, 2014 at 2:45 pm #258278Hi!
Thank you for the screenshot.
Do you mind if we take a look inside your wp dashboard? Please post the login details here and set it as a private reply.
Best regards,
IsmaelApril 30, 2014 at 5:31 pm #258337This reply has been marked as private.May 1, 2014 at 4:24 am #258713Hi!
I can really only guess on this one but since its WP Engine hosted perhaps they have the editor cached and its only pulling the default image sizes when using the regular Media editor.
In the Advanced Layout Editor mode the image sizes appear correctly when adding in an image using elements and an image inside of them so there is something else causing a conflict with the regular media element.
Regards,
DevinMay 1, 2014 at 6:15 am #258755Thanks for the assistance. Rather than making a theme edit, I ended up using WooCommerce Product CSV Import Suite to download all products/pages, and used Openoffice find/replace functions to insert shortcodes to better control/restore the look layout of the images.
-
AuthorPosts
- The topic ‘Enfold overriding WP Resize tool’ is closed to new replies.