Best module to manage adaptive images with omega

Posted by arrubiu on July 3, 2012 at 11:01am

Hi!
I'm starting to use omega and I want to use some modules to have adaptive images.
Which module do you suggest?

Thanks,
Sergio

Comments

i like this one

Posted by florisg on July 3, 2012 at 12:55pm

There are a few options, i personally like this module for adaptive images:
http://drupal.org/project/cs_adaptive_image

One very important matter to know as a beginner is the power over css that you get from omega:
in example

give a views-row or element in your page grid-4 and it will be 4 rows wide
use .alpha for no left margin within the grid
use .omega for no right margin within the grid

Enjoy

Interesting :) I saw also

Posted by arrubiu on July 3, 2012 at 1:04pm

Interesting :)
I saw also AIS, but it requires apache (and I'm working on nginx on pantheon).
Is there a module that doesn't work client side?

I try to create a view and

Posted by arrubiu on July 3, 2012 at 1:32pm

I try to create a view and apply the "grid-4" class to rows, but I notice that if I apply *only" grid-4 class, the row in not aligned in the grid, and if I try to add .alpha, .omega or both the the row the content is always outside the grid.. What's wrong?

How do you put CS_adaptive_image to work?

Posted by Diane Bryan on August 5, 2012 at 11:31pm

I've been hunting all over and haven't found a tute that explains exactly how the client-side adaptive image module is put to use. Do you mind sharing your knowledge?

It's all in the Readme.txt

Posted by mrpauldriver on August 6, 2012 at 12:04am

It's all in the Readme.txt file of the module.

Have you considered the Adaptive Image module - it really is a lot less hassle.

CS_adaptive_image is a clever little number, but a dog to set up.

@MrPaulDriver

A.T. pre-installed it...

Posted by Diane Bryan on August 6, 2012 at 6:49am

Thanks for the clue! Since Adaptive Themes preinstalled the module I didn't think of finding a README.txt. I'll go download it now for just that purpose!

I really like the concept of client-side, so let's see whether I can handle the instructions.

try both

Posted by florisg on July 3, 2012 at 2:14pm

put in views row class --> alpha grid-4
no dot for its comes into a class="alpha grid-4" tags
in css u can use .alpha or .grid-4 to give borders to all alpha or grid-4 classes

I know that I don't have to

Posted by arrubiu on July 3, 2012 at 2:21pm

I know that I don't have to add dots ;)
I try to add "alpha grid-2" but the first element is aligned to the grid, the second element is not aligned: http://imageshack.us/photo/my-images/36/schermatadel20120703161.png/
As you see, "altra prova" is aligned, "Mare" is not aligned.

Thanks a lot :)

Well you dont want aplha everywhere

Posted by florisg on July 4, 2012 at 6:08am

Due to alpha being on all row classes now your layout get skewed a bit.
Take a look at this module:
http://drupal.org/project/views_column_class

it is designed for exactly this purpose, give row classes to specific element in a grid layout.
Alternatively you could not use alpha in this case and only remove first margin in css with:
.grid-4.views-row-first { margin-left: 0; }
Notice there is no space between the two classes for they have to be valid at the same time

Ok, I create two simple css

Posted by arrubiu on July 5, 2012 at 6:34am

Ok, I create two simple css rules.
I create a custom class that I add to cols views, 'views-omega'.
And than I remove margin-right from views-row-last:

.views-omega {
  margin-left: 0px;
  margin-right: 20px;
}

.views-omega.views-row-last {
  margin-right: 0px;
}

So, If I add some grid-X class on views rows, they are displayed in grid :)

Thank you for pointing out

Posted by Enno on August 7, 2012 at 10:29am

Thank you for pointing out that module. I have always tried to solve that manually so far and his is a big help on adaptive themes.

Possibly Adaptive Images

Posted by vacilando on July 20, 2012 at 11:11pm

Possibly Adaptive Images (http://drupal.org/project/adaptive_image) -- see http://www.covenantdesign.com/blog/drupalcon-cliffs-notes-rethinking-res...

---
Tomáš J. Fülöpp
http://twitter.com/vacilandois

Hopefully a good example:

Posted by florisg on August 6, 2012 at 6:12am

@sergio.durzu the two classes you created are already in omega theme:

no left margin --> .alpha
no right margin --> .omega

@Diane Bryan
to setup cs_adaptive_image:
1) create image_cache settings for each screen you use: under media, image style named: "mobile","narrow","normal","wide"
2) scale the widths to the breakpoints of the theme switcher @media width minus the margins
i.e. mobile = 300px , narrow = 740, normal = 1004, wide = 1200
it is nice to add a focus or autocrop module:
http://drupal.org/project/imagefield_focus or
http://drupal.org/project/epsacrop
so you can set the part of the image you want to show in the result.
3) you need these setup so you can assign the image caches later to the display of the image field
4) add css to fit into smaller regions or the fluid scales between breakpoints:

.adaptive-image {
  width: 100%;
  height: auto;
}

5) create an image field, set cropping values if one of above modules applied
6) set display to adaptive image and define the breaking points and their image styles
7) upload the image to a node with this field.

Max-width

Posted by Diane Bryan on August 6, 2012 at 9:30am

So one does need to "hand-hold" the software as to which version of the image to call upon, but does one only upload the image one time?

Also, I've read that setting max-width at 100% is better than width=100%. Have you tried both?

And did I mention: THANKS!!!

once its set your good to go

Posted by florisg on August 6, 2012 at 11:26am

Once setup the end user just has to upload one image and set its focus,
Imagecache does all the heavy lifting,

I use width: 100%; in css for an image that has to fit within the grid.

For images with their own class that have wrap-around in articles i make another generic class:
for example:

.image-inline {
  max-width: 30%; /* the calculated back equivalent of the desired pixels */
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
}

Upload once - yes!

Posted by Diane Bryan on August 6, 2012 at 8:37pm

The inline image style makes total sense. I do things that way, myself, but I had not yet applied my own suggestion of using max-width there. So glad for the group help.

A really good one

Posted by carajito on August 7, 2012 at 11:00pm

Look I have some weeks testing this module

http://drupal.org/project/resp_img

I think this is a good option and the most drupal native option too at the moment

Good tutorial:
http://modulesunraveled.com/responsive-images?utm_medium=atix&utm_source...

@idevit these modules are impressive
http://drupal.org/project/imagefield_focus and http://drupal.org/project/epsacrop

I will tested

I needed a 4 column row

Posted by coxw on January 10, 2013 at 12:42pm

So i overrode the template. It's not pretty but better than adding a module for this small case.

http://pastebin.com/X0UJKWs6