2010-09-17 3 views
5

Ich muss Bilder in zusätzliche Markup für weitere CSS-Styling einwickeln. Ich hätte gerne so etwas: <p><span><img src="path/to/image" alt="alt"/></span></p>.Drupal: Wie Inline-Bilder in zusätzliche Markup Wrap

Die Bilder werden direkt auf dem bestimmten Knoten mit folgenden Modulen hinzugefügt:

  1. http://drupal.org/project/insert
  2. http://drupal.org/project/image
  3. http://drupal.org/project/cck -> Imagefield

Hier ist der Inhalt meiner node- [ist Typ] .tpl.php:

<div id="article"> 
    <div id="article-header"> 
     <h2><?php print $title; ?></h2> 
     <?php if ($submitted): ?> 
      <p class="created"><?php echo date("d. F Y - H:i", $created).t(' von ').$name; ?></p> 
     <?php endif; ?> 
    </div> 

    <div class="article-body"> 
     <?php print $content; ?> 
    </div> 

    <?php if ($links): ?> 
     <div class="extra-links"> 
      <?php print $links; ?> 
     </div> 
    <?php endif; ?> 
</div> 

<?php if($node->comment == 0 && isset($node->comment_count) && $node->comment_count < 1): ?> 
    <div id="comments"> 
     <p class="note">Kommentare geschlossen</p> 
    </div> 
<?php endif; ?> 

Ich denke, ich muss etwas mit $content tun. Aber ich habe wirklich keine Ahnung. Irgendwelche Vorschläge?

Antwort

3

Wenn Sie das Einfügemodul verwenden, gibt es eine Option zum Hinzufügen von "Zusätzliche CSS-Klassen" zum Bild in den Einstellungen zum Einfügen in das Bildfeld.

Dies fügt eine Klasse zu (aber es wird nicht umspannen eine Spanne um <img> wie Sie wollen). Mit dieser Klasse können Sie benutzerdefinierte CSS erstellen, die Sie möchten.

Dieser Ansatz hat einige Einschränkungen

  1. Sie den WYSIWYG-Filtermodul (http://drupal.org/project/wysiwyg_filter) zu verhindern Klassen werden gestrippt aus dem img-Tag verwenden müssen (oder Sie werden das vollständige HTML-Format verwenden, müssen die ist offensichtlich keine gute Idee, wenn keine Administratoren Inhalte auf der Site eingeben)
  2. Sie müssen das Klassenattribut für das Tag in den WYSIWYG-Einstellungen zulassen. Stellen Sie unter erweiterten Optionen sicher, dass Sie die zulässigen Klassen zulassen.
  3. Sie sollten die HTML-Filter deaktivieren, wie Sie jetzt den WYSIWYG-Filter

so die Regel für Tag so etwas wie img aussehen verwenden [src |! Title | alt | class]. Stellen Sie sicher, dass die gewünschte Klasse z. custom-css-class wird unter dem erweiterten Regeln Abschnitt für WYSIWYG

Edit: Ok Ich verstehe Ihre Anforderung besser jetzt.

  1. Für imagefields, die keine Inline werden (dh in Inhaltsbereichen) Sie den Inhalt-field.tpl.php außer Kraft setzen kann indem es content-field- [FIELD_NAME] .tpl.php Umbenennung Sie können das Bildfeld mit umschließen, was auch immer Sie in dieser Datei wollen. Bitte sehen http://www.advantagelabs.com/drupal-colonoscopy-or-how-theme-cck-field-drupal-6

  2. Für Bilder, die inline sind und Sie wollen noch einige Einwickeln HTML hinzufügen Sie http://drupal.org/project/customfilter Dieses ist ein ehrfürchtiges Modul verwenden kann (schwierig zu Gebrauch, aber es funktioniert !!).Sie können für das Tag suchen und beliebige Sachen um ihn hinzufügen. Siehe http://drupal.org/node/210551 für Dokumentation

+0

Vielen Dank für Ihre Antwort, aber das ist nicht das, was ich tun muss. Ich kann mein Bild einfach mit '#article img {}' in meiner CSS-Datei auswählen und ein solides CSS-Styling machen. Aber ich brauche zusätzliches Markup, um mein Layout-Problem zu lösen. Sie sollten wahrscheinlich wissen, dass ich mehrere css Hintergrundbilder verwenden muss. Css 3 und Javascript (jQuery) sind keine Option. – gearsdigital

+0

Sie können content-field.tpl.php für Bildfelder überschreiben und benutzerdefinierte Filter verwenden (siehe oben bearbeitete Antwort) –

+0

NoParrots, das benutzerdefinierte Filtermodul ist ein großer Vorschlag, aber für mich zu kompliziert :) Ich fand einen anderen Weg. http://drupal.org/project/wysiwyg_imageupload Standardmäßig benutzerdefiniertes HTML hinzugefügt. Ich habe das Modul für meine Anliegen geändert und es funktioniert jetzt gut. Nochmals vielen Dank :) – gearsdigital