-
-
Save huytrq/5622f5820aaa87d2e2ac3de59e79976b to your computer and use it in GitHub Desktop.
ACF Pagination Gallery with categories
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php /* | |
| Template Name: Gallery | |
| Gallery template based on Advanced Custom Fields gallery field | |
| with pagination and categories. | |
| ACF Fields for this page are: | |
| - gallery (Gallery field) -> contain all images | |
| - categories (Repeater field) -> images divided into categories | |
| -- name | |
| -- nice_name (for the url) | |
| -- gallery | |
| */ | |
| get_header(); | |
| //Get current cat, if empty show all images | |
| $current_cat = get_query_var('category_name'); | |
| if (have_posts()) { | |
| while (have_posts()) { | |
| the_post(); | |
| echo '<div class="gallery-wrapper">'; | |
| //Get categories | |
| $cats = get_field('categories'); | |
| //if this is gallery category subpage find out which one | |
| if ($current_cat) { | |
| foreach ($cats as $k=>$c) { | |
| if ($c['nice_name']==$current_cat) { | |
| $current_gallery = $c['gallery']; | |
| } | |
| } | |
| }else { | |
| //otherwise show whole gallery | |
| $current_gallery = get_field('gallery'); | |
| } | |
| //Setup pagination variables | |
| $images = array(); // Set images array for current page | |
| $items_per_page = 4; // How many items we should display on each page | |
| $total_items = count($current_gallery); // How many items we have in total | |
| $total_pages = ceil($total_items / $items_per_page); // How many pages we have in total | |
| //Get current page | |
| if ( get_query_var( 'paged' ) ) { | |
| $current_page = get_query_var( 'paged' ); | |
| }elseif ( get_query_var( 'page' ) ) { | |
| $current_page = get_query_var( 'page' ); | |
| }else { | |
| $current_page = 1; | |
| } | |
| $starting_point = (($current_page-1)*$items_per_page); // Get starting point for current page | |
| // Get elements for current page | |
| if ($current_gallery) { | |
| $images = array_slice($current_gallery, $starting_point, $items_per_page); | |
| } | |
| //Show category list | |
| if ($cats) { | |
| echo '<ul>'; | |
| echo '<li><a href="'.get_permalink().'">All</a></li>'; | |
| foreach ($cats as $c) { | |
| echo '<li><a href="'.get_permalink().$c['nice_name'].'/">'.$c['name'].'</a></li>'; | |
| } | |
| echo '</ul>'; | |
| } | |
| echo '<div id="gallery-items">'; | |
| $i = $starting_point; | |
| if ($images) { | |
| foreach ($images as $g) { | |
| echo '<img src="'.$g['sizes']['thumb'].'" alt="'.$g['alt'].'">'; | |
| } | |
| } | |
| echo '</div>'; | |
| $big = 999999999; // need an unlikely integer | |
| $translated = __( 'Page', 'pixplus' ); // Supply translatable string | |
| $pagination = paginate_links( array( | |
| 'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ), | |
| 'format' => '?paged=%#%', | |
| 'current' => $current_page, | |
| 'total' => $total_pages, | |
| 'before_page_number' => '<span class="screen-reader-text">'.$translated.' </span>' | |
| )); | |
| if ($pagination) echo '<div class="pagination-wrapper">'.$pagination.'</div>'; | |
| echo '</div>'; | |
| } | |
| } | |
| get_footer(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [ | |
| { | |
| "key": "group_553ca48616132", | |
| "title": "Gallery with categories", | |
| "fields": [ | |
| { | |
| "key": "field_553ca48ae5094", | |
| "label": "Gallery", | |
| "name": "gallery", | |
| "type": "gallery", | |
| "instructions": "", | |
| "required": 0, | |
| "conditional_logic": 0, | |
| "wrapper": { | |
| "width": "", | |
| "class": "", | |
| "id": "" | |
| }, | |
| "min": "", | |
| "max": "", | |
| "preview_size": "thumbnail", | |
| "library": "all", | |
| "min_width": "", | |
| "min_height": "", | |
| "min_size": "", | |
| "max_width": "", | |
| "max_height": "", | |
| "max_size": "", | |
| "mime_types": "" | |
| }, | |
| { | |
| "key": "field_571ca023ac926", | |
| "label": "Categories", | |
| "name": "categories", | |
| "type": "repeater", | |
| "instructions": "", | |
| "required": 0, | |
| "conditional_logic": 0, | |
| "wrapper": { | |
| "width": "", | |
| "class": "", | |
| "id": "" | |
| }, | |
| "collapsed": "", | |
| "min": "", | |
| "max": "", | |
| "layout": "block", | |
| "button_label": "Add Category", | |
| "sub_fields": [ | |
| { | |
| "key": "field_571ca035ac927", | |
| "label": "Name", | |
| "name": "name", | |
| "type": "text", | |
| "instructions": "", | |
| "required": 0, | |
| "conditional_logic": 0, | |
| "wrapper": { | |
| "width": "", | |
| "class": "", | |
| "id": "" | |
| }, | |
| "default_value": "", | |
| "placeholder": "", | |
| "prepend": "", | |
| "append": "", | |
| "maxlength": "", | |
| "readonly": 0, | |
| "disabled": 0 | |
| }, | |
| { | |
| "key": "field_571cb39ff8039", | |
| "label": "Nice name", | |
| "name": "nice_name", | |
| "type": "text", | |
| "instructions": "Slug, no spaces and special characters", | |
| "required": 0, | |
| "conditional_logic": 0, | |
| "wrapper": { | |
| "width": "", | |
| "class": "", | |
| "id": "" | |
| }, | |
| "default_value": "", | |
| "placeholder": "", | |
| "prepend": "", | |
| "append": "", | |
| "maxlength": "", | |
| "readonly": 0, | |
| "disabled": 0 | |
| }, | |
| { | |
| "key": "field_571ca03aac928", | |
| "label": "Gallery", | |
| "name": "gallery", | |
| "type": "gallery", | |
| "instructions": "", | |
| "required": 0, | |
| "conditional_logic": 0, | |
| "wrapper": { | |
| "width": "", | |
| "class": "", | |
| "id": "" | |
| }, | |
| "min": "", | |
| "max": "", | |
| "preview_size": "thumbnail", | |
| "library": "all", | |
| "min_width": "", | |
| "min_height": "", | |
| "min_size": "", | |
| "max_width": "", | |
| "max_height": "", | |
| "max_size": "", | |
| "mime_types": "" | |
| } | |
| ] | |
| } | |
| ], | |
| "location": [ | |
| [ | |
| { | |
| "param": "page_template", | |
| "operator": "==", | |
| "value": "themename\/gallery.php" | |
| } | |
| ] | |
| ], | |
| "menu_order": 1, | |
| "position": "normal", | |
| "style": "default", | |
| "label_placement": "top", | |
| "instruction_placement": "label", | |
| "hide_on_screen": [ | |
| "featured_image" | |
| ], | |
| "active": 1, | |
| "description": "" | |
| } | |
| ] |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Include this in functions.php */ | |
| add_action( 'init', 'gallery_cat_rewrite' ); | |
| function gallery_cat_rewrite() { | |
| //My subpage slug is "gallery" if you have something else, change gallery to that | |
| add_rewrite_rule( | |
| 'gallery/([^/]+)/?$', | |
| 'index.php?pagename=gallery&category_name=$matches[1]', | |
| 'top' ); | |
| add_rewrite_rule( | |
| 'gallery/([^/]+)/page/([0-9]+)?$', | |
| 'index.php?pagename=gallery&category_name=$matches[1]&paged=$matches[2]', | |
| 'top' ); | |
| // Remember to flush the rules once after modyfing something here. | |
| // After first page refresh comment this line so that rule wouldn't be flushed over and over again. | |
| flush_rewrite_rules(); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment