Как обрезать фотографии с acf?

Ссылка скопирована
GitHub PHP Swiper Изображения Слайдер Фотографии
1 ответ

Здравствуйте! Хочу обрезать фотографии с поля галерея, как это сделать? дело в том что у меня там слайдер с миниатюрами, мне надо в одном вытаскивать в разных размерах.
Было так и всё было окей, но из за больших размеров фото разругались сеошники, просят сразу уменьшенную версию

<?php if( have_rows('portfolio') ):     // loop through the rows of data     while ( have_rows('portfolio') ) : the_row();    		$kvadrat = get_sub_field('kvadrat'); 		$czena_za_rabotu = get_sub_field('czena_za_rabotu'); 		$mestopolozhenie = get_sub_field('mestopolozhenie');  							         $images = get_sub_field('raboty'); 						 							?>                        	  <div class="grid__item">                                 <div class="work-slider">                                     <div class="work-slider-main swiper">                                         <div class="swiper-wrapper">       					<?  if( $images ): ?>         <?php foreach( $images as $image ): ?> 						                                             <div class="swiper-slide work-slide">                                                 <div class="work-slide__img"> <img src="<?php echo $image; ?>" alt="" />                                                 </div>                                                 <div class="work-slide__info">                                                     <p class="work-slide__text work-slide__text--square"><? echo $kvadrat;?></p>                                                     <p class="work-slide__text work-slide__text--calendar"><? echo $czena_za_rabotu;?></p>                                                     <p class="work-slide__text work-slide__text--pin"><? echo $mestopolozhenie;?></p>                                                 </div>                                             </div>                <?php endforeach; endif;?>                                                                              </div>                                         <div class="work-slider__button work-slider__button--prev"></div>                                         <div class="work-slider__button work-slider__button--next"></div>                                     </div>                                     <div class="work-slider-nav swiper">                                         <div class="swiper-wrapper"> 															<?  if( $images ): ?>         <?php foreach( $images as $image ): ?>                                                                                               <div class="swiper-slide work-slide work-slide--nav">                                                 <div class="work-slide__img">                                               <img src="<?php echo $image; ?>" alt="" /> </div>                                             </div>                <?php endforeach; endif;?>                                                                                 </div>                                     </div>                                 </div>                             </div> 							        <?php endwhile; endif; ?>

<?php if( have_rows('portfolio') ): // loop through the rows of data while ( have_rows('portfolio') ) : the_row(); $kvadrat = get_sub_field('kvadrat'); $czena_za_rabotu = get_sub_field('czena_za_rabotu'); $mestopolozhenie = get_sub_field('mestopolozhenie'); $images = get_sub_field('raboty'); ?> <div class="grid__item"> <div class="work-slider"> <div class="work-slider-main swiper"> <div class="swiper-wrapper"> <? if( $images ): ?> <?php foreach( $images as $image ): ?> <div class="swiper-slide work-slide"> <div class="work-slide__img"> <img src="<?php echo $image; ?>" alt="" /> </div> <div class="work-slide__info"> <p class="work-slide__text work-slide__text--square"><? echo $kvadrat;?></p> <p class="work-slide__text work-slide__text--calendar"><? echo $czena_za_rabotu;?></p> <p class="work-slide__text work-slide__text--pin"><? echo $mestopolozhenie;?></p> </div> </div> <?php endforeach; endif;?> </div> <div class="work-slider__button work-slider__button--prev"></div> <div class="work-slider__button work-slider__button--next"></div> </div> <div class="work-slider-nav swiper"> <div class="swiper-wrapper"> <? if( $images ): ?> <?php foreach( $images as $image ): ?> <div class="swiper-slide work-slide work-slide--nav"> <div class="work-slide__img"> <img src="<?php echo $image; ?>" alt="" /> </div> </div> <?php endforeach; endif;?> </div> </div> </div> </div> <?php endwhile; endif; ?>

Делаю так, но упорно не видит картинку

<?php if( have_rows('portfolio') ):     // loop through the rows of data     while ( have_rows('portfolio') ) : the_row();    		$kvadrat = get_sub_field('kvadrat'); 		$czena_za_rabotu = get_sub_field('czena_za_rabotu'); 		$mestopolozhenie = get_sub_field('mestopolozhenie');  							         $images = get_sub_field('raboty'); 		  $size = 'galery';   $thumb = $images['sizes'][ $size ];				 							?>                        	  <div class="grid__item">                                 <div class="work-slider">                                     <div class="work-slider-main swiper">                                         <div class="swiper-wrapper">       					<?  if( $images ): ?>         <?php foreach( $images as $image ): ?> 						                                             <div class="swiper-slide work-slide">                                                 <div class="work-slide__img"> <img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />                                                 </div>                                                 <div class="work-slide__info">                                                     <p class="work-slide__text work-slide__text--square"><? echo $kvadrat;?></p>                                                     <p class="work-slide__text work-slide__text--calendar"><? echo $czena_za_rabotu;?></p>                                                     <p class="work-slide__text work-slide__text--pin"><? echo $mestopolozhenie;?></p>                                                 </div>                                             </div>                <?php endforeach; endif;?>                                                                              </div>                                         <div class="work-slider__button work-slider__button--prev"></div>                                         <div class="work-slider__button work-slider__button--next"></div>                                     </div>                                     <div class="work-slider-nav swiper">                                         <div class="swiper-wrapper"> 															<?  if( $images ): ?>         <?php foreach( $images as $image ): ?>                                                                                               <div class="swiper-slide work-slide work-slide--nav">                                                 <div class="work-slide__img">                                               <img src="<?php echo $image; ?>" alt="" /> </div>                                             </div>                <?php endforeach; endif;?>                                                                                 </div>                                     </div>                                 </div>                             </div> 							        <?php endwhile; endif; ?>

