Wie automatisches einfügen der Klasse in Bild für wordpress post

Ich möchte ein responsive theme mit Bootstrap 3. Allerdings brauche ich, um automatisch fügen Sie die CSS-Klasse .img-responsive jeden Beitrag Bild, denn ich brauche die Bilder zu reagieren.

Bitte mir empfehlen, was muss ich hinzufügen in WordPress functions.php - Datei oder eine andere Datei, die mir erlauben, fügen Sie die CSS-Klasse automatisch.

InformationsquelleAutor Amit Sarker | 2013-12-09

39

da müssen Sie es für alle Ihre Bilder hochladen, dann müssen Sie einen Haken für den Inhalt und fügen Sie
```
function add_responsive_class($content){

        $content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
        $document = new DOMDocument();
        libxml_use_internal_errors(true);
        $document->loadHTML(utf8_decode($content));

        $imgs = $document->getElementsByTagName('img');
        foreach ($imgs as $img) {
           $img->setAttribute('class','img-responsive');
        }

        $html = $document->saveHTML();
        return $html;
}
```
fügen Sie nun den Haken, um den Inhalt
```
add_filter        ('the_content', 'add_responsive_class');
```
Jedoch, wenn Sie bereits Klassen für das img und Sie müssen zum hinzufügen einer neuen Klasse dann finden Sie auf PHP-äquivalent zu jQuery addClass. Oder Sie können einfach tun dies:
```
$existing_class = $img->getAttribute('class');
$img->setAttribute('class', "img-responsive $existing_class");
```
Den code oben funktioniert .. ich benutze es zum entfernen der src und data-src für das Bild lazy loading. Hoffe, es funktioniert für Sie

Nice Verwendung von DOMDocument. Ich sehe zu viele Menschen, was auf die Verwendung von regex für diese Art von Anwendung. +1
regex ist viel schneller als dieser. überlegen Sie auch tun, es mit javascript. Mit jquery, das ich erraten Sie Sie haben, wäre einfach $("#main-content").find("img").addClass("img-responsive")..
andere Leute vorgeschlagen, dass eine JS-Lösung sowie wieder die Antwort, dass dies bedeutet, dass die Seite, die generiert werden, von PHP dann diese Funktion ausgeführt wird auf dem Dokument laden, oder irgendeinen anderen Haken, die Sie definiert .. es ist besser, die Klassen in der erzeugten PHP-Datei, sparen Sie unnötige DOM-Manipulationen, die direkt auf gemacht das backend und seine sehr nützlich in Fällen, wo Sie das caching als auch. Plus, responsive images kann erreicht werden durch CSS und tun, dass mit Hilfe von jQuery, wie Sie vorgeschlagen Lösung verlangt, dass JS aktiviert werden, die möglicherweise nicht immer der Fall bei einigen
Sie werden überrascht sein, auf wie viele deaktivieren es aus verschiedenen Gründen. Eine gute pegrammer nicht davon ausgehen, Zeug aber design ist zu fangen alle Fälle, das ist das Prinzip des progressive enhancements. Auch, wie Sie wissen, war er "verloren" ? Können Sie Gedanken Lesen. Jedenfalls gibt es keine perfekte Lösung, aber Sie waren davon so viele Sachen in Ihrem Kommentar
Diese Lösung führt dazu, dass die the_content() Funktion wickeln Sie die post-Inhalt mit <html> und <body> - tags.

InformationsquelleAutor AhmadAssaf
22

Dieser Ansatz ist besser: https://wordpress.stackexchange.com/questions/108831/add-css-class-to-every-image
```
function add_image_class($class){
    $class .= ' additional-class';
    return $class;
}
add_filter('get_image_tag_class','add_image_class');
```
Einzige Einschränkung ist, dass es fügt die Klasse innerhalb des Bearbeiten-Fensters, wenn Sie das einfügen neuer Bilder und hat keine Auswirkungen auf pre bestehenden.

diese Antwort ist besser als andere.Es sollte gekennzeichnet werden, wie die richtige Antwort.
Mir persönlich gefällt diese Antwort am besten. Am einfachsten zu Klassen hinzufügen zu einem Bild Hinzugefügt wird.
Ich würde sagen, dies ist "die WordPress-Weg" zu gehen.
beste Antwort von allen

InformationsquelleAutor Yaron
15

Ich denke, der einfachste Weg ist die Verwendung von CSS wie dieses.
```
.content img { height: auto; max-width: 100%; }
```
Wo .Inhalt ist der Bereich, in dem sich Ihre Inhalte veröffentlichen.

Hinweis: Sie können auch überschreiben Sie die .wp-caption - Klasse auch so gerne.
```
.wp-caption { width: auto !important; }
```
Dies sollte die richtige Antwort. Wickeln Sie den gesamten Inhalt in eine div und fügen Sie eine Klasse, um es als content oder was auch immer Sie es nennen wollen.

