?
Solved

Drupal Image Styles

Posted on 2013-06-04
8
Medium Priority
?
362 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
  • 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
New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

 
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 2000 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: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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

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…
In the below post we have mentioned the best hosting type for startups. Also, check out some of the superlative web hosting companies that are proposing affordable web hosting solutions to host your startup website.
this video summaries big data hadoop online training demo (http://onlineitguru.com/big-data-hadoop-online-training-placement.html) , and covers basics in big data hadoop .
Despite its rising prevalence in the business world, "the cloud" is still misunderstood. Some companies still believe common misconceptions about lack of security in cloud solutions and many misuses of cloud storage options still occur every day. …
Suggested Courses

840 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