Print Media CKeditor images correctly custom code

Question

How can I show an image that I uploaded with de CKeditor Media browser on my page? Now I use this code:

    case 'black_box_with_image':        
        $black_box_with_image_image = '';
        if (!empty($content['settings']['black_box_with_image_image'])) {
            $fid = $content['settings']['black_box_with_image_image'];
            $file = file_load($fid);
            if ($file) {
                $image = array(
                    'path' => $file->uri
                );
                $black_box_with_image_image = theme('image', $image);
            }
        }

        $black_box_with_image_title = !empty($content['settings']['black_box_with_image_title']) ? $content['settings']['black_box_with_image_title'] : ''; 
        $black_box_with_image_link_name = !empty($content['settings']['black_box_with_image_link_name']) ? $content['settings']['black_box_with_image_link_name'] : ''; 
        $black_box_with_image_link = !empty($content['settings']['black_box_with_image_link']) ? $content['settings']['black_box_with_image_link'] : '';    
        $black_box_with_image_description = isset($content['settings']['black_box_with_image_description']['value']) ? $content['settings']['black_box_with_image_description']['value'] : '';  

        $black_box_with_image = '
            <div class="black_box_with_image col-md-12">
                <div class="pull-left col-md-7">
                    <h2 class="titel">' . $black_box_with_image_title . '</h2>
                    <p class="beschrijving">' . $black_box_with_image_description . '</p>
                    <a href="' . $black_box_with_image_link . '">' . $black_box_with_image_link_name . '</a>
                </div>
                <div class="pull-right col-md-5">
                    ' . $black_box_with_image_image . '
                </div>
            </div>
        ';

        $content['content'] = $black_box_with_image;
    break;

The variable $black_box_with_image_description is the field with the CKeditor Media browser image.

Now it shows like this:

[[{"fid":"8","view_mode":"default","fields":{"format":"default","field_file_image_alt_text[und][0][value]":"field_file_image_title_text[und][0][value]":"","field_folder[und]":"6"},"type":"media","attributes":{"height":"480","width":"388","style":"width: 150px; height: 186px;","class":"media-element file-default"}}]]

In the editor, the image is displayed, but when I save the node it shows the plain HTML.

Convert Media tags to markup

I checked the covert media tags to markup in the format section. When I use a default CCK field the images shows correctly, but not with my custom code..

Answer 1

Problem solved.

$black_box_with_image_description = isset($content['settings']['black_box_with_image_description']['value']) ? $content['settings']['black_box_with_image_description']['value'] : '';
if (isset($content['settings']['black_box_with_image_description']['format'])) {
    $black_box_with_image_description = check_markup($black_box_with_image_description, $content['settings']['black_box_with_image_description']['format']);
}