Solved

Drupal Image Styles

Posted on 2013-06-04
8
320 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
Comment Utility
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
Comment Utility
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
Comment Utility
I apologize i misunderstood that this was an interface visitors are using.
0
 
LVL 12

Expert Comment

by:junipllc
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 12

Expert Comment

by:junipllc
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

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 …
Get a first impression of how PRTG looks and learn how it works.   This video is a short introduction to PRTG, as an initial overview or as a quick start for new PRTG users.
This video explains how to create simple products associated to Magento configurable product and offers fast way of their generation with Store Manager for Magento tool.

763 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

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now