Obrazki + listy definicji + Drupal

Artykuł został zaktualizowany dla wersji 5.x-1.4 modułu Image.

Na łamach letwist pisałem już o wstawianiu grafik przy pomocy list definicji. Teraz opiszę jak „wdrożyć” ten pomysł do Drupala. Trzy podstawowe zalety tej modyfikacji to:

• brak konieczności wprowadzania znaczników ręcznie
• rozwiązanie problemu z walidacją kodu
• rozwiązanie problemu z Internet Explorerem

Modyfikacja wykorzystuje moduł image_attach, który umożliwia wstawianie grafik bezpośrednio z formularza dodawania zawartości, oraz szablon PHPTemplate.

Problem z walidacją polegał na nieprawidłowym traktowaniu list definicji przez wbudowany w Drupala filtr „Konwerter znaków końca linii”, który co prawda można było wyłączyć, ale jest on dla odwiedzających stronę rzeczą raczej niezbędną.

Po zainstalowaniu modułu Image, wraz z modułem image_attach, otwieramy (lub tworzymy – jeśli jeszcze nie istnieje) szablon template.php naszej skórki opartej o silnik PHPTemplate i wklejamy co następuje:

function phptemplate_image_attach_teaser($node) {
  $img_size = variable_get('image_attach_size_teaser_'. $node->type, 'thumbnail');

  if ($img_size != IMAGE_ATTACH_HIDDEN) {
    drupal_add_css(drupal_get_path('module', 'image_attach') .'/image_attach.css');

    $image = node_load($node->iid);
    $info = image_get_info(file_create_path($image->images[$img_size]));

    $output .= '<dl class="image right">';
    $output .= '<dt>';
    $output .= l(image_display($image, $img_size), "node/$node->nid", array(), NULL, NULL, FALSE, TRUE);
    $output .= '</dt>';
    $output .= '<dd>'. $image->title .'</dd>';
    $output .= '</dl>'."\n";

    return $output;
  }
}

function phptemplate_image_attach_body($node) {
  $img_size = variable_get('image_attach_size_body_'. $node->type, IMAGE_THUMBNAIL);

  if ($img_size != IMAGE_ATTACH_HIDDEN) {
    drupal_add_css(drupal_get_path('module', 'image_attach') .'/image_attach.css');

    $image = node_load($node->iid);
    $info = image_get_info(file_create_path($image->images[$img_size]));

    $output .= '<dl class="image">';
    $output .= '<dt>';
    $output .= l(image_display($image, $img_size), "node/$node->nid", array(), NULL, NULL, FALSE, TRUE);
    $output .= '</dt>';
    $output .= '<dd>'. $image->title .'</dd>';
    $output .= '</dl>'."\n";

    return $output;
  }
}

Następnie do naszego arkusza stylów dodajemy:

dl.image {
        float: right;
        margin: 2px 0 2px 10px;
        padding: 6px;
        background-color: #EEE;
        color: inherit;
        border: 1px solid #BBB;
        text-align: center;
        }
dl.image dt {
        font-weight: bold;
        }
dl.image dt img {
        border: 1px solid #666;
        }
dl.image dd {
        margin: 0 auto;
        font-size: .8em;
        }

Voila! Pięknie ostylowane obrazki bezpośrednio z Drupala.