• Resolved GregHP

    (@greghp)


    Hi,

    thanks for your great plugin!

    A question please, is it possible the plugin works like is “background-image” ?

    Because i’ll try it on footer background image but it breakes wigdet, words,

    You can guide me the way to customises it, works it?

    and if i want to adds in template :

    <?php echo do_shortcode(‘[mpress_image_refresh attachment=”5725, 5727″]’); ?>

    right?

    thanks!

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author Micah Wood

    (@wpscholar)

    @greghp Yes, that is the way to add the shortcode to a theme template.

    As far as using the image as a background image, that isn’t an option and likely won’t be in the future. However, you may find this article helpful: https://css-tricks.com/on-object-fit-and-object-position/

    Thread Starter GregHP

    (@greghp)

    thanks for your answer..

    hum, difficult to understand your link and adds to your plugin.

    another way ?

    Plugin Author Micah Wood

    (@wpscholar)

    @greghp I’m not entirely sure what your specific use case is. Can you point me to a URL where things are breaking?

    Thread Starter GregHP

    (@greghp)

    Hi Micah,

    Yes thanks : https://sebastien-dev-rcconcept.pf2.wpserveur.net/

    i would like used background image on footer, but image is on the top widget…

    have a nice day

    Plugin Author Micah Wood

    (@wpscholar)

    @greghp It looks like you’ve got some invalid HTML markup.

    Take a look at #23 here: https://validator.w3.org/nu/?doc=https%3A%2F%2Fsebastien-dev-rcconcept.pf2.wpserveur.net%2Fen%2Fen-rc-concept%2F

    The opening footer div doesn’t have a > symbol before the figure tag from the shortcode is output. This could be because the code to output the shortcode was placed in the opening tag for the footer.

    Thread Starter GregHP

    (@greghp)

    Hi Micah,

    you are very cool to help me!

    this is the code footer and i’ll check this but it’s the same way..

    <div id=”footer-outer” <?php echo do_shortcode(‘[mpress_image_refresh attachment=”5725, 5727″]’); ?> <?php echo ( $footer_reveal != ‘1’ ) ? ‘data-midnight=”light”‘ : ”; ?> data-cols=”<?php echo esc_attr( $footer_columns ); ?>” data-custom-color=”<?php echo esc_attr( $footer_custom_color ); ?>” data-disable-copyright=”<?php echo esc_attr( $disable_footer_copyright ); ?>” data-matching-section-color=”<?php echo esc_attr( $matching_footer_color ); ?>” data-copyright-line=”<?php echo esc_attr( $copyright_line ); ?>” data-using-bg-img=”<?php echo esc_attr( $using_footer_bg_img ); ?>” data-bg-img-overlay=”<?php echo esc_attr( $footer_bg_image_overlay ); ?>” data-full-width=”<?php echo esc_attr( $footer_full_width ); ?>” data-using-widget-area=”<?php echo esc_attr( $using_footer_widget_area ); ?>” <?php echo $footer_bg_image_markup; // WPCS: XSS ok. ?>>

    <?php

    get_template_part( ‘includes/partials/footer/call-to-action’ );
    get_template_part( ‘includes/partials/footer/main-widgets’ );
    get_template_part( ‘includes/partials/footer/copyright-bar’ );

    ?>

    </div><!–/footer-outer–>

    Plugin Author Micah Wood

    (@wpscholar)

    @greghp So here is what you should do:

    1. Remove the <?php echo do_shortcode(‘[mpress_image_refresh attachment=”5725, 5727″]’); ?> code.
    2. Move that line of code into one of the following locations:
    – Before the <div id="footer-outer"
    – Before the <?php tag containing the get_template_part references.

    • This reply was modified 6 years ago by Micah Wood.
    • This reply was modified 6 years ago by Micah Wood.
    • This reply was modified 6 years ago by Micah Wood.
    Thread Starter GregHP

    (@greghp)

    Hi Micah,

    Like this : but it’s the same way..damn, i’m affraid it doesn’t works in fact, image is before footer..

    <?php echo do_shortcode(‘[mpress_image_refresh attachment=”5725, 5727″]’); ?>
    <div id=”footer-outer” <?php echo ( $footer_reveal != ‘1’ ) ? ‘data-midnight=”light”‘ : ”; ?> data-cols=”<?php echo esc_attr( $footer_columns ); ?>” data-custom-color=”<?php echo esc_attr( $footer_custom_color ); ?>” data-disable-copyright=”<?php echo esc_attr( $disable_footer_copyright ); ?>” data-matching-section-color=”<?php echo esc_attr( $matching_footer_color ); ?>” data-copyright-line=”<?php echo esc_attr( $copyright_line ); ?>” data-using-bg-img=”<?php echo esc_attr( $using_footer_bg_img ); ?>” data-bg-img-overlay=”<?php echo esc_attr( $footer_bg_image_overlay ); ?>” data-full-width=”<?php echo esc_attr( $footer_full_width ); ?>” data-using-widget-area=”<?php echo esc_attr( $using_footer_widget_area ); ?>” <?php echo $footer_bg_image_markup; // WPCS: XSS ok. ?>>

    <?php

    get_template_part( ‘includes/partials/footer/call-to-action’ );

    get_template_part( ‘includes/partials/footer/main-widgets’ );

    get_template_part( ‘includes/partials/footer/copyright-bar’ );

    ?>

    </div><!–/footer-outer–>

    <?php

    get_template_part( ‘includes/partials/footer/off-canvas-navigation’ );

    ?>

    Plugin Author Micah Wood

    (@wpscholar)

    @greghp

    I’m assuming you want to show the image full-width at the top of the footer?

    Move the shortcode down so it is right before the <?php get_template_part... code.

    Add a class attribute to the shortcode, like so: [mpress_image_refresh attachment=”5725, 5727″ class="footer-image"]

    In your CSS, add these rules:

    `
    #footer-outer figure {
    margin: 0;
    }

    .footer-image {
    width: 100%;
    margin: 0 0 -8px 0;
    }
    `

    Thread Starter GregHP

    (@greghp)

    Hi micah,

    difficult to explain! i’ll try to have an image background with your plugin on footer like this :

    https://sebastien-dev-rcconcept.pf2.wpserveur.net/wp-content/uploads/2019/03/Sans-titre-1.jpg

    really thanks!

    Plugin Author Micah Wood

    (@wpscholar)

    @greghp

    Ah, then you’ll need to place this just inside the <div id="footer-widgets"> tag (which is probably located in the includes/partials/footer/main-widgets.php file):

    <?php echo do_shortcode('[mpress_image_refresh attachment=”5725, 5727″ class="footer-image"]'); ?>

    Then add this to your Additional CSS section in the theme customizer (or your theme’s style.css file):

    
    #footer-widgets { position: relative; }
    #footer-widgets figure { margin: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
    #footer widgets .widget { background: #000; padding: 1em; }
    .footer-image { width: 100%; height: 100%; object-fit: cover; }
    

    That should make it look like what you want.

    Thread Starter GregHP

    (@greghp)

    Damn, no way is it the same things…

    sorry for your patience and your fast answer!

    maybee your plugin have the features “background image” a one day or last update!!

    very thanks for your time to help me!!!

    have a nice day

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘image background’ is closed to new replies.