Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #18898


    So far I love your theme. I’m having a bit of trouble though. I’ve gone through the forums and haven’t really found a clear answer. Maybe you could help.

    1) My featured images in the portfolio are stretched to fill the viewing area of the slideshow container. What do I need to do to keep that from happening so my images are not distorted? Is there some simple CSS? Is there an optimum image size that I should be using? Any help would be appreciated.

    2) Is there anyway to edit the custom CSS from within the WordPress backend. I’ve tried to use a child theme to edit style.css and I’ve tried the same thing with custom.css. That didn’t work. It would be nice to have the ability to edit the CSS without having to FTP into the server. Is there anyway around this or am I stuck with FTP?

    Thanks very much for your help.


    Sorry…one more question…

    3) When the image in the slideshow changes, it is initially shown at it’s original size. This has the effect of only showing a small portion of the image before it gets scaled to fit the container. How to I keep this from happening. It’s very distracting and annoying.

    Thanks again.


    Hi propcellar,

    1) Images for the portfolio should be at least 930px (690px for the no feature size) wide to prevent distortion in the slideshow container. Bigger for the homepage slider size to get the same effect as the demo. For example, here is the initial image used in the demo:×1047.jpg

    2) You can add css to the Quick CSS field in the theme options >Layout & Styling.

    3) I don’t see this happening in the demo or on my local installation. Do you have an example of where this is happening? It sounds like it might be related to not using images that are big enough for the slideshow area.




    Hey Devin,

    Thanks for your quick reply.

    1) We are still in the very early stages of setting up the website so I’ve only got a couple of images in the portfolio. Both images are 1024×1024. Am I going to need multiple copies of the same image in different sizes or is it supposed to scale the one uploaded image to fit any container? I have found that I can change the height: auto instead of 100% and it gets rid of the distortion, but this only works in the 2 column grid view. Any other ideas?

    2) Thanks. I’ll put all my CSS there.

    3) We are currently in Maintenance Mode for now until we get the kinks worked out and the content added. I’ll make it live for you to check out the problem. Here is the link: The image only slightly distorted on this page because the container is almost square. It is even more distorted in the slideshow when “read more” is selected. You’ll also be able to see the strange transition between images.

    Thanks again for the help.



    It all depends what you put as your image size settings in functions.php. You can have specific settings for certain image locations within the theme (portfolio, blog, etc.) and you specify the constraints and whether the image should be cropped or keep its aspect ratio once the constraint width and height are reached. Its always a good idea to upload images that are in a consistent size for certain locations,

    Because if half the images you upload are smaller then the constraints for portfolio images lets say, and the other half are larger then the constraints, the end result is likely to be inferior to one that consistently uses images larger than the constraints.

    3) You are scaling a square into a rectangle, thus causing a distortion. In the functions.php file take a look at this line

    $avia_config['imgSize']['portfolio2'] 	= array('width'=>450, 'height'=>300);		// medium preview pic for 2 column portfolio and small 3d slider

    That is the exact size that the 1200×1200 image scales down to. if you change that into a square shape and continue to upload square images, you will not have an issue. If you don’t want to prep your images then you have to depend on the auto crop abilities of WordPress.




    Hey Nick,

    Thanks for the help. You mention that I can specify settings for image locations and whether or not images are cropped or not. Where and how would I set those settings?

    In your opinion, what would be the easiest way to ensure that our images look good throughout the site without us having to photoshop each image we want to upload?

    Also, any insight into the reason why the image transitions are the way they are? (reference #3 above)

    Thanks again,




    WordPress 3.5 changed the way images are processed. Things got a lot easier. Since now, when you insert the same image into multiple locations , each time you can specify its size at the point you insert it. First of all, as a rule of thumb, you always should upload larger images then you plan on using and never smaller. If the image gets stretched out, it is because the theme expects you to tell it what you want by customizing the css, since one glove can’t fit everyone, so the code has 100% width often in the css which should be changed based on how you want your pages to look, and also 100% is there to let you be aware of how large of a space theoretically you could be working with.

    In your opinion, what would be the easiest way to ensure that our images look good throughout the site without us having to photoshop each image we want to upload?

    You must have rules because if you upload photos of snakes (800width 50 height) and photos of palm trees (50width 800 height), and expect them to reside on the same page and still look good as thumbnails, then you will be disappointed. You need to have a max and min widths and heights. You need to always upload bigger so image shrinks down proportionally. If you don’t crop it yourself, wordpress will happily do it for you without regard for making a nice portrait into a modern art masterpiece. If you tell WordPress to soft crop , it will listen, but that’s when the aspect ratio comes into play (snakes and palm trees)

    You should read my post where i go into detail:

    In your theme, inside function.php file there are constraints (lines 18-34) . Here is where you set the dimensions of images for various locations inside the theme.

    There is also a plugin that you can install, and in your Settings Media folder, all the constraints will appear. You should play around with them. (yes they are frustrating as you can read by the link above to my other post) and once you understand them, its not bad. Just remember that changing constraints doesnt change anything until you upload a new image.




    Thanks Nick!

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Two Questions (Images, Custom CSS)’ is closed to new replies.