Forums

Responsive Image with theme

Permalink
How to add resposive image mapping with theme ?
I've gone through
https://www.concrete5.org/documentation/developers/5.7/designing-for...

Here responsive image means,
same image with different size will be pulled up with different size of screen.
For Example, for mobile device it will pull up low resolution image, for tablet medium and for desktop or ratina display, high resolution image will be pulled up.

How much time it should take to implement responsive image with theme ?

Is there any tutorial available for that ?

Thanks
srjahir32
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi srjahir32,

The documentation page you refer to in your post includes all the information to add responsive image support to a theme.

Are there any particular sections of the documentation page you have questions about?
srjahir32 replied on at Permalink Reply
srjahir32
Yes, In which file I will have to add that code ?
In which it will support in Image block and Content block.
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
- thumbnail types are added in the package controller install() method
- the responsive image mappings go in the theme page_theme.php using the getThemeResponsiveImageMap() method
- you require or provide picturefill.js in the page_theme.php registerAssets() method

The Image block and the Content block both will use responsive images.
srjahir32 replied on at Permalink Reply
srjahir32
Where should I add these code ?

// $file, our file object.
$image = \Core::make('html/image', array($file));
$tag = $image->getTag() ;


I've added getThemeResponsiveImageMap() to page_theme.php and created thumbnail types. But in browser its sill loading same image with same size for different size of screen instead of different size.
srjahir32 replied on at Permalink Reply 1 Attachment
srjahir32
Its working now. Attached Screenshot.