Image gallery from folders with pagination

Floccer · Dec 19, 2019

Hi

I would like to create image gallery for my wordpress site. I was thinking that it would be ok if i somehow would be able to create gallery just from folder and it has pagination, for cpm ads.

I had some success with nextgen gallery plugin and i managed to create 2 galleries and add them to albums. On site album shows those like folders and i can enter to browse either one and i can set images per page with normal pagination. So entire page will refresh. But my images are thumbnails and looking ugly. I think the thumbnail gallery template is reason but i haven't been able to do that kind of gallery with any other plugins.

Would it be possible to edit that template to post entire picture instead of thumbnail?

Floccer · Dec 19, 2019

I managed to locate that default-view.php that will post images but its little too hard for me to understand where the folder/thumbnail is selected.

When uploading images to gallery it will do this kind of tree

gallery (contains all images)
-- cache
-- thumbs (contains all thumbnails where script will post these)

Code:

<?php
$this->start_element('nextgen_gallery.gallery_container', 'container', $displayed_gallery);
?>
<!-- default-view.php -->
<div
    class="ngg-galleryoverview default-view <?php if (!intval($ajax_pagination)) echo ' ngg-ajax-pagination-none'; ?>"
    id="ngg-gallery-<?php echo esc_attr($displayed_gallery_id)?>-<?php echo esc_attr($current_page)?>">

    <?php

    $this->start_element('nextgen_gallery.image_list_container', 'container', $images);

    ?>
    <!-- Thumbnails -->
    <?php for ($i=0; $i<count($images); $i++):
       $image = $images[$i];
       $thumb_size = $storage->get_image_dimensions($image, $thumbnail_size_name);
       $style = isset($image->style) ? $image->style : null;
       $column_class = 'ngg-' . $number_of_columns . '-columns';

       if (isset($image->hidden) && $image->hidden) {
          $style = 'style="display: none;"';
       }
       else {
               $style = null;
       }

             $this->start_element('nextgen_gallery.image_panel', 'item', $image);

            ?>
            <div id="<?php echo esc_attr('ngg-image-' . $i) ?>" class="ngg-gallery-thumbnail-box <?php if ($number_of_columns > 0 && empty($show_all_in_lightbox)) { echo $column_class; } ?>" <?php if ($style) echo $style; ?>>
                <?php

                $this->start_element('nextgen_gallery.image', 'item', $image);

                ?>
        <div class="ngg-gallery-thumbnail">
            <a href="<?php echo esc_attr($storage->get_image_url($image, 'full', TRUE))?>"
               title="<?php echo esc_attr($image->description)?>"
               data-src="<?php echo esc_attr($storage->get_image_url($image)); ?>"
               data-thumbnail="<?php echo esc_attr($storage->get_image_url($image, 'thumb')); ?>"
               data-image-id="<?php echo esc_attr($image->{$image->id_field}); ?>"
               data-title="<?php echo esc_attr($image->alttext); ?>"
               data-description="<?php echo esc_attr(stripslashes($image->description)); ?>"
               data-image-slug="<?php echo esc_attr($image->image_slug); ?>"
               <?php echo $effect_code ?>>
                <img
                    title="<?php echo esc_attr($image->alttext)?>"
                    alt="<?php echo esc_attr($image->alttext)?>"
                    src="<?php echo esc_attr($storage->get_image_url($image, $thumbnail_size_name))?>"
                    width="<?php echo esc_attr($thumb_size['width'])?>"
                    height="<?php echo esc_attr($thumb_size['height'])?>"
                    style="max-width:100%;"
                />
            </a>
        </div>
                <?php

                $this->end_element();

                ?>
            </div>
            <?php

            $this->end_element();

            ?>

    <?php endfor ?>

    <br style="clear: both" />

    <?php

    $this->end_element();

    if (!empty($slideshow_link)): ?>
    <div class="slideshowlink">
        <a href='<?php echo esc_attr($slideshow_link) ?>'><?php echo esc_html($slideshow_link_text) ?></a>
       
    </div>
    <?php endif ?>

    <?php if ($pagination): ?>
    <!-- Pagination -->
    <?php echo $pagination ?>
    <?php else: ?>
    <div class="ngg-clear"></div>
    <?php endif ?>
</div>
<?php $this->end_element(); ?>

Floccer · Dec 19, 2019

Ok, i managed to change it

I changes this

Code:

 <div class="ngg-gallery-thumbnail">
           <a href="<?php echo esc_attr($storage->get_image_url($image, 'full', TRUE))?>"
              title="<?php echo esc_attr($image->description)?>"
              data-src="<?php echo esc_attr($storage->get_image_url($image)); ?>"
              data-thumbnail="<?php echo esc_attr($storage->get_image_url($image, 'thumb')); ?>"
              data-image-id="<?php echo esc_attr($image->{$image->id_field}); ?>"
              data-title="<?php echo esc_attr($image->alttext); ?>"
              data-description="<?php echo esc_attr(stripslashes($image->description)); ?>"
              data-image-slug="<?php echo esc_attr($image->image_slug); ?>"
              <?php echo $effect_code ?>>
               <img
                   title="<?php echo esc_attr($image->alttext)?>"
                   alt="<?php echo esc_attr($image->alttext)?>"
                   src="<?php echo esc_attr($storage->get_image_url($image, $thumbnail_size_name))?>"
                   width="<?php echo esc_attr($thumb_size['width'])?>"
                   height="<?php echo esc_attr($thumb_size['height'])?>"
                   style="max-width:100%;"
               />
           </a>
       </div>

to this

Code:

<div class="ngg-gallery-thumbnail">
          
              
               <?php echo $effect_code ?>>
                <img
                    title="<?php echo esc_attr($image->alttext)?>"
                    alt="<?php echo esc_attr($image->alttext)?>"
                    src="<?php echo esc_attr($storage->get_image_url($image, 'full', TRUE))?>"
                    style="max-width:100%;"
                />

        </div>

Now images are full size

Image gallery from folders with pagination

Floccer

Regular Member

Floccer

Regular Member

Floccer

Regular Member

Main Menu

Marketplace

Making Money

BlackHatWorld

Other