Cara membuat gambar responsive di wordpress

Adi , November 8, 2018

Cara membuat gambar responsive di wordpress

Kami akan membagikan bagaimana cara membuat gambar responsive di wordpress , Ada 2 cara yang kami share cara membuat gambar post thumbnail Responsive dan gambar pada konten Responsive. Kenapa Anda membuat gambar responsive ? karena element yang penting pada website dan jika ada visitor yang mengunjungi website anda mengunakan tablet ataupun smartphone , gambar menyesuikan pada gadget yang kita pakai.

1. Cara membuat gambar post thumbnail responsive di wordpress

Cara membuat gambar post thumbnail responsive di wordpress

Gambar post thumbnail pada dashboard pada posts dan page , yang letaknya dibagian bawah kanan seperti gambar di atas. Langkah pertama kita akan tambahkan script code di themes wordpress functions.php

<?php the_post_thumbnail('full', array('class' => 'gambar_responsive')); ?>

Ini menambahkan class : gambar_responsive

 

Jika sudah tambahkan perintah css (biasanya pada directory atau folder css/style.css atau file css yang anda inginkan:

gambar_responsive {

  width:100%;

  height:auto;

  }

Gambar pada thumbnails width dan height pada thumbnail akan responsive menyesuaikan gambar aslinya.

2. Cara membuat gambar pada konten responsive di wordpress

Cara membuat gambar pada konten responsive di wordpress

Jika anda membuat konten artikel pada wordpress mempunyai masalah gambar tidak responsive, ini solusinya.tambahkan perintah di themes wordpress functions.php:

 

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','gambar_responsive');
        }

        $html = $document->saveHTML();
        return $html;
}
add_filter ('the_content', 'add_responsive_class');

 

Ini untuk mengubah nama class : gambar responsive

Jika sudah tambahkan perintah css (biasanya pada directory atau folder css/style.css atau file css yang anda inginkan:

 

gambar_responsive {

  width:100%;

  height:auto;

  }

 

Gambar post width dan height pada thumbnail akan responsive menyesuaikan gambar aslinya.

 

Tag terbaru :