<?php if( have_rows('portfolio') ): // loop through the rows of data while ( have_rows('portfolio') ) : the_row(); $kvadrat = get_sub_field('kvadrat'); $czena_za_rabotu = get_sub_field('czena_za_rabotu'); $mestopolozhenie = get_sub_field('mestopolozhenie'); $images = get_sub_field('raboty'); $size = 'galery'; $thumb = $images['sizes'][ $size ]; ?> <div class="grid__item"> <div class="work-slider"> <div class="work-slider-main swiper"> <div class="swiper-wrapper"> <? if( $images ): ?> <?php foreach( $images as $image ): ?> <div class="swiper-slide work-slide"> <div class="work-slide__img"> <img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($image['alt']); ?>" /> </div> <div class="work-slide__info"> <p class="work-slide__text work-slide__text--square"><? echo $kvadrat;?></p> <p class="work-slide__text work-slide__text--calendar"><? echo $czena_za_rabotu;?></p> <p class="work-slide__text work-slide__text--pin"><? echo $mestopolozhenie;?></p> </div> </div> <?php endforeach; endif;?> </div> <div class="work-slider__button work-slider__button--prev"></div> <div class="work-slider__button work-slider__button--next"></div> </div> <div class="work-slider-nav swiper"> <div class="swiper-wrapper"> <? if( $images ): ?> <?php foreach( $images as $image ): ?> <div class="swiper-slide work-slide work-slide--nav"> <div class="work-slide__img"> <img src="<?php echo $image; ?>" alt="" /> </div> </div> <?php endforeach; endif;?> </div> </div> </div> </div> <?php endwhile; endif; ?>

добавил это 

$size = 'galery';   $thumb = $images['sizes'][ $size ];

$size = 'galery'; $thumb = $images['sizes'][ $size ];

и пытаюсь вывести так

<img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />

<img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />

Дополнительно:

Как обрезать фотографии с acf?

Судя по верхнему коду в поле хранится прямой путь к изображению, соответственно никакого массива данных там нет, и то, что выводите - фигня. Для того, что бы заработало надо или изменить данные сохраняемые в поле на ID или массив.
Тогда заработает этот пример https://www.advancedcustomfields.com/resources/gal... для ID и следующий для Массива

Или, как вариант, что бы выйти из ситуации когда хранится url - подключить вот это https://github.com/bfintal/bfi_thumb

И

<!--  это -->  <img src="<?php echo $image; ?>" alt="" />  <!--  заменить на это -->  <img src="<?php echo bfi_thumb( $image,  [  'width' => 400, 'height' => 300 ] ); ?>" alt="" />

<!-- это --> <img src="<?php echo $image; ?>" alt="" /> <!-- заменить на это --> <img src="<?php echo bfi_thumb( $image, [ 'width' => 400, 'height' => 300 ] ); ?>" alt="" />

где
'width' => 400, 'height' => 300
нужные размеры изображения

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Роман IT Ответ

Если ACF-галерея возвращает URL изображений, Вы не сможете нормально брать разные размеры. Для обрезки и вывода миниатюр нужно, чтобы поле ACF возвращало ID изображения или массив изображения. Тогда можно использовать стандартные размеры WordPress и wp_get_attachment_image().

В настройках поля ACF Gallery поставьте Return Format: Image ID или Image Array. Затем зарегистрируйте нужные размеры:

add_action('after_setup_theme', function () {
    add_image_size('work_slider_large', 900, 600, true);
    add_image_size('work_slider_thumb', 180, 120, true);
});

add_action('after_setup_theme', function () { add_image_size('work_slider_large', 900, 600, true); add_image_size('work_slider_thumb', 180, 120, true); });

После этого выводите разные размеры:

$images = get_sub_field('raboty');
 
if ($images) {
    foreach ($images as $image_id) {
        echo '<div class="swiper-slide work-slide">';
        echo wp_get_attachment_image($image_id, 'work_slider_large', false, [
            'class' => 'work-slide__img',
            'loading' => 'lazy',
        ]);
        echo '</div>';
    }
}

$images = get_sub_field('raboty'); if ($images) { foreach ($images as $image_id) { echo '<div class="swiper-slide work-slide">'; echo wp_get_attachment_image($image_id, 'work_slider_large', false, [ 'class' => 'work-slide__img', 'loading' => 'lazy', ]); echo '</div>'; } }

Для миниатюр второго Swiper используйте work_slider_thumb. Если поле возвращает массив, ID будет в $image['ID'].

Важно: после добавления новых размеров старые загруженные изображения сами не пересоздадутся. Нужно регенерировать thumbnails через плагин Regenerate Thumbnails или WP-CLI. Иначе WordPress будет отдавать оригиналы или ближайший доступный размер.

Так Вы уменьшите вес страницы, сохраните корректный srcset и не будете тянуть большие оригиналы в миниатюрах слайдера.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ SMM Из-за чего не сохраняется видео в мобильной программе blackmagic? 1 ответ