feat: show ad pictures on landing page
This commit is contained in:
parent
f2d28b8bd1
commit
27af37e2d7
@ -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 -->'
|
||||
|
||||
@ -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);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user