⚠ In case you've missed it, we have migrated to our new website, with a brand new forum. For more details about the migration you can read our blog post for website migration. This is an archived forum. ⚠

  •     

profile picture

Thumbs into View



eldoge
  • profile picture
  • Member

Posted 20 November 2013 - 15:35 PM

Hello all!

Into my project I have made an upload image field with thumbnail and all works fine, into the Edit page the image is correctly uploaded and showed up, but into the View page the image is not showed but there is only the link to the image.

 

How can I show the image into the View page??

 

I use this code to show the image into my controller:

$crud->callback_column('immagine',array($this,'Image'));
function Image($value, $row){
return '<a class="ajax" href="uploads/' . $value .'"><img src="uploads/' . $value . '" alt="' . $value . '" width="24" height="24" /></a>';
}

Thanks for any help!!!


Amit Shah
  • profile picture
  • Member

Posted 22 November 2013 - 08:14 AM

hi eldoge

 

well you can use callback_read_column with the same and you should be able to get the desired result.

 

Well there was another way around...

instead of forcing all fields to be readonly... get the relevant values for the same - of course this had bugs - but a better version can be written in / understood

 

Update the following function (comment out the old 1 .. dont delete it..)

protected function get_read_input_fields($field_values = null)
	{
		$fields = $this->get_view_fields();
		$types 	= $this->get_field_types();

		$input_fields = array();

		foreach($fields as $field_num => $field)
		{
			$field_info = $types[$field->field_name];
			//$field_info->crud_type = 'readonly'; #force readonly

			$field_value = !empty($field_values) && isset($field_values->{$field->field_name}) ? $field_values->{$field->field_name} : null;
			if(!isset($this->callback_view_field[$field->field_name]))
			{
				$field_input = $this->get_field_view($field_info, $field_value);
			}
			else
			{
				$primary_key = $this->getStateInfo()->primary_key;
				$field_input = $field_info;
				$field_input->input = call_user_func($this->callback_view_field[$field->field_name], $field_value, $primary_key, $field_info, $field_values);
			}

			switch ($field_info->crud_type) {
				case 'invisible':
					unset($this->view_fields[$field_num]);
					unset($fields[$field_num]);
					continue;
				break;
				case 'hidden':
					$this->edit_hidden_fields[] = $field_input;
					unset($this->view_fields[$field_num]);
					unset($fields[$field_num]);
					continue;
				break;
			}

			$input_fields[$field->field_name] = $field_input;
		}

		return $input_fields;
	}

and add this 1 more function to the same

protected function get_field_view($field_info, $value=NULL) {

		$real_type = $field_info->crud_type;
		
		$types_array = array(
				'integer',
				'text',
				'true_false',
				'string',
				'date',
				'datetime',
				'enum',
				'set',
				'relation',
				'relation_n_n',
				'upload_file',
				'hidden',
				'password',
				'readonly',
				'dropdown',
				'multiselect'
		);
		
		if (in_array($real_type,$types_array)) {
			/* A quick way to go to an internal method of type $this->get_{type}_input .
			 * For example if the real type is integer then we will use the method
			* $this->get_integer_input
			*  */
		
			if($real_type == 'true_false') {
				if($value == 0) {
					$field_info->input = 'No';
				} else if($value == 1) {
					$field_info->input = 'Yes';
				} else {
					$field_info->input = '';
				}
			} else if($real_type == 'upload_file') {
				//Fancybox
				$unique = uniqid();
				$input = '';
				$this->load_js_fancybox();
			
				$this->set_js_config($this->default_javascript_path.'/jquery_plugins/config/jquery.fancybox.config.js');
				$file_display_none  	= empty($value) ?  "display:none;" : "";
			
				$is_image = !empty($value) &&
				( substr($value,-4) == '.jpg'
						|| substr($value,-4) == '.png'
						|| substr($value,-5) == '.jpeg'
						|| substr($value,-4) == '.gif'
						|| substr($value,-5) == '.tiff')
						? true : false;
			
				$image_class = $is_image ? 'image-thumbnail' : '';
				$file_url = base_url().$field_info->extras->upload_path.'/'.$value;
				$input .= "<a href='".$file_url."' id='file_$unique' class='";
				$input .= $is_image ? " $image_class'><img src='".$file_url."' height='50px'>" : "' target='_blank'>$value";
				$input .= "</a> ";
				$field_info->input = $input;
			} else { 
				$field_info->input = $this->{"get_readonly_input"}($field_info,$value);
			}
		}
		else
		{
			$field_info->input = $this->get_readonly_input($field_info,$value);
		}
		
		return $field_info;	
	}

