v0.10.37: posts 卡片 has-item-ratio 模式收口（列堆叠 ≤767 全列 100% + 缩略图比率框/绝对居中 scale1.01/fit-height per-image + media 宽高回填 7989 行）——桌面/移动卡盒与原站 ≤0.7px
This commit is contained in:
bigcode
@@ -423,13 +423,16 @@ function collectResponsiveCss(elements: ElElement[]): string {
|
||||
const num = (v: unknown) => (typeof v === "number" ? v : v != null && v !== "" ? Number(v) : NaN);
|
||||
const tw = num(st._inline_size_tablet);
|
||||
const mw = num(st._inline_size_mobile);
|
||||
const dw = num(st._inline_size);
|
||||
if (Number.isFinite(tw) && tw > 0) {
|
||||
css += `@media (max-width:1024px){${sel}{flex:0 0 ${tw}% !important;max-width:${tw}% !important;}}\n`;
|
||||
}
|
||||
if (Number.isFinite(mw) && mw > 0) {
|
||||
css += `@media (max-width:767px){${sel}{flex:0 0 ${mw}% !important;max-width:${mw}% !important;}}\n`;
|
||||
} else if (Number.isFinite(dw) && dw > 0) {
|
||||
} else {
|
||||
// Elementor frontend.css 对所有列在 ≤767 回退 100%（@media(max-width:767px){
|
||||
// .elementor-column{width:100%}}）——无论该列桌面是否设 _inline_size。
|
||||
// （首页 8bc6b68 col-50 默认均分列未设 inline size，v0.10.36 前移动端不堆叠：
|
||||
// posts 卡片区保持 195px 并排，原站为 374px 全宽堆叠）
|
||||
css += `@media (max-width:767px){${sel}{flex:0 0 100% !important;max-width:100% !important;}}\n`;
|
||||
}
|
||||
// icon-list 响应式项间距（space_between_tablet/mobile：页脚社交 10 → 7px）
|
||||
@@ -1078,7 +1081,10 @@ function PostsWidget({ el, settings }: { el: ElElement; settings: Record<string,
|
||||
const metaWeight = s(settings.cards_meta_typography_font_weight) || "400";
|
||||
const cardBorderColor = s(settings.cards_card_border_color) || "#69727d";
|
||||
const cardBorderWidth = sizeCss(settings.cards_card_border_width) || "1px";
|
||||
// 缩略图比率：desktop 默认 0.66，mobile 默认继承（27143/ H18 均为 0.6/0.67）
|
||||
// 缩略图比率：Elementor cards_item_ratio 控件自带默认 0.66（DB 无该键时仍生效，
|
||||
// 原站 3025217 桌面 pad 实测 0.66×333=219.766 即无键默认）→ posts widget 恒走
|
||||
// has-item-ratio 模式；ratio_mobile 显式设值时覆盖（3025217 移动 0.67、27143 移动 0.6），
|
||||
// 未设则继承桌面 ratio。fit-height（移动端 img 按高适配）由 app.css 媒体查询复刻。
|
||||
const ratio = numVal((settings.cards_item_ratio as { size?: unknown } | undefined)?.size) ?? 0.66;
|
||||
const ratioM = numVal((settings.cards_item_ratio_mobile as { size?: unknown } | undefined)?.size) ?? ratio;
|
||||
const titleTag = (["h1", "h2", "h3", "h4", "h5", "h6", "div", "span", "p"].includes(s(settings.cards_title_tag)) ? s(settings.cards_title_tag) : "h3") as "h3";
|
||||
@@ -1095,10 +1101,11 @@ function PostsWidget({ el, settings }: { el: ElElement; settings: Record<string,
|
||||
if (isNaN(dt.getTime())) return null;
|
||||
return dt.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" });
|
||||
};
|
||||
// 比率变量随 has-item-ratio 模式注入（CSS 缩略图 pad 与 img absolute 布局读取）
|
||||
const thumbVars = { "--ep-ratio": String(ratio), "--ep-ratio-m": String(ratioM) } as CSSProperties;
|
||||
return (
|
||||
<div
|
||||
className="elementor-posts-container elementor-posts elementor-posts--skin-cards elementor-posts--thumbnail-top elementor-posts__hover-gradient elementor-grid"
|
||||
className="elementor-posts-container elementor-posts elementor-posts--skin-cards elementor-posts--thumbnail-top elementor-posts__hover-gradient elementor-grid elementor-has-item-ratio"
|
||||
style={{
|
||||
display: "grid",
|
||||
gap: `${rowGap} ${colGap}`,
|
||||
@@ -1117,7 +1124,12 @@ function PostsWidget({ el, settings }: { el: ElElement; settings: Record<string,
|
||||
<div className="elementor-post__card" style={{ border: `${cardBorderWidth} solid ${cardBorderColor}` }}>
|
||||
{hasThumb ? (
|
||||
<a className="elementor-post__thumbnail__link" href={href} tabIndex={-1}>
|
||||
<div className="elementor-post__thumbnail" style={thumbVars}>
|
||||
{/* fit-height：Elementor 前端 JS per-image 判定（图片高宽比 < 桌面 ratio
|
||||
* 时按高适配、宽溢出裁剪；首页 3025217 卡2 1280x720=0.5625<0.66 实测 fit） */}
|
||||
<div
|
||||
className={"elementor-post__thumbnail" + (p.imageWidth && p.imageHeight && p.imageHeight / p.imageWidth < ratio ? " elementor-fit-height" : "")}
|
||||
style={thumbVars}
|
||||
>
|
||||
<img src={localSiteUrl(p.imageUrl!)} alt={p.title} loading="lazy" />
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@@ -657,6 +657,10 @@ export type PostCardItem = {
|
||||
excerpt: string | null;
|
||||
publishedAt: Date | null;
|
||||
imageUrl: string | null;
|
||||
/** 特色图原始宽（fit-height 判定：高宽比 < cards_item_ratio 时按高适配） */
|
||||
imageWidth: number | null;
|
||||
/** 特色图原始高（fit-height 判定用） */
|
||||
imageHeight: number | null;
|
||||
content: string | null;
|
||||
categoryName: string | null;
|
||||
};
|
||||
@@ -691,6 +695,8 @@ export async function listPostsByTermsLegacy(legacyTermIds: number[], limit: num
|
||||
excerpt: contents.excerpt,
|
||||
publishedAt: contents.publishedAt,
|
||||
imageUrl: media.url,
|
||||
imageWidth: media.width,
|
||||
imageHeight: media.height,
|
||||
content: contents.html,
|
||||
categoryName: sql<string | null>`(SELECT cat.name FROM content_terms ct JOIN categories cat ON cat.id = ct.category_id WHERE ct.content_id = ${contents.id} AND cat.taxonomy = 'category' LIMIT 1)`,
|
||||
})
|
||||
|
||||
+36
-10
@@ -472,11 +472,14 @@
|
||||
* padding 48/48/16 + 白底 + 圆角 6 + 边框 #E0E5F9 均设置驱动 */
|
||||
[data-el="65282de"] > div, [data-el="cc3e8ca"] > div { width: auto !important; }
|
||||
|
||||
/* ===== Elementor posts widget（skin cards 基础；H18 + 模板 27143 实测 2026-11-02）
|
||||
/* ===== Elementor posts widget（skin cards 基础；H18 + 模板 27143 实测 2026-11-02，
|
||||
* has-item-ratio 模式 3025217 实测 2026-11-04）
|
||||
* 移植 widget-posts.min.css cards 皮肤：article 纵向 flex；__card 白底/圆角 3/
|
||||
* overflow hidden/纵向 flex；缩略图容器用 padding-bottom 比率撑高、img 静态
|
||||
* 宽度 calc(100%+1px)（高度按原图比例）；hover-gradient 覆盖渐变；badge 绝对
|
||||
* 右上（默认 #69727d 胶囊，H18 由 custom_css 覆盖为白底圆角 4）；
|
||||
* overflow hidden/纵向 flex；未设 cards_item_ratio 的 widget 缩略图为静态流
|
||||
* （img 宽 calc(100%+1px)、高按原图比例）；设了 ratio 的 widget 走 Elementor
|
||||
* has-item-ratio 模式（3025217 桌面实测 thumb pad 219.766=0.66×333、img absolute
|
||||
* 居中 scale(1.01)；移动端 fit-height img height:100%/width:auto）；hover-gradient
|
||||
* 覆盖渐变；badge 绝对右上（默认 #69727d 胶囊，H18 由 custom_css 覆盖为白底圆角 4）；
|
||||
* text flex-grow；meta 在 text 之后（border-top + margin-top:auto）。
|
||||
* 各尺寸/颜色由 PostsWidget 按设置内联（padding/字号/边框），此处只留结构。 */
|
||||
.elementor-posts-container:not(.elementor-posts-masonry) { align-items: stretch; }
|
||||
@@ -500,11 +503,37 @@
|
||||
width: 100%; min-height: 100%; border-radius: 3px; background-color: #fff;
|
||||
}
|
||||
.elementor-post__thumbnail__link { display: block; position: relative; width: 100%; margin: 0 0 20px; }
|
||||
.elementor-post__thumbnail {
|
||||
position: relative; overflow: hidden;
|
||||
.elementor-post__thumbnail { position: relative; overflow: hidden; }
|
||||
.elementor-post__thumbnail img { display: block; width: calc(100% + 1px); max-width: none; height: auto; }
|
||||
/* has-item-ratio 模式（posts widget 恒走，Renderer 加容器 class）：
|
||||
* 缩略图容器 pad 撑比率框，img 绝对居中（left/top calc(50%+1px)）+ scale(1.01)
|
||||
* translate 回中（原站 3025217 桌面实测矩阵 matrix(1.01,0,0,1.01,-168.67,-111.3)）。
|
||||
* 桌面默认 img 宽 calc(100%+1px)、高按图片比率（widget-posts.min.css card 规则）；
|
||||
* fit-height（Renderer per-image：图片高宽比 < ratio）img height:100%/width:auto；
|
||||
* 移动端原站两卡均 fit（Elementor JS 按 ratio_mobile 重算，3025217 卡1 0.6604<0.67
|
||||
* 亦 fit），媒体查询内全体 fit 覆盖桌面默认 */
|
||||
.elementor-posts-container.elementor-has-item-ratio .elementor-post__thumbnail {
|
||||
padding-bottom: calc(var(--ep-ratio, 0.66) * 100%);
|
||||
}
|
||||
.elementor-post__thumbnail img { display: block; width: calc(100% + 1px); max-width: none; height: auto; }
|
||||
.elementor-posts-container.elementor-has-item-ratio .elementor-post__thumbnail img {
|
||||
position: absolute; left: calc(50% + 1px); top: calc(50% + 1px);
|
||||
height: auto; width: calc(100% + 1px);
|
||||
transform: scale(1.01) translate(-50%, -50%);
|
||||
}
|
||||
/* fit-height：图片高宽比 < 桌面 ratio（Renderer per-image class）→ img 按高适配 */
|
||||
.elementor-posts-container.elementor-has-item-ratio .elementor-post__thumbnail.elementor-fit-height img {
|
||||
height: 100%; width: auto;
|
||||
}
|
||||
/* 移动端原站两卡均 fit（Elementor JS 按 ratio_mobile 0.67 重算，卡1 0.6604<0.67 亦 fit）
|
||||
* → 媒体查询内全体 fit，覆盖桌面默认（同特异性源码靠后生效） */
|
||||
@media (max-width: 767px) {
|
||||
.elementor-posts-container.elementor-has-item-ratio .elementor-post__thumbnail img {
|
||||
height: 100%; width: auto;
|
||||
}
|
||||
.elementor-posts-container.elementor-has-item-ratio .elementor-post__thumbnail {
|
||||
padding-bottom: calc(var(--ep-ratio-m, var(--ep-ratio, 0.66)) * 100%);
|
||||
}
|
||||
}
|
||||
.elementor-post__badge {
|
||||
position: absolute; top: 0; right: 0; z-index: 1; margin: 20px;
|
||||
background: #69727d; color: #fff; border-radius: 999px;
|
||||
@@ -526,9 +555,6 @@
|
||||
background-repeat: no-repeat; opacity: 1; transition: all 0.3s ease-out;
|
||||
}
|
||||
.elementor-posts__hover-gradient .elementor-post__card:hover .elementor-post__thumbnail__link:after { opacity: 0.5; }
|
||||
@media (max-width: 767px) {
|
||||
.elementor-post__thumbnail { padding-bottom: calc(var(--ep-ratio-m, var(--ep-ratio, 0.66)) * 100%); }
|
||||
}
|
||||
/* 右列卡（a22c185 .ele-post-dif-2）：纯文本卡 bg #F4F5F8、标题链接右侧箭头图标
|
||||
* 与 44px 两行钳制均由 custom_css 注入；此处理品牌底色/箭头 hover 位移 */
|
||||
[data-el="a22c185"] .elementor-post__card { background-color: #F4F5F8; }
|
||||
|
||||
Reference in New Issue
Block a user