Skip to main content ↑ ↓
Topic: Responsive images, the AngularJS way (Read 2320 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Responsive images, the AngularJS way

Ref : https://github.com/WURFL/angular-wurfl-image-tailor

Add ng-app

Code: [Select]
var app = angular.module("demoapp", ["angular-wurfl-image-tailor"]);

Replace

Code: [Select]
<img> your image url</img>

with

Code: [Select]
<img-wit> your image url </img-wit>

Code: [Select]
<img-wit src="http://www.scientiamobile.com/page/wp-content/uploads/2014/06/20140609_133023.jpg" w="200" h="200"> </img-wit>

Replace with a directive and use data binding

Code: [Select]
<img-wit src="http://www.scientiamobile.com/page/wp-content/uploads/2014/06/20140609_133023.jpg" w="{{image_width_desktop}}" h="{{image_width_desktop}}"> </img-wit>

and for mobile devices


Code: [Select]
<img-wit src="http://www.scientiamobile.com/page/wp-content/uploads/2014/06/20140609_133023.jpg" w="{{image_width_mobile}}" h="{{image_width_mobile}}"> </img-wit>

We can input maximum width as a directive according to various screen sizes.
Last Edit: October 21, 2015, 08:10:10 am by Wizard

Re: Responsive images, the AngularJS way

Reply #1 –

In simple words, just like Radu suggested in another thread, change the max-width and max-image as per screen size using data binding in AngularJS.

Re: Responsive images, the AngularJS way

Reply #2 –

I have a thread at adminforum if anyone wants to refer.

Re: Responsive images, the AngularJS way

Reply #3 –

This topic doesn't really belong to the "feature discussion" board, the feature discussion is about discussing features to be introduced in ElkArte, considering ElkArte doesn't include angular, it's impossible to have such a feature, so this may better belong to support or general discussions. ;)

Thanks. :)
Bugs creator.
Features destroyer.
Template killer.

Re: Responsive images, the AngularJS way

Reply #4 –

Sure. :)

Do you like the idea ?

Re: Responsive images, the AngularJS way

Reply #5 –

I have created a module. The code is almost ready. I think we can skip adding <img-wit> BBC code and simply integrate the controller to input various values according to the screen size. Only problem is that we need AngularJS which is not part of core.