Okay
  Public Ticket #2320249
Single Portfolio images Problem
Closed

Comments

  • Sush started the conversation

    Hi

    When i click on a particular portfolio on my homepage then why does my single portfolio images appear like this? The footer also appears on the images.(Please see attached photos)

    After i refresh then it appears normal.

    Website link - https://sachinghanekar.com

  •  675
    Neuron replied

    Hi Sush,

    There can be a slow communication with JS and the DOM of website, so to reload that fast, simply install the following plugin.

    - https://wordpress.org/plugins/insert-headers-and-footers/

    After installing go to the Settings > Insert Headers and Footers, add the following script in head or footer.

    <script>
    jQuery(function($) {
        setTimeout(function() {
            jQuery('.masonry').isotope({
                layoutMode: "masonry",
                itemSelector: ".selector"
            });
            window.dispatchEvent(new Event('resize'));
        }, 400);
    });
    </script>

    Feel free to ask for anything you need.

    Kind Regards


    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.

  • Sush replied

    There is already a code present which i have inserted  in Header and Footer (please check Othercode image)

    So tried combining the new code in the footer in many ways like this

    1st way

    <script>
    jQuery( document ).ready(function($) {
        setTimeout(function(){         $('.single .masonry').isotope({
                itemSelector: '.selector',
                layoutMode: 'fitRows',
            });
        }, 300);
    });
    <script>
    jQuery(function($) {
        setTimeout(function() {
            jQuery('.masonry').isotope({
                layoutMode: "masonry",
                itemSelector: ".selector"
            });
            window.dispatchEvent(new Event('resize'));
        }, 400);
    });
    </script>

    </script>


    2ndway

    -

    <script>
    jQuery( document ).ready(function($) {
        setTimeout(function(){       

     $('.single .masonry').isotope({
                itemSelector: '.selector',
                layoutMode: 'fitRows',
            });

    window.dispatchEvent(new Event('resize'));
        }, 300);
    });
    </script>


    3rd way

    -

    <script>
    jQuery( document ).ready(function($) {
        setTimeout(function(){         $('.single .masonry').isotope({
                itemSelector: '.selector',
                layoutMode: 'fitRows',
            });
        }, 300);
    });
    jQuery(function($) {
        setTimeout(function() {
            jQuery('.masonry').isotope({
                layoutMode: "masonry",
                itemSelector: ".selector"
            });
            window.dispatchEvent(new Event('resize'));
        }, 400);
    });

    </script>

    But none of them worked. (please check Problem image) . The images are gettiing overlapped


  •  675
    Neuron replied

    Hi Sush,

    I am sorry for the late reply, we did not work on the weekend

    Can you please provide me with your wp-admin, I will add it quickly. Make sure to tick private on the reply.

    Kind Regards


    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.

  •   Sush replied privately
  •  675
    Neuron replied

    Hi Sush,

    Please check it again, I have increased the delay.

    Kind Regards


    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.

  • Sush replied

    Hi

    The problem is still appearing. Please check the link

    If you need the id and password do let me know

    https://prnt.sc/reli1v

    https://prntscr.com/relj16

  •  675
    Neuron replied

    Hi Sush,

    Yes, please provide me with the wp-admin, the last ones are not working. I will implement images loaded script, that will detect the loading of images and then relayout them.

    Kind Regards


    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.

  •   Sush replied privately
  •  675
    Neuron replied

    Hi Sush,

    As you can see on this image, I've added the images loaded, so the images won't relayout until they're fully ready.

    - https://prnt.sc/rewzkh

    Kind Regards


    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.

  • Sush replied

    Inside the single portfolio the images are appearing working properly. 

    But on the homepage there is still some images overlapping when i click Show More.

    When you click on Books&Diaries category only 1 image appears. Then after clicking Show More the images are overlapping. 


    Plz check

    https://sachinghanekar.com/

  •  675
    Neuron replied

    Hi Sush,

    Unfortunately, the admin information is not working, please provide me with it again.

    Kind Regards


    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.

  •   Sush replied privately
  •  675
    Neuron replied

    Hi Sush,

    I am sorry for the late reply, we hope for understanding in these times.

    1 and 2) has been fixed through the JavaScript that I've added.

    3) Unfortunately, that's how it works. The filters are able to sort only the posts that are already displayed.

    Kind Regards


    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.

  • Sush replied

    ok 

    Also can you let me know why the website is loading so slow?

    https://sachinghanekar.com/

  • Sush replied

    Are you sure the overlapping of images is solved?

    Because i can still see images overlapping in homepage and in particular categories also. 

    When i click Load more then for few seconds the images overlap and then they get arrange properly.

    Please check image

  •  675
    Neuron replied

    Hi,

    I am very sorry for the late reply, I hope for understanding in these times, I hope you and your family are safe.

    1) Unfortunately that depends on the image sizes, the seconds depends on the size of your images.

    2) I would suggest you three things how to increase the speed of your website.

    1.  Compress images to lower resolutions and smaller image sizes. Tiny Compress
    2. Use a cacher(we use w3 total cacher). https://wordpress.org/plugins/w3-total-cache/ Right after install go to general settings and enable page cache.
    3. Install autoptimize to combine all CSS files in one file and all JS file sin one file, just like we do in our demo. https://wordpress.org/plugins/autoptimize/

    Feel free to ask for anything you need.

    Kind Regards


    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.

  • Sush replied

    Yes i understand the situation. I hope you and people around you are safe.

    I have installed autoptimize . Do i tick mark Optimize JavaScript Code? , Optimize CSS Code? and Optimize HTML Code?


  •  675
    Neuron replied

    Hi Sush,

    Thank you, we're fine. I hope the best for you.

    Yes, so they will all be combined in single files and the loading time will be a lot faster.

    Also, make sure to enable the caching, that will serve static HTML files for those who are not logged in, it will make the website a lot more faster.

    Kind Regards


    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.

  • Sush replied

    Thanks for you support. 

  •  675
    Neuron replied

    You are welcome anytime Sush.

    Kind Regards


    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.