InformationsquelleAutor Syclone
9

Ich hatte die gleiche Frage, und das hinzufügen dieser Funktion functions.php arbeitete für mich.
```
function add_image_responsive_class($content) {
   global $post;
   $pattern ="/<img(.*?)class=\"(.*?)\"(.*?)>/i";
   $replacement = '<img$1class="$2 img-responsive"$3>';
   $content = preg_replace($pattern, $replacement, $content);
   return $content;
}
add_filter('the_content', 'add_image_responsive_class');
```
Diese Antwort sollte als gelöst markiert, weil das funktioniert viel besser als andere. Diese dont einfügen, DOCTYPE, HTML-und BODY-tags im html-Code.
Dieser Besondere code, der nicht nur perfekt funktionieren. Es ermöglicht Ihnen die Globale modal Bilder auf der beliebten Thema newsletter und newsmag. Die Globale modal ist gebrochen auf Ihr Thema, wenn Sie ermöglichen, CDN. Mit diesem Stück codiert Hinzugefügt, um ein plugin, das theme, das die Funktionalität wird wiederhergestellt. Sollten Sie mieten Sie verbessern Ihren code wie Sie mit wp-booster und Sie nicht wollen, um es zu beheben, Sie nur sagen, "CDN kann nicht außerhalb von Cloudflare.

InformationsquelleAutor user793487
5

Beim anzeigen von post in der Schleife, die man tun könnte :
```
the_post_thumbnail('thumbnail', array('class' => 'img-responsive'));
```
Sehen https://codex.wordpress.org/Function_Reference/the_post_thumbnail für mehr details.

Dank Bertrand, Aber ich brauche alle meine Bilder werden full responsive. So, möchte ich hinzufügen, dass class="img-responsive" für alle Bilder.

InformationsquelleAutor Bertrand
4

Nicht ganz sicher, wie gut diese Antwort ist der performance-wise, aber es funktioniert. Nur setzen Sie diese in functions.php.
```
function img_responsive($content){
    return str_replace('<img class="','<img class="img-responsive ',$content);
}
add_filter('the_content','img_responsive');
```
Bitte beachten Sie, dass Sie den Platz brauchen nach class="img-responsive so spielt es keine Zusammenführung mit anderen Klassen.

InformationsquelleAutor Lallex
3

Können Sie jquery-code auf der header.php Datei des themes.
```
jQuery(function() {
  jQuery(img).addClass('img-responsive');
});
```
Dank Bidhut, Ihre codes ist genial. Dies ist, was ich will.
bitte beachten Sie, dass dies ist eine JS-Lösung .. was bedeutet, dass die Seite, die generiert werden, von PHP dann diese Funktion ausgeführt wird auf dem Dokument laden, oder irgendeinen anderen Haken, die Sie definiert .. es ist besser, die Klassen in der erzeugten PHP-Datei

InformationsquelleAutor super global user
1

Denke ich, dass Sie nicht benötigen, um Sie auf Klasse hinzufügen, um das Bild zu reagieren.
entfernen Sie einfach Höhe, Breite vorgestellten Bild, Bild sich reaktionsschnell Weg auf jeden Fall.

Gibt es code in Ihre function.php entfernen Höhe Breite
```
add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 3 );

function remove_thumbnail_dimensions( $html, $post_id, $post_image_id ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
} 
```
Mitul, die ich entfernt haben, die Breite und Höhe aus post-images, indem Sie Ihre codes. Es ist wirklich hilfreich. Aber Es ist nicht post Bilder reaktionsschnell Weg in Bootstrap 3.0

InformationsquelleAutor Mitul Shah
0

Klassen werden nicht Hinzugefügt, beim hochladen, aber wenn das Bild an die Redaktion. Sie können die image_send_to_editor filter hinzufügen, um eine oder mehrere Klassen. Dieses Beispiel fügt eine fancybox Klasse.

dieser Haken funktioniert für neu hinzugefügte Bilder .. funktioniert aber nicht auf seine alten Beiträge
Richtig. Beachten Sie, dass die OP mit der Erstellung eines neuen Designs.

InformationsquelleAutor diggy

//all classes i need in a string

$classes = 'img-responsive attachment-post-thumbnail size-post-thumbnail wp-post-image'; 

//then i use my variable

the_post_thumbnail('post_thumbnail', array( 'class' => $classes ));

InformationsquelleAutor Yolexis Reyes

0

Könnte man einfach alle Bilder reaktionsschnell Weg in die css, wie hier erwähnt:

Ich möchte css-Klasse(bootstrap) .img-responsive auf alle Inhalte, Bilder

Verwendet WENIGER, aber die Sass-version ist so ziemlich das gleiche:
```
  img {
    @include img-responsive();
  }
```
InformationsquelleAutor Jordie C

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.