Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Made images repeatable #249

Closed
wants to merge 1 commit into from

7 participants

@juliankrispel

Added ability to have repeatable images in a custom field

@kennycrippen

Hi Julian, I tried implementing your code but I'm not seeing repeatable image fields. I copied your code to the init.php file, the cmb.js file and the style.css file. Any ideas? Is it working on your end? Thank you.

Has anyone else had success with implementing this?

@kennycrippen @derekshirk it's working on my end. If you'd like that functionality just clone my branch or download it.

Good stuff, thanks!

Hello Julian, thanks for image repeatable. I have only one question, is it possible make image draggable for change order? Thanks a lot!

@schweigerd

hi!
unfortunatelly, it didn't work for me either. any updates on this?
regards

@jtsternberg
Owner

@juliankrispel Can you re-submit this PR to the trunk branch?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jan 24, 2013
  1. @juliankrispel

    Made images repeatable

    juliankrispel authored
This page is out of date. Refresh to see the latest.
Showing with 27 additions and 27 deletions.
  1. +19 −16 init.php
  2. +6 −9 js/cmb.js
  3. +2 −2 style.css
View
35 init.php
@@ -363,25 +363,28 @@ function show() {
$input_type_url = "hidden";
if ( 'url' == $field['allow'] || ( is_array( $field['allow'] ) && in_array( 'url', $field['allow'] ) ) )
$input_type_url="text";
- echo '<input class="cmb_upload_file" type="' . $input_type_url . '" size="45" id="', $field['id'], '" name="', $field['id'], '" value="', $meta, '" />';
+ echo '<input class="cmb_upload_file" type="' . $input_type_url . '" size="45" id="', $field['id'], '" data-name="', $field['id'], '" />';
echo '<input class="cmb_upload_button button" type="button" value="Upload File" />';
echo '<input class="cmb_upload_file_id" type="hidden" id="', $field['id'], '_id" name="', $field['id'], '_id" value="', get_post_meta( $post->ID, $field['id'] . "_id",true), '" />';
echo '<p class="cmb_metabox_description">', $field['desc'], '</p>';
echo '<div id="', $field['id'], '_status" class="cmb_upload_status">';
if ( $meta != '' ) {
- $check_image = preg_match( '/(^.*\.jpg|jpeg|png|gif|ico*)/i', $meta );
- if ( $check_image ) {
- echo '<div class="img_status">';
- echo '<img src="', $meta, '" alt="" />';
- echo '<a href="#" class="cmb_remove_file_button" rel="', $field['id'], '">Remove Image</a>';
- echo '</div>';
- } else {
- $parts = explode( '/', $meta );
- for( $i = 0; $i < count( $parts ); ++$i ) {
- $title = $parts[$i];
- }
- echo 'File: <strong>', $title, '</strong>&nbsp;&nbsp;&nbsp; (<a href="', $meta, '" target="_blank" rel="external">Download</a> / <a href="#" class="cmb_remove_file_button" rel="', $field['id'], '">Remove</a>)';
- }
+ foreach( $meta as $file):
+ $check_image = preg_match( '/(^.*\.jpg|jpeg|png|gif|ico*)/i', $file );
+ if ( $check_image ) {
+ echo '<div class="img_status">';
+ echo '<img src="', $file, '" alt="" />';
+ echo '<a href="#" class="cmb_remove_file_button" rel="', $field['id'], '">Remove Image</a>';
+ echo '<input type="hidden" name="' . $field['id'] . '[]" value="' . $file . '"/>';
+ echo '</div>';
+ } else {
+ $parts = explode( '/', $file );
+ for( $i = 0; $i < count( $parts ); ++$i ) {
+ $title = $parts[$i];
+ }
+ echo 'File: <strong>', $title, '</strong>&nbsp;&nbsp;&nbsp; (<a href="', $file, '" target="_blank" rel="external">Download</a> / <a href="#" class="cmb_remove_file_button" rel="', $field['id'], '">Remove</a>)';
+ }
+ endforeach;
}
echo '</div>';
break;
@@ -469,7 +472,7 @@ function save( $post_id) {
if ( 'file' == $field['type'] ) {
$name = $field['id'] . "_id";
- $old = get_post_meta( $post_id, $name, !$field['multiple'] /* If multicheck this can be multiple values */ );
+ $old = get_post_meta( $post_id, $name, !$field['multiple'] /* If multicheck this can be multiple values */ );
if ( isset( $field['save_id'] ) && $field['save_id'] ) {
$new = isset( $_POST[$name] ) ? $_POST[$name] : null;
} else {
@@ -568,4 +571,4 @@ function cmbGetParameterByNameInline(name) {
return $args;
}
-// End. That's it, folks! //
+// End. That's it, folks! //
View
15 js/cmb.js
@@ -60,22 +60,19 @@ jQuery(document).ready(function ($) {
* File and image upload handling
*/
$('.cmb_upload_file').change(function () {
- formfield = $(this).attr('name');
+ formfield = $(this).attr('data-name');
$('#' + formfield + '_id').val("");
});
$('.cmb_upload_button').live('click', function () {
var buttonLabel;
- formfield = $(this).prev('input').attr('name');
+ formfield = $(this).prev('input').attr('data-name');
buttonLabel = 'Use as ' + $('label[for=' + formfield + ']').text();
tb_show('', 'media-upload.php?post_id=' + $('#post_ID').val() + '&type=file&cmb_force_send=true&cmb_send_label=' + buttonLabel + '&TB_iframe=true');
return false;
});
$('.cmb_remove_file_button').live('click', function () {
- formfield = $(this).attr('rel');
- $('input#' + formfield).val('');
- $('input#' + formfield + '_id').val('');
$(this).parent().remove();
return false;
});
@@ -106,17 +103,17 @@ jQuery(document).ready(function ($) {
image = /(jpe?g|png|gif|ico)$/gi;
if (itemurl.match(image)) {
- uploadStatus = '<div class="img_status"><img src="' + itemurl + '" alt="" /><a href="#" class="cmb_remove_file_button" rel="' + formfield + '">Remove Image</a></div>';
+ uploadStatus = '<div class="img_status"><img src="' + itemurl + '" alt="" /><a href="#" class="cmb_remove_file_button" rel="' + formfield + '">Remove Image</a><input type="hidden" name="' + formfield + '[]" value="' + itemurl + '"/></div>';
} else {
// No output preview if it's not an image
// Standard generic output if it's not an image.
html = '<a href="' + itemurl + '" target="_blank" rel="external">View File</a>';
- uploadStatus = '<div class="no_image"><span class="file_link">' + html + '</span>&nbsp;&nbsp;&nbsp;<a href="#" class="cmb_remove_file_button" rel="' + formfield + '">Remove</a></div>';
+ uploadStatus = '<div class="no_image"><span class="file_link">' + html + '</span>&nbsp;&nbsp;&nbsp;<a href="#" class="cmb_remove_file_button" rel="' + formfield + '">Remove</a><input type="hidden" name="' + formfield + '[]" value="' + itemurl + '"/></div>';
}
$('#' + formfield).val(itemurl);
$('#' + formfield + '_id').val(itemid);
- $('#' + formfield).siblings('.cmb_upload_status').slideDown().html(uploadStatus);
+ $('#' + formfield).siblings('.cmb_upload_status').append(uploadStatus);
tb_remove();
} else {
@@ -125,4 +122,4 @@ jQuery(document).ready(function ($) {
formfield = '';
};
-});
+});
View
4 style.css
@@ -28,7 +28,7 @@ table.cmb_metabox .mceIframeContainer {background:#FFF;}
table.cmb_metabox .meta_mce {width:97%;}
table.cmb_metabox .meta_mce textarea {width:100%;}
table.cmb_metabox .cmb_upload_status { margin: 10px 0 0 0;}
-table.cmb_metabox .cmb_upload_status .img_status { position: relative; }
+table.cmb_metabox .cmb_upload_status .img_status { position: relative; float: left; margin-right: 10px; }
table.cmb_metabox .cmb_upload_status .img_status img { border:1px solid #DFDFDF; background: #FAFAFA; max-width:350px; padding: 5px; -moz-border-radius: 2px; border-radius: 2px;}
table.cmb_metabox .cmb_upload_status .img_status .cmb_remove_file_button { text-indent: -9999px; background: url(images/ico-delete.png); width: 16px; height: 16px; position: absolute; top: -5px; left: -5px;}
/* Sidebar placement adjustments */
@@ -326,4 +326,4 @@ div.time-picker li.selected { background: #0063CE; color: #fff; }
left: -4px; /*must have*/
width: 200px; /*must have*/
height: 200px; /*must have*/
- }
+ }
Something went wrong with that request. Please try again.