WordPress.org

Ready to get started?Download WordPress

Forums

Custom Header Images
[resolved] Responsive images for mobile? (8 posts)

  1. jpphoto
    Member
    Posted 1 year ago #

    I was wondering if this plugin could somehow have the header images be responsive to be served smaller for mobile devices. Thanks for any help!

    Jim

    http://wordpress.org/extend/plugins/custom-header-images/

  2. Blackbam
    Member
    Plugin Author

    Posted 1 year ago #

    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?

  3. jpphoto
    Member
    Posted 1 year ago #

    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?

  4. Blackbam
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  5. Blackbam
    Member
    Plugin Author

    Posted 1 year ago #

    Resolved?!

  6. jacobstone
    Member
    Posted 11 months ago #

    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!

  7. Blackbam
    Member
    Plugin Author

    Posted 11 months ago #

    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...

  8. jacobstone
    Member
    Posted 11 months ago #

    Thanks!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic