Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • September 9, 2019 at 10:09 pm #1136225
    Jillian

    I use Masonry for my posts, but the images aren’t sharp, becuase the masonry uses cropped or smaller images. How can I change this so use the original image size?

    Thanks,
    Jillian

    September 9, 2019 at 10:34 pm #1136237
    Guenni007

    you can insert this to your child-theme functions.php:

    function avia_change_masonry_thumbnail_link($size){
  return "full";
}
add_filter('avf_avia_builder_masonry_lightbox_img_size', 'avia_change_masonry_thumbnail_link', 10, 1);
    September 9, 2019 at 11:54 pm #1136264
    Jillian

    Didn’t work unfortunally.

    September 10, 2019 at 5:21 am #1136333
    Guenni007

    Sorry thought this was the snippet that works so far.

    which version of enfold do you use?
    goto: enfold⁩ ▸ ⁨config-templatebuilder⁩ ▸ ⁨avia-shortcodes⁩⁩ ▸ ⁨av-helper-masonry.php

    on Enfold 4.6.1 there is on line 612 :

    
$img_size	 						= 'masonry';

    change masonry to : full. so that there is:

    $img_size	 						= 'full';

    Save that av-helper-masonry.php to your desktop ( or where you can find it easy )
    to not lost this changing – use a child-theme shortcode folder : https://kriesi.at/documentation/enfold/intro-to-layout-builder/#customization
    make a folder called shortcodes in your child-theme folder and put in this edited av-helper-masonry.php
    that snippet from the documentation page comes to child-theme functions.php:

    add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);
function avia_include_shortcode_template($paths)
{
  $template_url = get_stylesheet_directory();
      array_unshift($paths, $template_url.'/shortcodes/');
  return $paths;
}

    from now on – the child shortcode with same name in that folder replaces the parent theme files.

    September 10, 2019 at 10:51 am #1136459
    Rikard

    Hi,

    Thanks for helping out @guenni007. Did you have any luck with the suggestion above @Jillian?

    Best regards,
    Rikard

    September 10, 2019 at 11:49 am #1136502
    Jillian

    Unfortunally this also did not work. I’ve copied the av-helper-masonry.php, put it in my enfold-child/shortcodes changed ‘masonry’ to ‘full’. I’ve added the code snippit to my enfold-child/functions.php, but nothing happend.

    • This reply was modified 5 years, 2 months ago by Jillian.
    September 10, 2019 at 8:14 pm #1136748
    Guenni007

    Open that masonry element and save it again – save page again.
    on my test installation it works this way perfectly

    September 10, 2019 at 8:23 pm #1136756
    Jillian

    Still nothing..
    EDIT: My bad. It works! Now i’ve got another question. Perhaps a much easier thing.

    I want the height of a post to be 400px. and 30px margin between the posts. How can I achieve this?

    • This reply was modified 5 years, 2 months ago by Jillian.
    September 10, 2019 at 9:03 pm #1136775
    Guenni007

    We had to see it – what you mean – maybe a screenshot to see what you like to achive and a link to site would be great.
    If you can not make your links public – post it in private content area. then you had to wait til mods are here

    September 10, 2019 at 9:05 pm #1136778
    Jillian

    Link in private

    September 11, 2019 at 10:30 am #1136969
    Guenni007

    so – i’m Participant as you – you had to wait now

    September 13, 2019 at 3:08 am #1137747
    Ismael

    Hi,

    Thank you for the update.

    You can set a minimum height for the masonry items.

    .av-masonry-entry.av-masonry-item-loaded {;
    min-height: 400px;
}

    To increase the space between the items, set the “Gap between elements” settings to “Large gap”.

    Best regards,
    Ismael

    September 13, 2019 at 12:05 pm #1137968
    Jillian

    Hi Ismael,

    Thanks for your reply. This code almost did the trick. I turned the ‘min’, to ‘max’, but there now are huge gaps between the posts. Note: I haven’t done anything for the gaps yet. I only implemented the css code.

    September 16, 2019 at 4:04 am #1138646
    Ismael

    Hi,

    Thank you for the update.

    We don’t see that large gap, but there is a huge white space before the very first masonry item. You can replace the code with this.

    .av-masonry-entry.post.av-masonry-item-loaded {
    height: 415px;
}

    That should exclude the masonry placeholder, which is what’s creating that space.

    Best regards,
    Ismael

    September 16, 2019 at 11:21 am #1138764
    Jillian

    Hi @ismael,

    This didn’t work unfortunally. As you can see on the screenshot, there are still huge white space.

    September 17, 2019 at 4:12 am #1138989
    Ismael

    Hi,

    Thank you for the update.

    You forgot to remove the previous css.

    .av-masonry-entry.av-masonry-item-loaded {
    height: 415px;
}

    We added the “.post” selector in the new one.

    This script might help to get rid of the spaces between the items.

    add_action('wp_footer', 'ava_auto_resize');
function ava_auto_resize(){
?>
<script>
(function($){	
	var int = window.setInterval(function(){
		$(window).trigger('resize');
		$(window).trigger('av-content-el-height-changed');
	}, 2000);
	
	$(window).on('load', function() {
		setTimeout(clearInterval(int), 1000);
	});
})(jQuery);
</script>
<?php
}

    Add it in the functions.php file.

    Best regards,
    Ismael

    September 18, 2019 at 6:04 pm #1139613
    Jillian

    This also did not work unfortunally.

    September 19, 2019 at 10:57 am #1139844
    Ismael

    Hi,

    Thank you for the update.

    We can’t reproduce the issue on our end, but we replaced “height” with “min-height” because it limits the container of the items on mobile view, cutting off the content. This is what we see on our end on desktop view.

    Screenshot: https://imgur.com/a/77JQnRx

    We do see a large gap or space between some of the items on mobile view due to this css code.

    a#av-masonry-1-item-138, a#av-masonry-1-item-823, a#av-masonry-1-item-817, a#av-masonry-1-item-814, a#av-masonry-1-item-809, a#av-masonry-1-item-806 {
    height: 830px !important;
}

    Best regards,
    Ismael

    September 20, 2019 at 3:18 am #1140082
    Jillian

    Hi Ismael,

    Thanks for trying, but this isn’t what I am striving for. As mentioned. What I want is: every post to be max 400px, and some posts to be 830 px (exact the height of 2 posts with a padding on the bortom of 30px ( 400px + 400px + 30px). All the posts which has to be 830px height, I already set. But the rest is still not 400px.

    To make it all easy: The only thing which has to happen now is make the posts, which are not 830px height, 400px, and make the white space between the posts 30 px exact.

    September 23, 2019 at 6:02 am #1140826
    Ismael

    Hi,

    Setting the max height to 400px will cut off the content on certain screen sizes, so you have to set the minimum height. If you want to remove the large white space or gap on mobile device, move the above css code inside a css media query so that it only affects the desktop view. And to increase the space between the items, set the “Gap between elements” settings to “Large gap” as previously mentioned.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 20 total)
  • The topic ‘Use original image size for masonry’ is closed to new replies.