Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/demirdoven/image-gallery-for-cpt-or-post-in-wordpress
Easy to use image gallery for posts or custom post types. Drag & drop sorting and multiple images support.
https://github.com/demirdoven/image-gallery-for-cpt-or-post-in-wordpress
wordpress wordpress-development wordpress-gallery wordpress-gallery-plugin
Last synced: about 1 month ago
JSON representation
Easy to use image gallery for posts or custom post types. Drag & drop sorting and multiple images support.
- Host: GitHub
- URL: https://github.com/demirdoven/image-gallery-for-cpt-or-post-in-wordpress
- Owner: demirdoven
- Created: 2018-03-22T00:07:03.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-05-27T10:50:06.000Z (over 1 year ago)
- Last Synced: 2024-09-26T14:40:52.941Z (about 2 months ago)
- Topics: wordpress, wordpress-development, wordpress-gallery, wordpress-gallery-plugin
- Language: PHP
- Homepage:
- Size: 15.6 KB
- Stars: 53
- Watchers: 5
- Forks: 10
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Cool image gallery feature for custom post types and posts #
With drag & drop sorting and multiple images feature
### Description ###
You can add image gallery feature to your post/cpt edit page easily. After images are loaded and you save post, you can use the image urls as custom fields in anywhere in your theme.
### Installation (Add following codes to functions.php) ###
Creating meta box for 'house' custom post type:
```
function property_gallery_add_metabox(){
add_meta_box(
'post_custom_gallery',
'Gallery',
'property_gallery_metabox_callback',
'house', // Change post type name
'normal',
'core'
);
}
add_action( 'admin_init', 'property_gallery_add_metabox' );
```
Meta box callback function:
```
function property_gallery_metabox_callback(){
wp_nonce_field( basename(__FILE__), 'sample_nonce' );
global $post;
$gallery_data = get_post_meta( $post->ID, 'gallery_data', true );
?>
;%20?>)
post_type )
return;
?>
.gallery_area {
float:right;
}
.image_container {
float:left!important;
width: 100px;
background: url('https://i.hizliresim.com/dOJ6qL.png');
height: 100px;
background-repeat: no-repeat;
background-size: cover;
border-radius: 3px;
cursor: pointer;
}
.image_container img{
height: 100px;
width: 100px;
border-radius: 3px;
}
.clear {
clear:both;
}
#gallery_wrapper {
width: 100%;
height: auto;
position: relative;
display: inline-block;
}
#gallery_wrapper input[type=text] {
width:300px;
}
#gallery_wrapper .gallery_single_row {
float: left;
display:inline-block;
width: 100px;
position: relative;
margin-right: 8px;
margin-bottom: 20px;
}
.dolu {
display: inline-block!important;
}
#gallery_wrapper label {
padding:0 6px;
}
.button.remove {
background: none;
color: #f1f1f1;
position: absolute;
border: none;
top: 4px;
right: 7px;
font-size: 1.2em;
padding: 0px;
box-shadow: none;
}
.button.remove:hover {
background: none;
color: #fff;
}
.button.add {
background: #c3c2c2;
color: #ffffff;
border: none;
box-shadow: none;
width: 100px;
height: 100px;
line-height: 100px;
font-size: 4em;
}
.button.add:hover, .button.add:focus {
background: #e2e2e2;
box-shadow: none;
color: #0f88c1;
border: none;
}
function remove_img(value) {
var parent=jQuery(value).parent().parent();
parent.remove();
}
var media_uploader = null;
function open_media_uploader_image(obj){
media_uploader = wp.media({
frame: "post",
state: "insert",
multiple: false
});
media_uploader.on("insert", function(){
var json = media_uploader.state().get("selection").first().toJSON();
var image_url = json.url;
var html = '<img class="gallery_img_img" src="'+image_url+'" height="55" width="55" onclick="open_media_uploader_image_this(this)"/>';
console.log(image_url);
jQuery(obj).append(html);
jQuery(obj).find('.meta_image_url').val(image_url);
});
media_uploader.open();
}
function open_media_uploader_image_this(obj){
media_uploader = wp.media({
frame: "post",
state: "insert",
multiple: false
});
media_uploader.on("insert", function(){
var json = media_uploader.state().get("selection").first().toJSON();
var image_url = json.url;
console.log(image_url);
jQuery(obj).attr('src',image_url);
jQuery(obj).siblings('.meta_image_url').val(image_url);
});
media_uploader.open();
}
function open_media_uploader_image_plus(){
media_uploader = wp.media({
frame: "post",
state: "insert",
multiple: true
});
media_uploader.on("insert", function(){
var length = media_uploader.state().get("selection").length;
var images = media_uploader.state().get("selection").models
for(var i = 0; i < length; i++){
var image_url = images[i].changed.url;
var box = jQuery('#master_box').html();
jQuery(box).appendTo('#img_box_container');
var element = jQuery('#img_box_container .gallery_single_row:last-child').find('.image_container');
var html = '<img class="gallery_img_img" src="'+image_url+'" height="55" width="55" onclick="open_media_uploader_image_this(this)"/>';
element.append(html);
element.find('.meta_image_url').val(image_url);
console.log(image_url);
}
});
media_uploader.open();
}
jQuery(function() {
jQuery("#img_box_container").sortable(); // Activate jQuery UI sortable feature
});
ID, 'gallery_data', true );
$photos_array = unserialize($photos_query);
$url_array = $photos_array['image_url'];
$count = sizeof($url_array);
for( $i=0; $i<$count; $i++ ){
?>
```