CODEWITHSUNDEEP
phpmagentopagination
magento_practitioner
magento_practitioner

Reputation: 161

How to show all images in magento media gallery using pagination?

I have a grouped product which has 100+ images and we have an image tagging module in backend. Now the problem is that whenever a product which has 100+ image comes, the backend crashes since its loading all the images at the same time. I tried to use pagination, but pagination works with SQL query, but the code we use now is this

$galleryData = $product->getData('media_gallery');
foreach ($galleryData['images'] as &$image) 
{      
    $thumbImgTag = $thumbImgTag . '<input type="hidden" name="image_url_' . $img_counter . 
    '" id="image_url_' . $img_counter . '" value="' . str_replace('/', '~^~', $image['file']) .'" />';

    $thumbImgTag = $thumbImgTag . '<img class="input_image" src="'. 
    Mage::getModel('catalog/product_media_config')->getMediaUrl( $image['file'] ) . 
    '" height="100px" width="163px" id="image_thumb_' . $img_counter . '" />';

    $img_counter++;
}

This is the code we are using to get all the images, I would like to add a pagination or some other logic so that my magento backend does'nt crash for loading all the images at once.

Upvotes: 2

Views: 361

Answers (1)

Martin
Martin

Reputation: 2673

Always when you use $galleryData = $product->getData('media_gallery'); Magento starts load all images to collection, this will be a pain point and you should avoid it.

You can select first 10 images related to product by sql query, best way will be an XMLHttpRequestwindow which loads gallery by Post command.

You can put a script to your media.phtml template:

<script>
                  function showImages(str)
                  {
                  document.getElementById("yourimageblock").innerHTML="<span class=\"ajax-loader\"><img src=\"http://'.$_SERVER[HTTP_HOST].'/img/loading.gif\"> Loading ...</span>";

                  if (str.length==0)
                    { 
                    document.getElementById("yourimageblock").innerHTML="";                      
                    return;
                    }
                  if (window.XMLHttpRequest)
                    {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                    }
                  else
                    {// code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                  xmlhttp.onreadystatechange=function()
                    {
                    if (xmlhttp.readyState==4 && xmlhttp.status==200)
                      {
                      document.getElementById("yourimageblock").innerHTML=xmlhttp.responseText;
                      }
                    }

                  xmlhttp.open("GET","<?php echo $this->getUrl('') ?>/pathtoincludefile/yourfile.php?str="+str+"&sku="+<?php $_product->getSku() ?>,true);
                  xmlhttp.send();
                  }
</script>

And write /pathtoincludefile/yourfile.php with GET command showing concrete images from page $_GET["str"] when str will be a number page and $_GET["sku"] is the viewed item.

This solution is elegant, because of the images will be loaded as a sub-script, they will nod slow down page load.

You can also put a loading image here (something rotating loading.gif) and you need only 1 new php file yourfile.php where you do the job of listing all images page by page.

When you switch to next page (call function again from the script function by onclick="showImages(<?php echo $_GET["str"]+1 ?>)") will start loading image again and you dont need ti change URL of the page.

Also you should secure GET variables in yourfile.php to avoid mysql injections risk.

Upvotes: 1

Related Questions