Skip to content

Instantly share code, notes, and snippets.

@zakirsajib
Last active March 5, 2023 16:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zakirsajib/6d028037537f918bdaad776bc64f111f to your computer and use it in GitHub Desktop.
Save zakirsajib/6d028037537f918bdaad776bc64f111f to your computer and use it in GitHub Desktop.
Create option page. Let's say we have ACF gallery field. Users from their profile can upload as many images as they want to add into gallery from frontend. When they upload it saves into their user profile. And in another page say photo album will show all images from each gallery of each user. But admin of the site wants to control which image …
/**
Background:
Let's say we have ACF gallery field 'gallery_by_parents'. Users can upload as many images as they want to add into gallery from frontend.
When they upload it saves into their user profile in wp dashboard.
And in another page say photo album will show all images from each gallery of each user.
But admin of the site wants to control which image should appear in photo album page.
So we will create an option page where it will show a table, where user and their all images of gallery will be displayed.
And then we will add a checkbox beside of each image.
When admin will select the checkbox then associate image of that checkbox will be saved into option table into db.
In option table we will save each image ID and the url of the image.
So later in photo album page we can retrieve image ID and the URL.
*/
// Approved gallery images from Admin
function my_plugin_options_page() {
add_menu_page(
'Gallery by parents',
'Gallery from parents',
'manage_options',
'approved-images',
'my_plugin_options_page_html',
'dashicons-format-gallery',
20
);
if ( isset( $_POST['my_plugin_selected_images'] ) && wp_verify_nonce( $_POST['my_plugin_save_options_nonce'], 'my_plugin_save_options' ) ) {
$selected_images = $_POST['my_plugin_selected_images'];
update_option( 'my_plugin_selected_images', $selected_images );
echo '<div id="message" class="updated fade"><p><strong>settings saved.</strong></p></div>';
}
}
add_action( 'admin_menu', 'my_plugin_options_page' );
function my_plugin_options_page_html() {
$users = get_users();
?>
<div class="wrap">
<h1><?php echo esc_html( get_admin_page_title() ); ?></h1>
<p>Please select image(s) from each parent. Only approved images will appear in public <a href="<?php bloginfo('home')?>/photo-album?force" target="_blank">photo album</a> page.</p>
<style>
a.wp-not-current-submenu.menu-top.toplevel_page_approved-images,
#adminmenu li a.toplevel_page_approved-images,
#adminmenu li.current a.menu-top.toplevel_page_approved-images {
background-color: rgba(229, 132, 53);
}
.img-wrapper- {
display: inline-block;
}
.img-wrapper-checked {
position: relative;
display: inline-block;
}
.img-wrapper-checked::before {
content:"";
position: absolute;
top:0;
left:0;
height:100%;
width:100%;
/* background: rgba(229, 132, 53, 0.5); */
z-index:999;
}
.img-wrapper-checked::after {
content: 'Approved';
position: absolute;
left: -45px;
top: 15px;
color: green;
font-size: 12px;
font-weight: 700;
transform: rotate(270deg);
}
.img-checked {
box-shadow: rgb(31 193 27) 0px 0px 0px 6px;
}
</style>
<form method="post" action="">
<?php settings_fields( 'my_plugin_selected_images' ); ?>
<?php do_settings_sections( 'my_plugin_selected_images' ); ?>
<?php settings_errors(); ?>
<?php $options = get_option( 'my_plugin_selected_images' );
$selected_ids = array();
if ( isset( $options ) && ! empty( $options ) ) {
foreach ( $options as $option ) {
array_push( $selected_ids, $option );
}
}
?>
<input type="hidden" name="action" value="my_plugin_save_options">
<?php wp_nonce_field( 'my_plugin_save_options', 'my_plugin_save_options_nonce' ); ?>
<table class="wp-list-table widefat striped">
<thead>
<tr>
<th><?php esc_html_e( 'Parents Name', 'my-plugin' ); ?></th>
<th><?php esc_html_e( 'Gallery', 'my-plugin' ); ?></th>
</tr>
</thead>
<tbody>
<?php foreach ( $users as $user ) : ?>
<?php $images = get_field( 'gallery_by_parents', 'user_' . $user->ID );?>
<?php if ( $images ) : ?>
<tr>
<td><?php echo esc_html( $user->display_name ); ?></td>
<td>
<?php foreach ( $images as $image ) : ?>
<?php $checked = '';
if ( in_array( $image['id'], $selected_ids ) ) {
$checked = 'checked';
}
?>
<label>
<input type="checkbox" name="my_plugin_selected_images[]" value="<?php echo esc_attr( $image['id'] ); ?>" <?php echo $checked; ?>>
<div class="img-wrapper-<?php echo $checked;?>">
<img src="<?php echo esc_url( $image['sizes']['thumbnail']); ?>" class="img-<?php echo $checked;?>" style="margin-right: 5px;">
</div>
</label>
<?php endforeach; ?>
</td>
</tr>
<?php endif; ?>
<?php endforeach; ?>
</tbody>
</table>
<?php submit_button( 'Approve Selected Images' ); ?>
<?php //if ( isset( $options ) && ! empty( $options ) ) : ?>
<!-- <p>Approved image IDs: <?php //echo implode( ', ', $options ); ?></p> -->
<?php //endif; ?>
</form>
</div>
<?php
}
/**
Create a shortcode: [zephrys-gallery] to display approved images.
*/
function zephyrs_gallery_from_all_members() {
ob_start();
$admin_approved_images = get_option( 'my_plugin_selected_images' ); ?>
<?php if ( ! empty( $admin_approved_images ) ) {
foreach( $admin_approved_images as $admin_approved_image ): ?>
<div class="bg" style="background-image: url(<?php echo wp_get_attachment_image_url($admin_approved_image, 'large');?>)"></div>
<?php endforeach; ?>
<?php } else {
echo '<h2 class="error">No approved images were found!</h2>';
}
return ob_get_clean();
}
add_shortcode('zephrys-gallery', 'zephyrs_gallery_from_all_members');
@zakirsajib
Copy link
Author

gallery-from-parents

@zakirsajib
Copy link
Author

Screenshot 2023-03-05 at 22 40 44

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment