Support » Plugin: Custom Header Images » Responsive images for mobile?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Blackbam

    (@blackbam)

    Hello Jim

    yes it can, but you are responsible that this works properly for your site. In v1.1 I have implemented the “custom output” function, which you will see at the bottom of the settings page.

    1. Activate the custom output by checking the checkbox

    2. Customize the output to your needs, so that it will be responsible (maybe you have to add some custom CSS to the stylesheet of your theme)

    Does this help you?

    Yes, it makes sense. I am not a programmer, so it may take me awhile to figure out the custom output along with the custom CSS. 🙂

    Will using the custom output still allow for me to use different header images for different pages?

    Plugin Author Blackbam

    (@blackbam)

    Of course it will, because this is the purpose of this Plugin.

    1. Be sure that to use all of the “tags” for the custom output correctly

    2. You may use one of these possibilities:

    a) Use the images as background property in CSS (but this will cut the images on smaller screens, so it is probably not the right solution)

    b) Use automatic height and scale the image with CSS in percent (like width:100%; – this might work, but you have to test it

    c) You maybe want to use javascript, to scale the header image proportionally

    A simple example in JQuery Pseudo-Code:

    var image_width=960;
    var image_height=280;
    if(screen_size<image_width) {
    
    var new_width = screen_size;
    var new_height = image_height * (screen_size / image_width);
    
    $('#header_image').css('width',new_width+'px').css('height','new_height+'px');
    
    }

    Hope the question is answered now, please re-open if it is not clear yet.

    Plugin Author Blackbam

    (@blackbam)

    Resolved?!

    Hey there,

    I’m wondering the same thing – how I can get my header images sizing automatically in a responsive environment.

    I’m unclear about how the “custom output” section works in the plugin. Does that replace this:

    <div class="chi_display_header" data-link="" style="height:400px; width:960px; background-image:url('image.jpg');"></div>

    What are the naming and syntax conventions for using the custom output box? Thank you!

    Plugin Author Blackbam

    (@blackbam)

    Hello first of all – yes, it replaces the code you have pasted.

    About the naming and syntax conventions – you can use the following properties:

    [image_url] … String: The header image URL
    [link] … String: The header image Link (only if linked header images are used)
    [width] … The header image defined width (… from the settings page)
    [height] … The header image defined height (… from the settings page)

    Beside of this: Use any HTML, CSS, or Javascript (no PHP) – which should be sufficient for every styling purpose. The code output is just like this – just like you write it down with the fields in square brackets being replaced.

    An example for responsive styling:

    1. Do not use [height] and [width] but write style=”width:100%” – the browsers will scale the image dynamically.

    2. Use CSS media queries – do not use [height] and [width] but define the width and height for different resolutions in your CSS-File.

    3. Use Javascript: Detect current resolution / div height and scale the image (with some library, etc. )…

    There are still much more…

    Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Responsive images for mobile?’ is closed to new replies.