Make responsive slideshows in WordPress

This plugin converts a WordPress built in image gallery  into  responsive slideshow. It uses the FlexSlider jQuery image slider, and requires no configuration from the user.

You can customize the look of the slideshow by coping it’s CSS file (gallery-to-slideshow.css) in to your theme. That way you will not loose your customized looks when updating the plugin in the future.

Responsive Slideshows: Gallery to Slideshow

Download

Make videos in WordPress responsive

Make your videos in Wordpress responsive using the FitVids jQuery plugin for WordPress

Responsive Video content : FitVids for WordPress plugin

Download

Blissful Interfaces - web design development

Method 1:

The CSS

Add the following code to your CSS file. That will make the images scalable according to screen size.

Removing automatic height and width in WordPress <img> tags

Now drag the window to see the image scaling in action. You’ll notice that the images in your WordPress blog scale weirdly. They horizontal scaling fine but vertical scaling in WordPress images are all wrong.
To make the images resizable proportionately in WordPress, We have to remove the automatic width and height values WordPress add for < img > tags.

As an example, We have to change this:

To This:

For the images that are in a post or a static page/template page, all you have to do is, add the above CSS to the style.css file, and then remove the ‘width’ and ‘height’ properties from the < img > tag in your WordPress editor. That’s it!
But for the image that are displayed dynamically by WordPress, such as post thumbnails, the width and height needs to be removed dynamically using a function.

Add the following function to your functions.php file.

Then when you call for those post thumbnail images in you template.php page, replace,

With This:

That’s it. Drag and resize the browser to see your responsive WordPress images in action! Here’s a demo.

Method 2:

The above will not work for some themes.
If you are one of the few that  it did not work, you can still get your image issue solved using below function.

Add the following function to your functions.php file.

This removes inline width and height attributes from images retrieved with 

,
and prevents those attributes from being added to new images added to the editor.

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );  
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 ); 
function remove_thumbnail_dimensions( $html ) {     
$html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );    
return $html; }

Blissful Interfaces - web design development

A responsive design means a layout that responds well to different screen sizes. Such as iPad, tablets, Smart Phones and Desktop. This tutorial explains what it takes to make your existing Wordpress theme responsive in a few simple steps.

What you should already know:
1. How to build a wordpress theme
2. CSS knowledge

In this tutorial we are going to make a child theme and use CSS media queries to make it work properly in multiple screen sizes.

1. In the wordpress ‘themes’ folder, Create a new folder and name it ‘multiplescreen’.

2. Create a CSS file and save it as ‘style.css’ in the ‘multiplescreen’ folder.
A ‘style.css’ is the only required file for a child theme. Add the following code to the newy created ‘style.css’  file.
Importent: Let’s assume your existing theme is called ‘mynormalWPtheme’. Replace the ‘mynormalWPtheme‘ with your themes name.

As with any WordPress theme, the information header must be at the top of the CSS file. The only difference is that, in a child theme the Template: line is required, so that WordPress knows which theme is the parent of this child theme.

Now we have to call our parent WordPress stylesheet styles in to the child theme. Add the following code to do so. @import url.. calls the parent theme’s CSS to the child theme’s CSS.

To see if the child theme is working, lets change the H1 titles of the child theme to orange. replace the above code with following:

Importent: Make sure no styles appear above @import url.. That prevent your child stylesheet from importing the parent styles.

Log in to the WordpPress admin, Activate mynormalWPtheme Child in the Appearence –> Themes. Now check your wordpress site in a browser. You should see a exact copy of your parent theme with orange h1 titles.

Now we need to define what are the media screen sizes we will be designing for. I have categorized them to 3.

1. SmartPhones- less than 320px
2. Tablets – 321px to 768px
3. Descktop – 769px and above

Save the CSS file. To test these media queries, simply open your site in a browser and drag and resize the window. You will see the h1 color change when browser window size change.
You can also test it through Dreamweaver CS5 multiscreen option (Multiscreen Preview button in the Document toolbar).
Next, you can add media specific styles to override specific parent templates styles. As an example, the top navigation which is horizontal in desktop, could be made to be vertical in the smartphones. Remember to remove the h1 styles we added for testing purposes.

This is how this web site looks on multiple media screens.

Blissful Interfaces - web design development