Как изменить размер миниатюр в WordPress с помощью Advanced Custom Fields?
Я просто пытаюсь использовать средний размер миниатюры для background-image в моей расширенной галерее пользовательских полей. Я довольно новичок в WordPress и концептуально понимаю, что мне нужно делать, однако у меня возникают проблемы с поиском правильного синтаксиса для реализации функции ‘add_image_size’, которая была создана для моего цикла и изображения.
Кажется, что это должно работать, однако добавление атрибутов «medium» и «size» не позволяет отображать изображение. (пожалуйста, не когда я вырежу $image_thumbnail чтобы картинки выглядели как надо)
<div class="container gallery-section">
<?php foreach(get_field('gallery_image') as $gallery_image) { ?>
<?php
$image = $gallery_image['gallery_picture'];
$image_thumbnail = $image['gallery_picture']['sizes']['medium'];
?>
<div class="gallery-image">
<a href="<?php echo $image; ?>" style="background-image:url('<?php echo $image_thumbnail; ?>');" class="fancybox" rel="gallery"></a>
</div>
<?php } ?>
</div>
Вот мой functions.php
if (function_exists('add_theme_support'))
{
// Add Menu Support
add_theme_support('menus');
// Add Thumbnail Theme Support
add_theme_support('post-thumbnails');
add_image_size('large', 700, '', true); // Large Thumbnail
add_image_size('medium', 250, '', true); // Medium Thumbnail
add_image_size('small', 120, '', true); // Small Thumbnail
add_image_size('custom-size', 700, 200, true); // Custom Thumbnail Size call using the_post_thumbnail('custom-size');
}
*****РЕДАКТИРОВАТЬ*****
<div class="container gallery-section">
<?php
$gallery_field = get_field('gallery_image'); // the field name that you set for the gallery field
foreach($gallery_field as $gallery_image) {
$image = $gallery_image['gallery_picture']; // url for the image that you upload same sizes..
$image_thumbnail = $image['sizes']['medium']; // url for the medium size
?>
<div class="gallery-image">
<a href="<?php echo $image; ?>" style="background-image:url('<?php echo $image_thumbnail; ?>');" class="fancybox" rel="gallery"></a>
</div>
<?php } ?>
</div>
Решение
У вас проблемы с этим циклом и получением результатов из массива.
это должно быть что-то вроде этого:
<div class="container gallery-section">
<?php
$gallery_field = get_field('gallery_image'); // the field name that you set for the gallery field
//print_r($gallery_field); you can see the array structure.
foreach($gallery_field as $gallery_image) {
$image = $gallery_image['url']; // url for the image that you upload same sizes..
$image_thumbnail = $gallery_image['sizes']['medium']; // url for the medium size
?>
<div class="gallery-image">
<a href="<?php echo $image; ?>" style="background-image:url('<?php echo $image_thumbnail; ?>');" class="fancybox" rel="gallery"></a>
</div>
<?php } ?>
</div>
Еще одна вещь, которую вы можете установить размеры medium а также large из настроек-> медиа, если хотите.
Я разобью его на куски, чтобы вы могли понять.
В администраторе ACF вы создаете новое поле галереи и называете его gallery_image.
Теперь, чтобы получить это поле в шаблоне, который вы используете:
$gallery_field = get_field('gallery_image');
Это поле возвращает вам массив всех изображений, которые вы загружаете в это поле на какой-то странице поста.
Массив выглядит так:
Array
(
[0] => Array
(
[id] => 199
[alt] =>
[title] => _YON7864
=>
[description] =>
[mime_type] => image/jpeg
[url] => http://localhost/dev/wp-content/uploads/2014/10/YON7864.jpg
[width] => 1772
[height] => 1177
[sizes] => Array
(
[thumbnail] => http://localhost/dev/wp-content/uploads/2014/10/YON7864-150x150.jpg
[thumbnail-width] => 150
[thumbnail-height] => 150
[medium] => http://localhost/dev/wp-content/uploads/2014/10/YON7864-250x166.jpg
[medium-width] => 250
[medium-height] => 166
[large] => http://localhost/dev/wp-content/uploads/2014/10/YON7864-700x464.jpg
[large-width] => 700
[large-height] => 464
[small] => http://localhost/dev/wp-content/uploads/2014/10/YON7864-120x79.jpg
[small-width] => 120
[small-height] => 79
[custom-size] => http://localhost/dev/wp-content/uploads/2014/10/YON7864-700x200.jpg
[custom-size-width] => 700
[custom-size-height] => 200
)
)
)
Теперь, чтобы получить все изображения, вы запускаете цикл в массиве.
foreach($gallery_field as $gallery_image) {
//inside the loop
}
$image_gallery теперь массив для одного изображения и его запуска в цикле.
И внутри цикла вы получите URL и некоторый URL размера изображения, который вы хотите.
Чтобы получить URL изображения, которое вы загружаете в реальном размере, вам нужно использовать ключ ['url'] как вы видите в массиве.
Чтобы получить URL для других размеров изображения, вам нужно попасть внутрь ключа массива ['sizes'] а затем вы выбираете размер, как ['medium'] или же ['large']
Это должно выглядеть так.
foreach($gallery_field as $gallery_image) {
// $gallery_image is our array for each image
$image = $gallery_image['url']; // to get the url we need to use ['url']
$image_thumbnail = $gallery_image['sizes']['medium']; // to get the medium size image url we need to use ['sizes']['medium']
}
Другие решения
Я переключил URL-адрес изображения на URL-адрес oject и использовал этот код.
<?php while(have_rows('gallery_image')) { the_row(); ?>
<?php $image = get_sub_field('gallery_picture'); ?>
<div class="gallery-image">
<a href="<?php echo $image['url']; ?>" style="background-image:url('<?php echo $image['sizes']['medium']; ?>');" class="fancybox" rel="gallery"></a>
</div>
<?php } ?>