Solved

Drupal Image Styles

Posted on 2013-06-04
8
341 Views
Last Modified: 2013-06-18
Hello,

I incorporated a custom blog into my site, the custom blog provided by the Theme developer. See http://www.amcindustriesdev.com/blog. Note the 2nd post with the large distorted picture of Lincoln.

The original image that I applied is attached. Note the size is 402 x 402.

I did not want it like that.

The theme developer told me to go to http://www.amcindustriesdev.com/admin/config/media/image-styles. I believe the image style is blog_teaser. See other image attached.

Note this says that an image is cropped & scaled to 700 x 320. The actual image on the site is approx 942 x 429.

None of this makes sense. How can I make it fit the layout nicely without stretching & cropping?

What am I missing?
Abraham-Lincoln.jpg
blog-teaser.jpg
0
Comment
Question by:Richard Korts
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
8 Comments
 
LVL 23

Expert Comment

by:tailoreddigital
ID: 39220452
The proportions are all messed up.

You could resize and adjust the image in Photoshop or another graphic editor.

i.e,
942x429
0
 

Author Comment

by:Richard Korts
ID: 39220474
Yes, I understand that. What I'm getting at is that a blogger on the site will upload any photo they choose. The bloggers are NOT web developers with internet savvy; just regular folks, they will NOT know that it's going to distort it.
0
 
LVL 23

Expert Comment

by:tailoreddigital
ID: 39220551
I apologize i misunderstood that this was an interface visitors are using.
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 12

Expert Comment

by:junipllc
ID: 39221035
The image styles function of Drupal is used to automatically resize images to specific sizes/proportions (among other cool image manipulations). Since we are talking about size here, I'll focus on that.

What exactly are you trying to accomplish? For example, are you trying to fit the image into a specific space on the site?

The two main resizing effects are Scale and Scale&Crop. The Scale effect allows you to specify only one dimension, such as "560px wide," which will result in an image 560 wide and a height that is proportional to that. That is, no stretching.

The Scale & Crop will scale the image first, then crop it to a specified dimension. That is what is happening with the square image - it is being resized first, then cropped to 402x402.

It's difficult to explain it all here so you can watch a really informative "overview" Lynda.com video about it here:

http://www.youtube.com/watch?v=sP13afNRpjE

If you have any questions about it, please let us know and we'll try to help.

Cheers,

Mike
0
 
LVL 12

Expert Comment

by:junipllc
ID: 39221037
Side note: typically when I create a blog in Drupal I use the Image Styles to create a standard size, which is usually a standard width. I use the Scale effect to do it. That way, the height will automatically adjust to match the proportions of the original image, but the layout won't break due to an overly-wide image.

Mike
0
 

Author Comment

by:Richard Korts
ID: 39222556
To junipllc

That helps a lot.

However, I don't understand how it winds up with an image that is 940 wide by 431. Does it stretch to the actual content width?

I need to document how this works for NON technical types; What I am thinking would be best is to pick a standard size (like maybe 300 wide by 225 high; maybe something else; then make it treat it like image align left, hspace=8.

Like I did for the other blog test about the Calif. Fires.
0
 

Author Comment

by:Richard Korts
ID: 39254784
I am going to delete this question, as no workable response has been received. If you have an issue with that, please explain.
0
 
LVL 12

Accepted Solution

by:
junipllc earned 500 total points
ID: 39257297
If you specify that an image can be stretched (scaled up) in size then it will do that. However, in order for this to work properly, using the scale&crop or scale, the original image should be bigger than the final size. Otherwise you end up with pixelation and other unpleasantness.

If you supply one value (width or height, not both) then the image will scale down, but retain aspect ratio. No stretching, just resizing. If you supply both a width and a height, the system will stretch the image into the space you are requesting, resulting in an altered aspect ratio, and a distorted image.

As far as image align left, hspace=8 you would need to use CSS for that, as it's out of the scope of the Image Styles system. Using hspace, however, has been deprecated in favor of CSS, so you would want to use:

float:left;
margin-right: 8px;

Open in new window

You, as the site designer/developer, have complete control over the resizing and cropping. The end user will never have to see that, although they may need to know that the original image can not be too small.

I hope this helps at least a little, and that I'm answering the right question. If not, then I may not be clear on your question.

Cheers,

Mike
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article is for those that are having major problems with users upload files such as pictures to their profile. The solution is simple and has to do with correcting the directory paths. With some experimenting and testing i got it fixed. Note…
RTL (right to left) web applications aiming for audiences speaking languages like Hebrew or Arabic, are generally more complicated than the same applications aiming for audiences speaking Latin based languages. The main difference lies of course …
In an interesting question (https://www.experts-exchange.com/questions/29008360/) here at Experts Exchange, a member asked how to split a single image into multiple images. The primary usage for this is to place many photographs on a flatbed scanner…
Are you ready to implement Active Directory best practices without reading 300+ pages? You're in luck. In this webinar hosted by Skyport Systems, you gain insight into Microsoft's latest comprehensive guide, with tips on the best and easiest way…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question