php ACF插件+响应背景自定义尺寸图像Word按

Posted 2021-05-04

<?php

/* field used: Flexible Content: https://www.advancedcustomfields.com/resources/flexible-content/ */
add_filter( 'image_size_names_choose', 'cp_custom_sizes' );
function cp_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
'bgimagen320' => __( 'bgimagen320' ),
'bgimagen480' => __( 'bgimagen480' ),
'bgimagen640' => __( 'bgimagen640' ),
'bgimagen768' => __( 'bgimagen768' ),
'bgimagen960' => __( 'bgimagen960' ),
'bgimagen1024' => __( 'bgimagen1024' ),
'bgimagen1280' => __( 'bgimagen1280' ),
) );
}
$crop = false; //if you want the image to stay proportional set this to false
add_image_size( 'bgimagen320', 320, 400, $crop);
add_image_size( 'bgimagen480', 480, 400, $crop);
add_image_size( 'bgimagen640', 640, 400, $crop);
add_image_size( 'bgimagen768', 768, 640, $crop);
add_image_size( 'bgimagen960', 960, 400, $crop);
add_image_size( 'bgimagen1024', 1024, 768, $crop);
add_image_size( 'bgimagen1280', 1280, 768, $crop);
Función que genera el carousel y manda los estilos al footer
$estilos = '';
function setBgImages($postID){
  global $estilos;
  $imagenes = 0;
  $carousel = '';
  if( have_rows('hero_gallery',$postID) ): /* ACF plugin field */
    $carousel = '
    <div class="wrapper" id="wrapper-hero">
      <div id="slide" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">';
        while( have_rows('hero_gallery',$postID) ): the_row();
          $imageID = get_sub_field('hero_images',$postID);
          $content = get_sub_field('hero_main_text',$postID);
          $imagen320 = wp_get_attachment_image_src( $imageID, 'bgimagen320');
          $imagen480 = wp_get_attachment_image_src( $imageID, 'bgimagen480');
          $imagen640 = wp_get_attachment_image_src( $imageID, 'bgimagen640');
          $imagen768 = wp_get_attachment_image_src( $imageID, 'bgimagen768');
          $imagen960 = wp_get_attachment_image_src( $imageID, 'bgimagen960');
          $imagen1024 = wp_get_attachment_image_src( $imageID, 'bgimagen1024');
          $imagen1280 = wp_get_attachment_image_src( $imageID, 'bgimagen1280');
          $clase = ($imagenes == 0) ? 'active' : '';
          $carousel .= '<div class="carousel-item '.$clase.'" id="img'.$imagenes.'">
            <div class="texto text-center">
              <h1 class="display-4">'. get_the_title($postID).'</h1>';
              if( $content ):
                $carousel .= '<div class="lead">'.$content.'</div>';
              endif;
          $carousel .= '</div>';
          $carousel .= '</div>';

          $estilos .='
          <style type="text/css">
            #slide .carousel-item {background-image:url(//via.placeholder.com/1x1?text=ResortsPage1);}
            @media (min-width:320px) {
            #slide #img'.$imagenes.'.carousel-item {background-image:url('.$imagen320[0].');}
            }
            @media (min-width:480px) {
            #slide #img'.$imagenes.'.carousel-item {background-image:url('.$imagen480[0].');}
            }
            @media (min-width:640px) {
            #slide #img'.$imagenes.'.carousel-item {background-image:url('.$imagen640[0].');}
            }
            @media (min-width:768px) {
            #slide #img'.$imagenes.'.carousel-item {background-image:url('.$imagen768[0].');}
            }

            @media (min-width:960px) {
            #slide #img'.$imagenes.'.carousel-item {background-image:url('.$imagen960[0].');}
            }
            @media (min-width:1024px) {
            #slide #img'.$imagenes.'.carousel-item {background-image:url('.$imagen1024[0].');}
            }
            @media (min-width:1280px) {
            #slide #img'.$imagenes.'.carousel-item {background-image:url('.$imagen1280[0].');}
            }
          </style>';
          $imagenes++;
        endwhile;
        $carousel .= '</div></div></div><script>jQuery( ".carousel-item" ).first().addClass( "active" );</script> ';
      endif;
      echo $carousel;
};

function child_theme_footer_script($estilos) {
  global $estilos;
  echo $estilos;
}
add_action('wp_footer', 'child_theme_footer_script');
?>