Change images size

WPJobBoard works with images. It is better to see the logo of the company that offers a job or face of a person you may want to hire. But in some cases, you may want different than the default size of image.

It is achievable but will require some basic HTML and CSS skills, as we will provide everything you need to know about PHP.

If you do not know how to add snippets properly, take a look at our documentation file, where we explained how you can do this.

Code Snippet – for company logo

This code will allow you to change size of image for company logo on single job page and jobs list

add_filter('wpjb_scheme', 'my_wpjb_company_logo');
// Be sure that second param of filter and function name are matching!
function my_wpjb_company_logo($scheme) {
    // name of the second function need to match value!
    $scheme["field"]["company_logo"]["render_callback"] = "resize_image_for_company";
    return $scheme;
}

function resize_image_for_company( $company ) {

?>

    <?php if( get_post_type() == "job"): ?>
        <div class="wpjb_single_job_company_logo">
            <img src="<?php echo $company->getLogoUrl("500x500") ?>" alt="" />
        </div>
    <?php else: ?>
        <div class="wpjb_jobs_list_company_logo">
            <img src="<?php echo $company->getLogoUrl("50x50") ?>" alt="" />
        </div>
    <?php endif; ?>

<?php
}

In place of 500×500 or 50×50, you can put any values you want in this format. Numbers are pixels, so 50×50 mean that image you will see will have 50px width and 50px height. You can experiment with this, but if uploaded images are squares and you will put here rectangular size (like 150×50) images can be distorted or cropped.

We mentioned that you will need to know something about HTML and CSS. Code we provided will resize images and show them in the correct place, but sometimes to make things right, you may need to put some additional CSS and this depends on o your theme, so we can’t provide ready code for this. In the example, you can see classes, and you can use it for your formatting.

By default on jobs list div looks like this:

<div class=”wpjb-img-50″>

in single job page we do not have anything additional.

Code snippet – resume image

In case of resume image we have a similar situation and similar code:

add_filter('wpjb_scheme', 'my_wpjb_resume_image');
// Be sure that second param of filter and function name are matching!
function my_wpjb_resume_image($scheme) {
    // name of the second function need to match value!
    $scheme["field"]["image"]["render_callback"] = "resize_image_for_candidate";
    return $scheme;
}

function resize_image_for_candidate( $resume ) {

?>
    <?php if( get_post_type() == "resume"): ?>
        <div class="wpjb_single_resume_image">
            <img src="<?php echo $resume->getAvatarUrl(50x50) ?>" alt="" />
        </div>
    <?php else: ?>
        <div class="wpjb_resume_list_image">
            <img src="<?php echo $resume->getAvatarUrl(64x64) ?>" alt="" />
        </div>
    <?php endif; ?>
<?php
}

Like in previous example you can put any other value in place of 50×50 or 64×64.

Also, by default image on job list is surrounded by div:

<div class=”wpjb-img-50″>

Where on the single job page, we do not have anything additional.

Leave a Reply

Your email address will not be published. Required fields are marked *