The document discusses responsive web design (RWD) techniques in WordPress, highlighting the importance of content adaptation to various screen sizes. It covers the creation of RWD using frameworks like Bootstrap, handling images effectively for different devices, and implementing WordPress functionalities for mobile responsiveness. Key topics include the use of lazy loading for images, server-side content adaptation, and filtering images in WordPress to ensure proper display on mobile devices.

1. Responsive Web Design
tehnike u WordPressu
Igor Benić WP Meetup Zagreb 19.09

2. Sadržaj
• O meni
• Što je RWD?
• Izrada RWD-a
• Slike u RWD-u
• WordPress i RWD
• Slike u WordPress-u
• WordPress Mobile
• Pitanja

3. O meni
• Front End Developer @ Multilink
• Co-founder – www.lakotuts.com
• PSD -> PHP
• Autor knjige: WordPress na Bootstrap-u 3.x

4. O meni
• Bootstrap 3
• Izrada osnovne i naprednih tema
• Customizer API
• Settings API
• AJAX
http://leanpub.com/wpb3

5. Što je RWD?
• Stranica (sadržaj) se prilagođava ekranu
– Točke izmjene
• Vrste RWD-a
– Responsive
– Adaptive
• Sadržaj
• Brzina

6. Izrada RWD-a
• Mobile First
• Desktop First
• Korištenje Alata
• CSS od nule
• Korištenje Frameworka

7. Načini izrade - Framework
• Bootstrap 3
• Foundation
• Skeleton
• Gumby
• Mnogi drugi

8. Slike u RWD-u
• Nisu jednostavne
– Servirati samo potrebnu sliku
– Paziti i na Retina ekrane
• Moguća rješenja
– Picturefill 2.0
– BttrLazyLoading

9. Slike u RWD-u – PictureFill 2.0
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="examples/images/extralarge.jpg" media="(min-
width: 1000px)">
<source srcset="examples/images/large.jpg" media="(min-width:
800px)">
<source srcset="examples/images/large@2.jpg" media="(min-
width: 800px) and (-webkit-min-device-pixel-ratio: 2)">
<!--[if IE 9]></video><![endif]-->
<img srcset="examples/images/medium.jpg" alt="A giant stone
face at The Bayon temple in Angkor Thom, Cambodia">
</picture>

10. Slike u RWD-u – BttrLazyLoading
<img id="yourImageId" class="bttrlazyloading"
data-bttrlazyloading-xs-src="img/768x200.gif"
data-bttrlazyloading-xs-width="768"
data-bttrlazyloading-xs-height="200"
data-bttrlazyloading-sm-src="img/345x250.gif"
data-bttrlazyloading-sm-width="345"
data-bttrlazyloading-sm-height="250"
data-bttrlazyloading-md-src="img/455x350.gif"
data-bttrlazyloading-md-width="455"
data-bttrlazyloading-md-height="350" d
data-bttrlazyloading-lg-src="img/360x300.gif"
data-bttrlazyloading-lg-width="360"
data-bttrlazyloading-lg-height="300" />

11. WordPress i RWD
RESS
Pružanje sadržaja ovisno o uređaju
Prilagodba sadržaja na serveru

12. Slike u WordPress-u
• Različite verzije za istu sliku
– add_image_size(“verzija”, širina, visina, [true |
false]);
• add_filter(“post_thumbnail”,
funkcija_za_promjenu);

13. Slike u WordPress-u - Thumbnailovifunction wpb3_thumbnail_html($html, $post_id, $aid, $sizeThumb, $attr){
if($sizeThumb == "slika-clanka"){
$sizes = array('slika-clanka‘, 'slika-clanka-md‘, 'slika-clanka-sm‘, 'slika-clanka-xs’);
$img = "<img class='bttrLazyLoading img-responsive' alt='".get_the_title()."'";
$sizeBttr = "";
$width = "";
$height = "";
$aid = (!$aid) ? get_post_thumbnail_id() : $aid;
foreach ( $sizes as $size ) {
$url = wp_get_attachment_image_src( $aid, $size );
switch ($size) {
case 'slika-clanka':
$sizeBttr = "lg";
$width = "750";
$height= "353";
break;
...
}
$img .= " data-bttrlazyloading-".$sizeBttr."-src='". $url[0] ."' ";
$img .= " data-bttrlazyloading-".$sizeBttr."-width='". $width ."' ";
$img .= " data-bttrlazyloading-".$sizeBttr."-height='". $height ."' ";
}
$img .= " />";
return $img;
}
return $html;
}
add_filter(
'post_thumbnail_html',
'wpb3_thumbnail_html', 10, 5);

14. Slike u WordPress-u - Content
• Filtrirati slike prilikom ispisa ili obrisati (na mobitelima)
– add_filter(‘the_content’, ‘funkcija za filtriranje slika’)
• CSS:
– .post img {max-width:100%;height:auto;}
function slike_u_content() {
global $post;
$html = preg_replace_callback( '#(<imgs[^>]*src)="([^"]+)"#', "callback_img",
get_the_content($post->ID) );
return $html;
}
function callback_img($match) {
list(, $img, $src) = $match;
$url = get_stylesheet_directory_uri().'/img_placeholder.gif';
return "$img="$url" data-href="$src" ";
}

15. Slike u WordPress-u - LakoTuts
• Filtrirati slike prilikom ispisa
– add_filter(‘the_content’, ‘funkcija za filtriranje slika’)
• CSS:
– .post img {max-width:100%;height:auto;}
$attachment_id = lakotuts_get_attachment_id_from_url($header_image);
$image480 = wp_get_attachment_image_src( $attachment_id, 'image480' );
$image768 = wp_get_attachment_image_src( $attachment_id, 'image768' );
$image1024 = wp_get_attachment_image_src( $attachment_id, 'image1024' );
$image1920 = wp_get_attachment_image_src( $attachment_id, 'image1920' );
echo ‘ #masthead { background-image: url(''. $image768[0] .''); } ';
echo '@media (min-width:768px) { #masthead { background-image: url(''. $image768[0] .''); }}';
echo '@media (min-width:1024px) { #masthead { background-image: url(''. $image1024[0] .''); }}';
echo '@media (min-width:1200px) { #masthead { background-image: url(''. $image1920[0] .''); }}';

16. WordPress Mobile
• wp_mobile()
• WURFL baza podataka
• github.com/jcasabona/wp-ress/

17. WordPress Mobile
function wpr_detect_mobile_device(){
try{
$config = new WurflCloud_Client_Config();
$config->api_key = WPR_API_KEY;
$client = new WurflCloud_Client_Client($config);
$client->detectDevice();
return $client->getDeviceCapability('is_wireless_device');
}
catch (Exception $e){
return wp_is_mobile();
}
}
define('WPR_IS_MOBILE', wpr_detect_mobile_device());

18. WordPress Mobile
• Izbornici za Desktop i Mobitele/Tablete
– Izbjegnut dvostruki HTML sadržaj
• Prikaz pojedinog sadržaja samo na zahtjev
– Komentari
– Sidebar

19. Pitanja
?