Of course Web-Johny could derive a better solution.. but this is what i updated to my existing code and automatically got the same thumbnail and click to grow functionality in every piece of my view in the application

 

Happy GCing :)


Amit Shah
  • profile picture
  • Member

Posted 24 November 2013 - 11:31 AM

Hi there - a better option .. have updated the library itself with the function...

	protected function get_upload_file_readonly_input($field_info,$value)
	{

		$this->load_js_fancybox();
		
		$this->set_js_config($this->default_javascript_path.'/jquery_plugins/config/jquery.fancybox.config.js');
		
		$unique = mt_rand();
		
		$uploader_display_none 	= empty($value) ? "" : "display:none;";
		$file_display_none  	= empty($value) ?  "display:none;" : "";
		
		$is_image = !empty($value) &&
		( substr($value,-4) == '.jpg'
				|| substr($value,-4) == '.png'
				|| substr($value,-5) == '.jpeg'
				|| substr($value,-4) == '.gif'
				|| substr($value,-5) == '.tiff')
				? true : false;
		
		$image_class = $is_image ? 'image-thumbnail' : '';
		
		$file_url = base_url().$field_info->extras->upload_path.'/'.$value;
		
		$input = "<div id='success_$unique' class='upload-success-url' style='$file_display_none padding-top:7px;'>";
		$input .= "<a href='".$file_url."' id='file_$unique' class='open-file";
		$input .= $is_image ? " $image_class'><img src='".$file_url."' height='50px'>" : "' target='_blank'>$value";
		$input .= "</a> ";
		$input .= "</div><div style='clear:both'></div>";
		
		return $input;
	}

Just update this code and you will get an image thumbnail inside the library itslef.. no need to alter other then this 1 single function.


Robert
  • profile picture
  • Member

Posted 25 November 2013 - 08:24 AM

Hi there - a better option .. have updated the library itself with the function...

	protected function get_upload_file_readonly_input($field_info,$value)
	{

		$this->load_js_fancybox();
		
		$this->set_js_config($this->default_javascript_path.'/jquery_plugins/config/jquery.fancybox.config.js');
		
		$unique = mt_rand();
		
		$uploader_display_none 	= empty($value) ? "" : "display:none;";
		$file_display_none  	= empty($value) ?  "display:none;" : "";
		
		$is_image = !empty($value) &&
		( substr($value,-4) == '.jpg'
				|| substr($value,-4) == '.png'
				|| substr($value,-5) == '.jpeg'
				|| substr($value,-4) == '.gif'
				|| substr($value,-5) == '.tiff')
				? true : false;
		
		$image_class = $is_image ? 'image-thumbnail' : '';
		
		$file_url = base_url().$field_info->extras->upload_path.'/'.$value;
		
		$input = "<div id='success_$unique' class='upload-success-url' style='$file_display_none padding-top:7px;'>";
		$input .= "<a href='".$file_url."' id='file_$unique' class='open-file";
		$input .= $is_image ? " $image_class'><img src='".$file_url."' height='50px'>" : "' target='_blank'>$value";
		$input .= "</a> ";
		$input .= "</div><div style='clear:both'></div>";
		
		return $input;
	}

Just update this code and you will get an image thumbnail inside the library itslef.. no need to alter other then this 1 single function.

+1, This needs to be added to GC since is normal to see the att.. in view. Thanks for sharing.


eldoge
  • profile picture
  • Member

Posted 25 November 2013 - 15:37 PM

Thank you very much!!