相册站终于上线，太懒了，只为简单的图片展示，加上灯箱。但在PC端，如果图片数量较多，排列是个大问题。

成品在下面

https://photo.ouxiaopi.com/

php部分

//文章图片张数自定义
function display_post_images_and_metadata($post_id) {
// 获取当前文章的所有附件（图片）
$attachments = get_posts(array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'posts_per_page' => -1,
'post_parent' => $post_id
));

// 根据图片数量展示不同的样式
if ($attachments) {
$num_attachments = count($attachments);

switch ($num_attachments) {
case 1:
echo '<img class="p_img" src="' . wp_get_attachment_image_url(reset($attachments)->ID, 'full') . '" data-action="zoom" style="cursor: -webkit-zoom-in;">';
break;
case 2:
foreach ($attachments as $attachment) {
echo '<img class="p_img_2 is-6" src="' . wp_get_attachment_image_url($attachment->ID, 'full') . '" data-action="zoom" style="cursor: -webkit-zoom-in;">';
}
break;
case 3:
foreach ($attachments as $attachment) {
echo '<img class="p_img_3 is-4" src="' . wp_get_attachment_image_url($attachment->ID, 'full') . '" data-action="zoom" style="cursor: -webkit-zoom-in;">';
}
break;
case 4:
foreach ($attachments as $attachment) {
echo '<img class="p_img_4 is-6" src="' . wp_get_attachment_image_url($attachment->ID, 'full') . '" data-action="zoom" style="cursor: -webkit-zoom-in;">';
}
break;
case 5:
foreach ($attachments as $attachment) {
echo '<img class="p_img_5 is-4" src="' . wp_get_attachment_image_url($attachment->ID, 'full') . '" data-action="zoom" style="cursor: -webkit-zoom-in;">';
}
break;
case 6:
case 7:
case 8:
case 9:
foreach ($attachments as $attachment) {
// 对于 6 及以上图片，统一使用 is-4 类
echo '<img class="p_img_6 is-4" src="' . wp_get_attachment_image_url($attachment->ID, 'full') . '" data-action="zoom" style="cursor: -webkit-zoom-in;">';
}
break;
default:
// 处理超过 9 张图片的情况
foreach ($attachments as $attachment) {
echo '<img class="p_img_6 is-4" src="' . wp_get_attachment_image_url($attachment->ID, 'full') . '" data-action="zoom" style="cursor: -webkit-zoom-in;">';
}
break;
}
} else {
// 如果没有图片，则展示默认提示或其他内容
echo '<p>No images found.</p>';
}
}

css部分

.column{
max-width: 1004px;
width: 94%;
margin: 0 auto;
padding-bottom: 50px;
padding-top: 30px;
}
.column h1{
font-size: 36px;
font-weight: 600;
margin: 0;
}
.column p{
font-weight: 400;
letter-spacing: 0.2px;
color: #333;
}
.p_img{
width: 100%;
}
.p_img_3{
width: 100% !important;
}
.p_img_2{
width: 100%;
}

/*手机端样式一并奉上*/

@media only screen and (max-width: 770px){
.is-5{
margin:0px!important;
padding-right:inherit!important;
padding-left: inherit!important;
}
.is-6{
margin:0px!important;
padding-right:inherit!important;
padding-left: inherit!important;
}
.is-4{
margin:0px!important;
padding-right:inherit!important;
padding-left: inherit!important;
}
.is-10{
margin:0px!important;
padding-right:inherit!important;
padding-left: inherit!important;
}
.is-3{
margin:0px!important;
padding-right:inherit!important;
padding-left: inherit!important;
}
.columns img{
width: 100%;
}

有需要的童鞋自取吧！