Tagged: blog image
-
AuthorPosts
-
October 25, 2016 at 2:09 pm #703782
Hi,
the images in the blog are good but I don´t like how the images are cropped in the single post and I would like to have more control about it. For me it makes no sense, that in the overview the images are not cropped and in original size and in the single post they are cropped in 1040 x 391px. The image that is used is by default 845 x 321px (attachment-entry_with_sidebar size-entry_with_sidebar wp-post-image)
The aim in the single post:
like in the blog no scaling or cropping => “attachment-no scaling size-no scaling wp-post-image”
No lightbox of the single-post imagesHow can I manage this with preferences, css or other ways?
ThanksBlog-preferences:
Blog styling: elegant
Single post: with big preview image and sidebarOctober 25, 2016 at 7:37 pm #703936Hey AWZ,
For changing image sizes you can refer on this thread: https://kriesi.at/support/topic/enfold-image-sizes/
As for removing lightbox in single post try adding this code in functions.php:
function remove_lightbox(){ ?> <script> jQuery(window).load(function(){ jQuery('.single-post .lightbox-added .overlay, .single-post .lightbox-added .image-overlay').remove(); jQuery('.single-post .lightbox-added img').unwrap('lightbox-added'); }); </script> <?php } add_action('wp_footer', 'remove_lightbox');
Let us know if it works :)
Best regards,
NikkoOctober 26, 2016 at 11:14 am #704219Hi Nikko,
thanks for the two parts.
1) IMAGESIZE
After some problems – a code of the child-theme function overwrote all changes – it works. I delete this code and it works (after reupload):function ava_image_sizes() { add_image_size('entry_with_sidebar', 845, 321, array('center', 'top')); add_image_size('entry_without_sidebar', 845, 321, array('center', 'top')); } add_action( 'after_setup_theme', 'ava_image_sizes', 11 );
So the last things to this topic are:
a) How can I integrate the following line in my child-theme to protect in case of theme-updates? If I insert the whole array or parts of it in the function of the child theme, the website crashes.
$avia_config['imgSize']['entry_with_sidebar'] = array('width'=>1040, 'height'=>1040 , 'crop' => false); // big images for blog and page entries
b) How can I crop the images in the blog overview? The default is original size.
2) SINGLE POST IMAGE & LIGHTBOX
Doesn´t work. Your code snippet crashes the website….October 28, 2016 at 8:47 am #705200Do you have ideas to that?
October 31, 2016 at 4:55 am #705950Hi,
1.) Please refer to this thread: https://kriesi.at/support/topic/override-the-global-avia_config-within-child-functions-php/ or you may want to use Simple Image Sizes plugin.
1.b) Are you using a default editor and use it as a blog? or are you using Advance Layout Builder and the blog module?
2.) I have tested it on my end but since on your end it’s not working Please post us your login credentials (in the “private data” field), so we can take a look at your backend.
Login credentials include:
- The URL to the login screen.
- A valid username (with full administration capabilities).
- As well as a password for that username.
- permission to deactivate plugins if necessary.
Also I also request for ftp access, since it’s very critical to modify functions.php on wp theme editor.
Best regards,
NikkoNovember 3, 2016 at 5:15 pm #707862Hi,
Thanks.
1) IMAGESIZE
I´ve checked it out. This code in the child function doesn´t “overwrite” the functions code of the theme.function avia_change_image_size_array() { global $avia_config; $avia_config['imgSize']['entry_with_sidebar'] = array('width'=>1040, 'height'=>1040 , 'crop' => false); } add_action( 'init', 'avia_change_image_size_array');
b) BLOG OVERVIEW
I use a normal page with a content element called blog posts.2) Ok. I´ve had the site on localhost. Now it´s uploaded to our testserver.
Aim & Conclusion:
Blog overview (aktuelles): images are not cropped and in fullsize = > here it would be good to crop them and reduce it to a smaller size
Single post: = > no cropping and reduce it to a size, that shows in a good quality / solved but only in the enfold functions.php not in child functionNovember 7, 2016 at 5:29 am #709003Hi,
1.) Please install and activate the following plugin then go to the Settings > Media panel. https://wordpress.org/plugins/simple-image-sizes/
2.) Edit the blog posts element and then set the Preview Image Size to the second option. A new option will appear that will let you select the thumbnail size for the blog overview page. For the actual post page, after installing the suggested plugin above, go to the Settings > Media panel then adjust the size of the “entry_with_sidebar” thumbnail. Regenerate the thumbnails afterwards.
Best regards,
IsmaelNovember 7, 2016 at 11:20 am #709110Hi Ismael,
1) IMAGESIZE
Installed. It works for the single-post-thanks. You have to generate the thumbnail(s) new or upload it again.b) BLOG OVERVIEW
Preference: Elegant, Advanced layout editor. Don´t know, what for a size of images to edit there. By inspecting it: class=big-preview single-big and inside class=attachment-no scaling size-no scaling wp-post-image
Do you have a final solution?2) SINGLE POST IMAGE & LIGHTBOX
Thanks. Don´t know what you mean with second option, but it works for me. Last thing to that is: lightbox. How can I deselect the lightbox here? The first code snipped crashed the website. Do you have a final solution?Best regards Sven
November 8, 2016 at 9:19 am #709657Hi!
1.b) It using is the same thumbnail, “entry_without_sidebar” or “entry_with_sidebar”.
2.) Do you want to disable the lightbox? Please go to the Enfold > Theme Options panel and then disable the Lightbox Modal Window option.
Best regards,
IsmaelNovember 8, 2016 at 10:47 am #709685Thanks Ismael,
1b) BLOG OVERVIEW
Nope! The thumbnails of the single post and the overview are completly different. This was the beginning of this thread and I don´t understand the programming until now. By default In the blog overview (Preference: Elegant, Advanced layout editor) the images are not cropped and imagesize is not limited. By default in the single post with sidebar the images are cropped to 1040 x 391px and the imagesize is limited to 845 x 321px. Result: pixelated, unfitting details. Maybe the converse would make sense.We have found a solution for the single post (plugin). Do you have a solution for the thumbnails in the blog overview?
2) LIGHTBOX
Doesn´t work! Check it out, you have the credentials.Best regards Sven
November 10, 2016 at 7:53 am #710562Hey!
1.) It’s not using the default thumbnail because you set the blog posts’ preview image size option to “No Scaling”.
// REMOVED
2.) The lightbox is disabled. Please remove browser cache or hard refresh before testing the page. You can check it here.
// REMOVED
// REMOVEDCheers!
IsmaelNovember 10, 2016 at 9:59 am #710606Good morning,
1) You´ve right! Long time ago – it was set in the blog element. Thanks & solved!
2) Yes it is disabled. But no result on that. I´ve deleted the cache and tried another browser. Please look at the private content.
Best regards
SvenNovember 14, 2016 at 6:45 am #711793Hey!
2.) Do you want to disable the lightbox? This is what you said in your previous post. And the lightbox is already disabled so I’m a bit confused.
Last thing to that is: lightbox. How can I deselect the lightbox here?
Best regards,
IsmaelNovember 14, 2016 at 11:55 am #711878Good morning,
2) Yes of course as I wrote in all posts! Deselecting of the lightbox has no effect and doesn´t work! The lightbox isn´t disabled. Please look at the links in the private content of the last thread and in this thread again.
November 16, 2016 at 3:33 am #712712Hi,
The lightbox is disabled. If you click on the image, it will redirect to the actual image instead of opening the lightbox.
Best regards,
IsmaelNovember 16, 2016 at 10:04 am #712817Ok, than we have a definition problem. :)
Lightbox is for me: an image as a preview or thumbnail is displayed on the page. By clicking on it, it displays the same image or a gallery in a (normally) higher resolution.
https://en.wikipedia.org/wiki/Lightbox_(JavaScript)So: The Lightbox Modal Window in the enfold theme by switching on / off: what is the sense of it?
If I don´t want a lightbox inside the page – by clicking on the image in the page nothing happens – what can I do to realize it?
In the beginning Nikko send me this code, but it crashes the website. But I think it was the correct way and the beginning of the solution:
function remove_lightbox(){ ?> <script> jQuery(window).load(function(){ jQuery('.single-post .lightbox-added .overlay, .single-post .lightbox-added .image-overlay').remove(); jQuery('.single-post .lightbox-added img').unwrap('lightbox-added'); }); </script> <?php } add_action('wp_footer', 'remove_lightbox');
November 17, 2016 at 11:29 am #713512Hi!
Sorry if I missed this thread, since you said that the code I gave crashed the site though it works properly on my end, can I request for ftp access? I’m a bit hesitant to test the code I gave to your site since if it crashes I can’t reverse it.
Regards,
NikkoNovember 17, 2016 at 2:51 pm #713592Looook.
November 19, 2016 at 7:28 am #714286Hey!
Lightbox is for me: an image as a preview or thumbnail is displayed on the page. By clicking on it, it displays the same image or a gallery in a (normally) higher resolution.
https://en.wikipedia.org/wiki/Lightbox_(JavaScript)Yes, that is the “lightbox” but this is not happening in the post page. Right now, if you click on the post image, it will redirect to the actual image instead of opening a “lighbox” container, which means that the “lightbox” script is disabled. If you want to completely disable the image link, add this css code.
.big-preview.single-big a { pointer-events: none !important; }
Regards,
IsmaelNovember 19, 2016 at 10:03 pm #714383Hi!
I have tried to add the code I gave you previously and it doesn’t crash your site, however, the classes have changed so I have to adjust the code, I have added this code to your functions.php and it’s now working properly:
function remove_lightbox(){ ?> <script> jQuery(window).load(function(){ jQuery('.single-post .lightbox-added .overlay, .single-post .big-preview.single-big a .image-overlay').remove(); jQuery('.single-post .big-preview.single-big a img').unwrap('lightbox-added'); }); </script> <?php } add_action('wp_footer', 'remove_lightbox');
Let us know if it’s good.
Cheers!
NikkoNovember 21, 2016 at 1:35 pm #714799Hey Ismael and Nikko,
Thank you very much for your helpful input = solved.
@Ismael
Ok, understand the difference. So it´s more like a pop-up image. It makes no sense too at this place :) It works and I didn´t knew this css solution. Thanks! Only one small disadvantage: Because of the same class of the image (big-preview.single-big) in the post and in the overview, it blocks the link to the post via image too.
@Nikko
It works now! It´ a good solution for that, because in the preview you have the image-link and in the post not. Thanks. Do you know, why this code works delayed? At first the image is with a link, after a second not. Maybe it´ because of the code is in the child-theme function…Best regards
SvenNovember 23, 2016 at 11:57 am #715860Hi,
glad we could help. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.
Best regards,
Andy -
AuthorPosts
- The topic ‘Blog Image & Single Post Image Cropping’ is closed to new replies.