images resizing in Omega

If you mean resizing as in responsive theme you'd declare the sizes separately for each width you want to use in css/YOURTHEME-alpha-default-LAYOUTWIDTH.css in your theme (and make sure it's actually named like your theme). So if you wanted to declare the image size for the narrow layout, use YOURTHEME-alpha-default-narrow.css.

If you mean resizing as in image processing (like resizing user uploaded images for thumbnails) that's not actually a theme thing but would be handled by a module (like image styles in D7: /admin/config/media/image-styles).

Does this help you at all?
Cheers, Tina

Hi all - Just started my first couple of sites using Omega and I like. A lot. But I am too having some difficulty figuring out how to get images to scale up and down automatically as the display size changes. I'm sure this is a CSS thing but not sure what the proper syntax is. Can someone give me an example of how this is implemented? Is it (or can it be) handled in the global.css file or do I need to establish the image size in each of the css files (narrow, normal, wide, etc.)? I tried that approach in the narrow.css file and all that happened is the image changed sizes when the display size was reduced however it didn't "transition" to the new size. Just big... or small... nothing in between.

I'm mainly concerned with the logo in the header at this stage but I'd like to address other img elements as well. oh... and while I'm at it, is there a way to use css to scale down the size of a views slideshow slider for use in Omega?

Thanks in advance for any advice...

I haven't figured this out entirely but I have seen an example that looks like it rescales the images within a views slideshow - http://nodeone.se/en I haven't managed to get time to unpick the css & js. It may be easier to find the developers & ask if they have used custom code for it.

I think it is a case of removing the image dimensions from the image & using image{ width:100%;} rule to fit them to the container.

FWIW here is the module I mentioned above, it removes the height from all images processed by Drupal (not sure about inline images) It also add's imgsizer.js from the unstoppable robot ninja 'fluid images' post.

http://dl.dropbox.com/u/59660/sizeless_images.zip
It's less than ideal for mobile because the device still downloads the large version.

I made a typo and forgot it was max-width :)

I just saw there are a few console.logs() in flexisliders js file that should be commented out before putting into production…
http://drupal.org/node/1376826 otherwise it seems good, I just need to test more in IE to make sure the rendering looks good with the scaling.

Cellar Door are you using fluid images or any other JS to pretty up scaled images in IE ?
http://unstoppablerobotninja.com/entry/fluid-images/

Totally agree with you there Paul, a client will have no idea how to add classes to inline images through the IMCE UI. I have seen it first hand, they chuck an image in, it's too big, doesn't float, looks rubbish and then they ask me "why does that look like that?". Umbraco cms used to have a little dropdown in the RTE where you could asign styles i.e. you insert an image and while it's selected, use the little dropdown so a client can select a human readable term like 'inline image'. That was very useful, not seen this yet in drupal. You can assign block formats if you want to add tags around things in the RTE but I've not seen a way to add a class through a dropdown.

The images being optimized have never been an issue for me so far, I mean you can limit how big the upoads are so they don't add camera photos at 4000px x 3000px or anything like that which only need to be displayed at 600px across.

I would definitely like to see a decent way to handle inline images.

Sam.

Maybe it's something that could be integrated with ckeditor? Umbraco used TinyMCE and it was very successful on past projects.

Sam.

Hi jmolivas,

Not with the media module that's for sure! It's a total disaster with Omega theme. Looks great, works bad. IMCE, looks bad, works great!

I use IMCE Wysiwyg API bridge ( http://drupal.org/project/imce_wysiwyg ), Wysiwyg ( http://drupal.org/project/wysiwyg ) and IMCE ( http://drupal.org/project/imce ).

These three combined allow for uploading, inserting from library, uploading and then inserting, anything you want. When you click on the insert image in ckeditor, a little popup appears with 'Image properties'. The bridge means that within that popup, there is a new link called 'browse server', from there you can access IMCE. It's a great combination but you have to manually assign classes to your inline images which is ok for me but not for clients.

Hope this helps.

Sam.

I'm with you Paul. Something like:

In RTE > press insert image button > popup (browse server or upload image) > select image > checkboxes for styles - an 'Inline image left', 'Inline image centre', 'Inline image right' > check required box > Insert > Job done

As I said, umbraco used to handle this with:

in RTE, insert image button > popup (browse server or upload image) > after insert the image is automatically already selected > go to dropdown with styes list > choose 'inline image' style or whatever you've called it and bingo, the required classes are added.

It was quite intuitive and I think this is an RTE issue, nothing to do with the image handling.

I think it's essential to take this away from clients. They should never need to add any code whatsoever even if it is just adding a css class.

Sam.

Is not already implemented, thats why I was mentioning "How about adding file-image formatting when inserting image see image below, in order to set Adaptive Image plus setting break points."

@paul totally agree with you media module is been improved a lot.

@samwillc do you have some screen-shots or mockups about this you mentioned to have a beter idea.

Don't forget that you can create your own file types (Configuration|Media|Image Styles) in the Media module. The options for file type include Crop, Scale, and Crop and Scale.

This is for resizing the images.

1. First of all work out the widest width you will need for your image - i.e. the width the image will be in the 'wide' browser size.

2. Go to admin/config/media/image-styles and create a style which will scale to that width.

3. For that field in your content type under Manage Display set the image field to use that style.

So - when you view that node - it will now display the image using a width which is suitable for the wide layout. We now need to set the CSS so that the image will display at narrower widths for the narrower browser sizes.

1. OK - using Firebug or similar find the CSS selector which points directly at this image - something like:

1. Now - in global.css set the CSS for this image to be suitable for the mobile view - e.g.

Setting the height to 'auto' means the aspect ratio is kept OK.

1. Set the same block in the other CSS files; narrow, normal, and wide. This is because the style cascades up from mobile to the wider styles.

Use this block and choose the width as appropriate.

Voila - should all work fine.

(BTW - the example sizes I've used are for an image which is 12 columns wide in a 16 column wide layout).

Also, the reason I've set the image style is to cover for if a site editor uploads a bonkers large image size - at least the image which is being loaded has been resized down to the largest needed. This should help with loading speeds.