feat: show ad pictures on landing page

This commit is contained in:
Flatlogic Bot 2026-08-06 11:55:29 +00:00
parent f2d28b8bd1
commit 27af37e2d7
2 changed files with 80 additions and 1 deletions

View File

@ -434,6 +434,38 @@ function fad_upsert_listing($listing, $category_ids, $upload_dir) {
return $post_id;
}
function fad_build_picture_ad_strip($post_ids) {
global $cat_tax;
$cards = '';
foreach (array_slice($post_ids, 0, 3) as $post_id) {
$post_id = (int) $post_id;
$image = wp_get_attachment_url(get_post_thumbnail_id($post_id));
if (!$image) {
continue;
}
$title = get_the_title($post_id);
$summary = get_post_field('post_excerpt', $post_id);
$categories = wp_get_post_terms($post_id, $cat_tax, array('fields' => 'names'));
$category = !empty($categories) && !is_wp_error($categories) ? $categories[0] : 'Sponsored campaign';
$cards .= '<a class="fd-picture-ad" href="' . esc_url(get_permalink($post_id)) . '">'
. '<img src="' . esc_url($image) . '" alt="' . esc_attr($title . ' ad creative') . '" width="1200" height="720" loading="eager" decoding="async">'
. '<span class="fd-picture-ad__badge">Sponsored</span>'
. '<span class="fd-picture-ad__title"><strong>' . esc_html($title) . '</strong><small>' . esc_html($category) . ' · ' . esc_html($summary) . '</small></span>'
. '</a>';
}
if ($cards === '') {
return '';
}
return '<!-- wp:heading {"level":2} --><h2>Featured visual ads</h2><!-- /wp:heading -->'
. '<!-- wp:paragraph --><p>Sponsored campaigns now display their generated creative image directly inside each ad card.</p><!-- /wp:paragraph -->'
. '<!-- wp:html --><div class="fd-picture-ads" aria-label="Sponsored picture ads">' . $cards . '</div><!-- /wp:html -->';
}
$categories = array(
'SaaS & Apps' => 'Sponsored software, workflow, and productivity offers.',
'Local Lead Gen' => 'Service businesses buying local leads and map visibility.',
@ -498,10 +530,12 @@ foreach ($listings as $listing) {
$front_id = (int) get_option('page_on_front');
if ($front_id) {
$picture_ads = fad_build_picture_ad_strip($created);
$home_content = '<!-- wp:group {"layout":{"type":"constrained"}} -->'
. '<div class="wp-block-group"><!-- wp:heading {"level":2} --><h2>Test campaign inventory</h2><!-- /wp:heading -->'
. '<!-- wp:paragraph --><p>Browse test advertisers, campaign placements, budgets, generated creatives, and local targeting data. This demo content is safe to replace when real advertisers are ready.</p><!-- /wp:paragraph -->'
. '<!-- wp:buttons --><div class="wp-block-buttons"><!-- wp:button --><div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="?page_id=6">Search sponsored listings</a></div><!-- /wp:button --><!-- wp:button {"className":"is-style-outline"} --><div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="?page_id=5">Submit advertiser listing</a></div><!-- /wp:button --></div><!-- /wp:buttons -->'
. $picture_ads
. '<!-- wp:heading {"level":2} --><h2>Find ad inventory</h2><!-- /wp:heading --><!-- wp:shortcode -->[gd_search]<!-- /wp:shortcode -->'
. '<!-- wp:heading {"level":2} --><h2>Ad categories</h2><!-- /wp:heading --><!-- wp:shortcode -->[gd_categories]<!-- /wp:shortcode -->'
. '<!-- wp:heading {"level":2} --><h2>Featured sponsored campaigns</h2><!-- /wp:heading --><!-- wp:shortcode -->[gd_listings post_type="gd_place" sort_by="latest" post_limit="9" show_featured_only="true" with_pics_only="true" layout="3" character_count="110"]<!-- /wp:shortcode -->'

View File

@ -31,6 +31,15 @@ add_action('wp_enqueue_scripts', function () {
.geodir-listings, .geodir-category-list-view { gap: 1rem; }
footer .wp-block-navigation, footer .wp-block-social-links, footer .wp-block-spacer { display: none !important; }
footer { color: var(--fd-muted); }
.home .fd-picture-ads { width: min(1120px, calc(100vw - 2rem)); max-width: 1120px; margin: 1.5rem 0 2.25rem 50%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.home .fd-picture-ad { position: relative; display: block; overflow: hidden; border-radius: 22px; border: 1px solid rgba(21, 23, 21, .1); background: var(--fd-surface); box-shadow: 0 22px 52px rgba(20, 25, 35, .12); text-decoration: none !important; color: #fff; min-height: 220px; isolation: isolate; }
.home .fd-picture-ad img { display: block; width: 100%; height: 100%; min-height: 220px; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .28s ease, filter .28s ease; }
.home .fd-picture-ad::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(9, 14, 24, .02) 35%, rgba(9, 14, 24, .70) 100%); pointer-events: none; }
.home .fd-picture-ad:hover img { transform: scale(1.045); filter: saturate(1.05); }
.home .fd-picture-ad__badge { position: absolute; top: .8rem; left: .8rem; z-index: 2; display: inline-flex; align-items: center; border-radius: 999px; padding: .35rem .62rem; background: rgba(255, 255, 255, .88); color: var(--fd-ink); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(10px); }
.home .fd-picture-ad__title { position: absolute; right: .8rem; bottom: .8rem; left: .8rem; z-index: 2; display: grid; gap: .12rem; border-radius: 16px; padding: .72rem .85rem; background: rgba(9, 14, 24, .72); color: #fff; backdrop-filter: blur(12px); }
.home .fd-picture-ad__title strong { font-size: 1rem; line-height: 1.2; }
.home .fd-picture-ad__title small { color: rgba(255,255,255,.78); font-size: .78rem; }
.home .gd-categories-widget, .home .geodir_locations { width: min(1120px, calc(100vw - 2rem)); max-width: 1120px; margin-left: 50%; transform: translateX(-50%); }
.home .geodir-widget-posts.geodir-gridview { align-items: stretch; }
.home .geodir-widget-posts .geodir-post > .card, .home .geodir-widget-posts .geodir-post .card.p-0 { border: 1px solid var(--fd-border) !important; border-radius: 18px; overflow: hidden; background: var(--fd-surface); box-shadow: 0 16px 42px rgba(20, 25, 35, .08); }
@ -38,5 +47,41 @@ add_action('wp_enqueue_scripts', function () {
.home .geodir-widget-posts .geodir-entry-title { font-size: 1.05rem; line-height: 1.25; margin-bottom: .4rem; }
.home .geodir-widget-posts .geodir-field-post_content { color: var(--fd-muted); font-size: .94rem; line-height: 1.45; text-align: left !important; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.home .geodir-widget-posts .card-img-top img { min-height: 170px; object-fit: cover; }
@media (max-width: 900px) { .home .fd-picture-ads { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .home .fd-picture-ads { grid-template-columns: 1fr; } .home .fd-picture-ad, .home .fd-picture-ad img { min-height: 190px; } }
');
});
});
add_action('wp_footer', function () {
if (!is_front_page()) {
return;
}
echo <<<'HTML'
<script id="fd-force-ad-images">
(function () {
function loadAdPictures() {
document.querySelectorAll('.home .geodir-widget-posts img.geodir-lazy-load[data-src]').forEach(function (img) {
var src = img.getAttribute('data-src');
if (!src) {
return;
}
if (img.getAttribute('src') !== src) {
img.setAttribute('src', src);
}
img.setAttribute('loading', 'eager');
img.setAttribute('decoding', 'async');
img.classList.remove('geodir-lazy-load');
});
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', loadAdPictures);
} else {
loadAdPictures();
}
window.addEventListener('load', loadAdPictures);
})();
</script>
HTML;
}, 30);