Solved

Drupal Image Styles

Posted on 2013-06-04
8
331 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
Problems using Powershell and Active Directory?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

 
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

ScreenConnect 6.0 Free Trial

Explore all the enhancements in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Redirect a string with Redirect module? 3 90
Can't Select Data Selector Option? 2 87
Grab Node ID from URL of Current Page? 6 122
CTools CSS Cache Error 1 102
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 …
This Micro Tutorial demonstrates using Microsoft Excel pivot tables, how to reverse engineer competitors' marketing strategies through backlinks.
Windows 10 is mostly good. However the one thing that annoys me is how many clicks you have to do to dial a VPN connection. You have to go to settings from the start menu, (2 clicks), Network and Internet (1 click), Click VPN (another click) then fi…

770 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