1

I'm using HB Themes Aegaeus theme and it's great except for the fact that one of the shortcode elements (hb-box) is resizing the images.

(Obviously, automatically resizing site elements to fit a mobile device is one of the main reasons to use responsive design, but in this instance, it makes the image subjects look really, REALLY bad.)

http://www.fullyhr.com/about/

enter image description here

How do I maintain the image size-ratio?

This is the shortcode for the images in question on the page:

[hb_image_box image="http://fullyhr.com/wp-content/uploads/2015/07/headshot_l_amanda.jpg"     link="http://fullyhr.com/portfolio/amanda-mayo-sphr/"
title="Amanda Mayo" subtitle="SPHR, Founder, Sr HR Consultant"]

I have already tried the following custom css solutions:

.custom-hb-box { width: 100% !important; display:block; height: auto !important; }

.custom-hb-box img { height: auto !important; width: 100% !important; }

However, these make the site time out with a "Website Not Available" error.

UPDATE Here is the shortcode from the theme-shortcodes.php file:

function hb_custom_box($atts, $content = null){

extract(shortcode_atts(array(
    'title' =>'Title here', 
    'subtitle' => 'Subtitle here',
    'image' =>'',
    'link' =>'http://'
), $atts));

$image = hb_resize(null, $image, 460, 400, true);
$image = $image['url'];
$output = "
<div>
    <a href='$link' class='custom-hb-box'>
        <img src='$image' rel='Image'>

    <div class='hb-custom-title'>
        <span class='titt'>$title</span>
        <span class='subtitt'>$subtitle</span>
    </div>

    <div class='hb-custom-glare'></div>
    </a>
</div>";

return $output;
}
add_shortcode('hb_image_box', 'hb_custom_box');
0

It's pretty difficult to know what your CSS properties are doing without seeing the related HTML. I would use the max-width property instead of width img{ max-width: 100%; }.

UPDATE: I just noticed you provided a link. The height property is a problem:

.custom-hb-box img {
    display: block;
    height: 100%;
    opacity: 1;
    transition: opacity 0.2s linear 0s;
    width: 100%;
}

Setting '.custom-hb-box img {height: auto; } seems to solve the image issue but you have problems with the text as well.

#main-content-with-sidebar .custom-hb-box {
    height: 205px !important;
    width: 33% !important;
}

Explicit pixel height won't work. It looks like this is being done to compensate for the fact that the images do not have the desired aspect ratio. Resize your images to have a ratio of 211:205, this will match the container element.

Then try

#main-content-with-sidebar .custom-hb-box {
    height: auto;
}

Or just remove the height property in the above rule; it really isn't needed.

  • hmm. I'm trying these suggestions, but am having just some sort of disconnect. Whenever I try to add any custom css, my mobile connection to the webpage completely breaks. I am looking for more info. – Jules Maas Feb 10 '16 at 6:56
  • I can't comment on why CSS changes would break the mobile site. But, I did notice in the update code you posted" $image = hb_resize(null, $image, 460, 400, true);. So, it looks like your will be forced to use the given image ratio. Does your theme support child themes? If it does, you might want to write your own version of that code. – BillK Feb 10 '16 at 8:12
  • Yeah, that's the section that caught my eye, too. nuts. I will look into a child theme and post whether it works out. Thanks! – Jules Maas Feb 10 '16 at 8:16
  • I noticed the your style,css file is minimized. Are you trying to edit the minimized version, or are do you have a readable version that you then minimize after editing? – BillK Feb 10 '16 at 8:29
0

OK. Because of all my comments to BillK's suggestions, I just wanted to provide clarification that I WAS able to fix this issue.

Instead of adding css in the Custom CSS field in Highend Options > General Settings (as suggested by the theme developer), I quit dinking around within WordPress and logged directly into the server to edit the css there.

Here is the server file path:

wp-content > themes > Aegaeus > css > styles.css

Near the bottom is this bit:

#main-content-with-sidebar .custom-hb-box{width:33%!important;height:205px!important}

Change it to this:

#main-content-with-sidebar .custom-hb-box{height:auto;}

and voila! It’s fixed. Thanks, BillK! (Please vote for his answer, it's all there!)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.