I want to share with you this simple snippet which makes as much instances of galleries as user needs (and type).
- Regiester custom fields in functions.php file
add_action( 'admin_init', 'how_many_galleries_meta', 8 );
function how_many_galleries_meta() {
$fields = array(
array(
'id' => "total_galleries",
'type' => 'text',
'description' => 'Type number of gallery instances and hit enter to confirm'
)
);
beans_register_post_meta( $fields, array( 'gallery.php' ), "how_many_galleries", array( 'title' => "How many gallery instances?" ) );
}
add_action( 'admin_init', 'gallery_post_meta', 8 );
function gallery_post_meta() {
$total = beans_get_post_meta( 'total_galleries' );
for ( $i = 1; $i <= $total; $i++ ) {
$fields = array(
array(
'id' => "gallery_{$i}_image",
'label' => 'Gallery',
'type' => 'image',
'description' => 'Prefered image size is 1920 x 1080 px',
'multiple' => 'true'
),
array(
'id' => "gallery_{$i}_title",
'label' => 'Title',
'type' => 'text'
)
);
beans_register_post_meta( $fields, array( 'gallery.php' ), "gallery-{$i}", array( 'title' => "Gallery {$i}/{$total}" ) );
}
}- gallery.php file. Note that I use only PHP syntax. HTML markup is added to $return variable. After all operations (loops) I simply echo $return variable. I also resize and compress every image to avoid long loading time, when user adds to large pictures.
<?php
/* Template Name: Gallery */
add_action( 'beans_uikit_enqueue_scripts', 'enqueue_uikit_lightbox_asset' );
function enqueue_uikit_lightbox_asset() {
beans_uikit_enqueue_components( 'lightbox', 'add-ons' );
}
add_action( 'beans_post_body_append_markup', 'add_galleries' );
function add_galleries() {
$total = beans_get_post_meta( 'total_galleries' );
for ( $i = 1; $i <= $total; $i++ ) :
$title = beans_get_post_meta( 'gallery_{$i}_title' );
if ( !empty( beans_get_post_meta( "gallery_{$i}_image" ) ) ) {
if ( !empty( beans_get_post_meta( "gallery_{$i}_title" ) ) ) {
$return .= '<h4>' . beans_get_post_meta( "gallery_{$i}_title" ) . '</h4>';
}
$return .= '<div class="tm-gallery uk-grid uk-grid-width-small-1-2 uk-grid-width-medium-1-3" uk-grid-match data-uk-grid-margin>';
foreach ( beans_get_post_meta( "gallery_{$i}_image", array() ) as $id ) {
$src = wp_get_attachment_url( $id );
$src = beans_edit_image( $src, array(
'resize' => array( 1920, 1080, false ),
'set_quality' => array( 80 ),
) );
$return .= '<div class="tm-gallery-image">';
$return .= '<a href="' . $src . '" data-uk-lightbox="{group:\'' . "gallery{$i}" . '\'}">';
$return .= '<div class="uk-overlay uk-overlay-hover">';
$return .= '<img src="' . $src . '" alt="" />';
$return .= '<div class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade">';
$return .= '</div>';
$return .= '</div>';
$return .= '</a>';
$return .= '</div>';
}
$return .= '</div>';
}
endfor;
echo $return;
}
// Load Beans document.
beans_load_document();Let me know if you have some questions improvements or better name for this topic 😉
Happy Coding, Mariusz
Hello Mariusz, I am not sure what your script does.
Can you explain more, or make a screenshot?
thanks Jochen
First snippet adds metaboxes:
- How many gallery instances - determine number of galleries
- Dynamically added instances of galleries determined by given number above. In other words user gets fields for each gallery.
When you editing wordpress page you got this: https://dl.dropboxusercontent.com/u/3230774/beans/beans_dynamic_galleries.png (i covered real images by gray boxes named Photo 1, 2, 3 etc.
Second snippet adds content to page (after body text):
- Iterate in every gallery instances, shows gallery title (only user added it) and...
- Every image in each gallery, resize and compress them, show on the page and group them into Uikit lightbox group. I also added overlay on every image, which shows on hover.
I hope that it's clearer now 🙂
Mariusz
I see.
But I can do the same thing with the standard WP gallery, or not?
Theoretically yes, but standard WP gallery doesn't have lightbox (every image is open in new page), this solution in my opinion is easier to manage and applies all the UiKit (and Beans) goodness. 🙂
Hi Mariusz
Thank you very much for sharing!
- I have pasted the code into the functions.php file.
- I made the Gallery.php file and added it to the root of the child theme.
How do I use this?
Thanks.
Hi Paal, When editing page You have to select "Gallery" as a Template in Page Attributes section (on the right hand side). Then you'll see new fields above Tiny MCE.
Hope this helps, Mariusz
Hi Mariusz
I see no change above the TinyMCE menu bar after having selected the Gallery template and Updated the page. (The code has been added to the functions file).
What about using Duplicator to backup your site and sharing the duplicater zip and installer file through dropbox or something similar for us to download? We can then just install a new site locally using Mamp or Desktop Server.
Thanks.
Paal, my bad, I meant BELOW Tiny MCE 😉 You should see something like this: https://dl.dropboxusercontent.com/u/3230774/beans/beans_dynamic_galleries.png
If you have some problem, we can use Duplicator 🙂
Mariusz
Hello again Mariusz..:)
- I have added the code as you posted it to the functions.php file.
- Made a Gallery.php and added it to the root of the child theme.
- Went to a page and selected Template: Gallery. Updated/Saved the page.
- Logged out of the local test site and in again. Went back to the page I am using (backend).
I see nothing extra above or below the TinyMCE content creation box. So that I really do not know what is going on.
Btw Using Duplicator and sharing a simple site with Beans modifications and inline comments would be an awesome way for anyone to learn about Beans. Even better then just downloading a theme. As the site will be in place. I could then also create some additional tutorials out of it.
maybe you just have to activate it in the screen options. see https://codex.wordpress.org/Administration_Screens#Screen_Options
Hello Paal, I've just installed new instance of Beans with child theme, paste snippet from first post, and... everything works fine.
But I think that I figured it out. Filename for page must be gallery.php (lowercase!), because we registered it that way:
beans_register_post_meta( $fields, array( '**gallery.php**' ), "gallery-{$i}", array( 'title' => "Gallery {$i}/{$total}" ) );
Of course you can change filename here.
After first load you'll get only one field named "How many gallery instances", which need to be filled.
Hey guys
I got it kinda working when I renamed the Gallery.php to gallery.php. I added 1 instance and some images and gave it a title. Then I previewed the page and it was blank.
Hi Paal, my apologies for inconvience. Every page layout should ends with:
beans_load_document(); So add it under everything. I also edited my snippet, and added it there.
Now it finally works! It looks good!
Do you have a web site where you share additional code samples? It would be great to get a hold of some of your child themes and check out some additional code.
Have a great day!
Hi Paal, I have some snippets to share and I also purposed making a website for them, but sadly I have not. I also asked Thierry about it, but for now we have Extend section of forum.
PS. Most of my projecst are commercial, so I'm not allowed to share whole theme.
Hi Mariusz
It would be great to share your various snippets also here: http://wpbeansframework.com/ It is a site I built to share good Beans how tos, tips, themes and whatever else.
I went ahead and added the gallery snippet as a new tutorial on the site. I am gradually adding various information from the forum to the site.
Perhaps we can connect on Facebook.
Would it be possible to have similar function but instead of images, we can pull in recent posts for selected category along with featured images as thumbnail?
This would be sweet as homepage template. Any direction you can provide would be appreciated.
No with beans metaboxes. As You can see I used beans_register_post_meta which has only few types (text, textarea, checkbox, images, group).
I'd rather use Advanced Custom Fields or use one of Featured post plugin to acomplish this.
Eventually you can add checkbox metabox for posts. Then iterrate through all post in selected category, and return only these with checkbox ticked.
Hi Nori, do you mean to have a similar grid pulling the recent posts on the homepage or to have have the options to control in the backend?