Viewing 30 posts - 1 through 30 (of 32 total)
1 2
  • Author
    Posts
  • September 4, 2015 at 2:45 pm #498414
    sjwmobile

    Hi there,

    Love the Enfold theme, but I’m struggling to work out how to crop images for Enfold using the Photography variation of the theme.

    On the portfolio pages the images appear cropped (e.g. the top image above ‘Synton’ should show the full house, not just the top half. Are there specific dimensions I should size the images to? Specific ratios? I want to avoid the cropping wherever possible.

    See private comments for login info / URL.

    Appreciate your help,

    Thanks,

    Sam

    September 4, 2015 at 4:55 pm #498488
    Elliott

    Hi sjwmobile!

    On line 126 in the /enfold/functions.php file try switching it to this.

    $avia_config['imgSize']['masonry'] 		 		= array('width'=>705, 'height'=>705 , 'crop' => true);		// images for fullscreen masonry

    You may need to regenerate your thumbnails afterwards to see the changes, http://wordpress.org/extend/plugins/regenerate-thumbnails/.

    Best regards,
    Elliott

    • This reply was modified 8 years, 8 months ago by Elliott.
    September 4, 2015 at 5:13 pm #498505
    sjwmobile

    Hi Elliott,

    Thanks for getting back to me. I updated the functions.php file and regenerated all the thumbnails but doesn’t seem to have worked?

    For reference, the dimension of the image at the top of the main portfolio page (Synton-5.jpg) is 888×360 and the full size image can be viewed at http://www.rorygibsonarchitects.co.uk/wp-content/uploads/2015/05/Synton-5.jpg

    I would like it so that the image isn’t cropped on the main portfolio page at all.

    Any ideas?

    Thanks,

    Sam

    September 7, 2015 at 8:21 am #499089
    Ismael

    Hey!

    For the masonry element, try to adjust the width of the image before uploading. Make sure that it is not wider than 705px. Adjust the dimension of this image ( http://www.rorygibsonarchitects.co.uk/wp-content/uploads/2015/05/Synton-5.jpg ) to 705x286px.

    Cheers!
    Ismael

    September 7, 2015 at 2:22 pm #499228
    sjwmobile

    Hi Ismael,

    I resized the graphics as suggested but they’re still being cropped on the main portfolio page – http://www.rorygibsonarchitects.co.uk/portfolio/. You’ll see that the dimensions of the featured image (and the lead masonry gallery image) for Synton is now 705×286 as requested (for reference, full size version at http://www.rorygibsonarchitects.co.uk/wp-content/uploads/2015/05/Synton-5-705×2861.jpg)

    Also tried resizing the lead featured image and lead masonry image for the Inverleith Place portfolio item (made the image 705×705) but it’s still being cropped too.

    Can you not just tell me what the dimensions of featured images should be to ensure they’re not cropped? I’d need 3 dimensions I guess – portrait, landscape and normal?

    Thanks,

    Sam

    September 8, 2015 at 7:38 am #499687
    Ismael

    Hey!

    Please post the login details for the wp dashboard, we would like to check it. The size of the featured image should be not more than 705px (width and height), for the masonry element, if you want to have the exact thumbnail size.

    If you’re referring to the bottom part of the image not being displayed, it is actually being covered by the masonry content container.

    Best regards,
    Ismael

    September 8, 2015 at 10:23 am #499753
    sjwmobile

    Thanks Ismael. I just want to be able to see the entire image on the main portfolio page – http://www.rorygibsonarchitects.co.uk/portfolio/ without any cropping or containers obscuring the view please.

    Created admin level access, details in private message.

    Really appreciate your help with this.

    Sam

    September 9, 2015 at 11:06 am #500298
    Andy

    Hi!

    Wordpress is cropping by default and you can control image sizes easily with a plugin like this: https://wordpress.org/plugins/simple-image-sizes/

    I hope this helps!

    Cheers!
    Andy

    September 10, 2015 at 1:57 pm #501026
    sjwmobile

    Hi Andy,

    Thanks for getting back to me.

    I tried downloading Simple Image Sizes and setting the maximum height and width of the ‘masonry’ images to be 705 each. I also used the plugin to tell it not to crop the image and then regenerated all imagery. However, this hasn’t worked – the imagery is still cropped.

    Surely I can just edit the image sizing within the theme, rather than having to use external plugins?

    Thanks,

    Sam

    September 10, 2015 at 4:39 pm #501150
    LAVision

    I’m also interested in resolving this. I have issues wherever I use a masonry gallery. There’s no simply way to make your images viewable in an expected way. For example, if we could select “Display centered” and have the image centered at least when cropped, or image bottom (to crop off the top), etc … but like it is, I can never get the image displaying properly in a uniform way. I’d say this is a major problem experienced by many. As it is, it seems one must add “blank space” to the image down below — but this makes uploading images quite “unstandard” and guesswork as to positioning.

    The masonry gallery “looks cool”, but as it is, it doesn’t seem to be functional for displaying images you want displayed properly.

    September 11, 2015 at 2:06 pm #501635
    Andy

    Hey!

    Plugin should work to achieve cropping. Did you clear browser cache and hard refreshed a few times?
    You can go to Appearance > Editor and open Functions.php file and find:

    $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'=>845, 'height'=>684 );						// 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'=>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

    Best regards,
    Andy

    September 14, 2015 at 3:47 pm #502846
    sjwmobile

    Hi Andy,

    Yeah, cleared browser cache and also tried a couple of browsers that had never visited the site before to be safe – all still show the images cropped/’zoomed’. I’ve edited the functions.php file to make the masonry image crop false too. Still shows images as cropped/zoomed.

    Any other ideas? I’ve looked through the forums to see if anyone else has requested that the images aren’t cropped as surely I can’t be the first? For photography/architecture type sites this is a big deal as they’re (understandably) keen to represent their imagery in the best way possible.

    Really appreciate your help,

    Best,

    Sam

    September 14, 2015 at 5:43 pm #502937
    Elliott

    Hi!

    Try changing it to this.

    $avia_config['imgSize']['masonry'] 		 		= 'full';

    And then regenerate the thumbnails again.

    Cheers!
    Elliott

    September 16, 2015 at 2:23 pm #504122
    sjwmobile

    Hi Elliot,

    Still cropping the images I’m afraid – updated to the latest version of WP today as well, just in case that might be affecting it.

    Been fiddling with the CSS styling in inspect element mode, but no luck. Is there no custom CSS that could stop the zooming/cropping?

    Thanks,

    Sam

    September 16, 2015 at 2:25 pm #504124
    sjwmobile

    It appears to be mostly cropping off the bottom – nothing to do with the captioning styling?

    Cheers,

    Sam

    September 17, 2015 at 1:31 pm #504745
    Andy

    Hey!

    try this code:

    .av-masonry-image-container {
background-size: 100% 100%;
}

    Regards,
    Andy

    September 17, 2015 at 6:17 pm #505064
    sjwmobile

    Getting somewhere. The image for ‘Inverleith Place’ now appears in full (although it looks a bit distorted) – do I need to cut that to specific dimensions? It’s currently 705 x 705 (http://www.rorygibsonarchitects.co.uk/wp-content/uploads/2015/05/Inverleith-Place-1-705×7051.jpg)

    Also, the image for Synton at the top of the portfolio page is still missing the bottom (it’s like the caption is overlapping the image) – can the caption be pushed beneath the image?

    Thanks,

    Sam

    September 18, 2015 at 1:35 pm #505469
    Andy

    Hi!

    try this code instead:

    .av-masonry-image-container {
background-size: 100% 85%;
background-position: 0px 0px;
}

    and adjust as needed.

    Best regards,
    Andy

    September 18, 2015 at 2:51 pm #505567
    sjwmobile

    Thanks Andy… getting closer.

    On http://www.rorygibsonarchitects.co.uk/portfolio/, the Synton image now shows completely (with the height set to 78%) but because the image is repeating, it repeats on the portrait style images.

    What’s the best way around this? Reduce the height of the portrait imagery? Welcome your advice and custom CSS here so as to resolve finally. I don’t think just stopping the image background repeating will look good as there would be significant whitespace between the image and the caption beneath.

    Thanks,

    Sam

    September 18, 2015 at 3:24 pm #505591
    Andy

    Hey!

    add this code as well:

    .av-masonry-image-container {
background-repeat: no-repeat;
}

    and then adjust (increase) background-size until it fits to you.

    Regards,
    Andy

    September 18, 2015 at 3:36 pm #505604
    sjwmobile

    Thanks Andy.

    As I mentioned though, just removing the background image from repeating means that there’s a big white gap beneath the portrait imagery – see http://www.rorygibsonarchitects.co.uk/portfolio/

    Adjusting the background-size property to be larger fixes the whitespace issue, but means that the Synton image is cropped (the problem I was trying to fix in the first place).

    Is there any way to reduce the spacing between the caption and the image for the portrait images? Or just to tidy it all up a little as currently it doesn’t look great.

    Thanks,

    Sam

    September 18, 2015 at 3:46 pm #505612
    Andy

    Hi!

    no, there is no possibility to control just portrait image sizes. With a CSS code you would automatically effect all images (landscape as well).

    Best regards,
    Andy

    September 18, 2015 at 4:22 pm #505642
    sjwmobile

    Really surprised there’s not a simple solution to this. I can’t be the only person that has requested that images aren’t cropped/resized within the masonry view?

    The variety of fixes proposed have now left the profile section looking worse than before. Imagery is stretched on http://www.rorygibsonarchitects.co.uk/portfolio-item/inverleith-place/ for example.

    Is this something that can be addressed with future Theme updates?

    September 18, 2015 at 4:37 pm #505662
    Andy

    Hey!

    when you use this code for the last link you have provided images will look good I think:

    .av-masonry-image-container {
background-size: 100% 100%;
}

    You can make a feature request for Kriesi here:
    https://kriesi.at/support/enfold-feature-requests/

    Cheers!
    Andy

    September 18, 2015 at 4:49 pm #505676
    sjwmobile

    Thanks Andy, but that unfixes the issue with the Synton image (whereby the bottom of the image is cropped off) on the main portfolio page http://www.rorygibsonarchitects.co.uk/portfolio/

    Sam

    September 18, 2015 at 4:54 pm #505683
    Andy

    Hey!

    then try to use page-id, so the code will effect for a specific page only.

    Best regards,
    Andy

    September 18, 2015 at 5:06 pm #505691
    sjwmobile

    Thanks Andy.

    Does that work for post ID’s too (portfolio items are classed as posts?)

    I tried following to edit http://www.rorygibsonarchitects.co.uk/portfolio-item/inverleith-place/ (post ID 593) but doesn’t seem to work;

    .post-id-593 .av-masonry-image-container {
    background-size: 100% 100%;
    }

    Thanks

    September 21, 2015 at 9:27 am #506289
    Ismael

    Hey!

    For portfolio items, try this:

    .postid-593 .av-masonry-image-container {
background-size: 100% 100%;
}

    Best regards,
    Ismael

    September 21, 2015 at 10:56 am #506331
    sjwmobile

    Thanks Ismael.

    Is there a way to apply the background-size: 100% 100% to all individual portfolio posts please?

    Appreciate your help.

    September 21, 2015 at 12:07 pm #506355
    Andy

    Hi!

    yes, try this code:

    .single-portfolio .av-masonry-image-container {
background-size: 100% 100%;
}

    Regards,
    Andy

  • Author
    Posts
Viewing 30 posts - 1 through 30 (of 32 total)
1 2
  • The topic ‘Image Cropping Issues’ is closed to new replies.