ads on article page

This commit is contained in:
Ross Trottier 2024-08-14 14:47:52 -06:00
parent 294e423b0b
commit 3bab359677
2 changed files with 115 additions and 57 deletions

View File

@ -1,14 +1,14 @@
<?php get_header() ?> <?php get_header() ?>
<div class="st-article-section-topper"></div> <div class="st-article-section-topper"></div>
<article class="st-main-grid st-article"> <main class="st-main-grid">
<section class="st-article-section-grid st-article-section-grid__article-page">
<article class="st-article">
<?php <?php
if (have_posts()) { if (have_posts()) {
while (have_posts()) { while (have_posts()) {
the_post(); the_post();
$post_id = get_the_ID(); ?> $post_id = get_the_ID();
?>
<h1 class="st-article__title"> <?php the_title(); ?> </h1> <h1 class="st-article__title"> <?php the_title(); ?> </h1>
<div class="st-article__author-box"> <div class="st-article__author-box">
<div class="st-article__author-name"> <div class="st-article__author-name">
@ -16,28 +16,27 @@
</div> </div>
<div> <div>
<?php the_date() ?> <?php the_date() ?>
</div> </div>
</div> </div>
<?php the_content(); ?> <?php the_content(); ?>
<?php
if (function_exists('get_field')) {
<?php
if(function_exists('get_field')){
$related_posts = get_field('related_posts', $post_id); $related_posts = get_field('related_posts', $post_id);
if (isset($related_posts)) :?> if (isset($related_posts)) : ?>
<div class="st-main-grid"> <div class="st-main-grid">
<h3>Related Articles</h3> <h3>Related Articles</h3>
<div class="st-article-section-related-articles"> <div class="st-article-section-related-articles">
<?php foreach ($related_posts as $post) : setup_postdata($post); <?php foreach ($related_posts as $post) : setup_postdata($post);
$category = get_the_category()[0];?> $category = get_the_category()[0]; ?>
<article class="st-related-article"> <article class="st-related-article">
<a href="<?php the_permalink(); ?>" class="st-article-section-sub-article__image-link"> <a href="<?php the_permalink(); ?>" class="st-article-section-sub-article__image-link">
<?php the_post_thumbnail(); ?> <?php the_post_thumbnail(); ?>
</a> </a>
<div class="st-article-section-sub-article__text-container"> <div class="st-article-section-sub-article__text-container">
<a href="<?php echo home_url($category->slug); ?>" class="st-article-section-sub-article__category-link"><?php echo $category->name; ?></a> <a href="<?php echo home_url($category->slug); ?>" class="st-article-section-sub-article__category-link"><?php echo $category->name; ?></a>
<a class="st-article-section-sub-article__title" href="<?php the_permalink(); ?>"><h3><?php the_title(); ?></h3></a> <a class="st-article-section-sub-article__title" href="<?php the_permalink(); ?>">
<h3><?php the_title(); ?></h3>
</a>
</div> </div>
</a> </a>
</article> </article>
@ -50,17 +49,32 @@
endif; endif;
} }
} }
}?> } ?>
</article>
<section class="st-ad-section st-ad-section__article-page">
<?php
if (function_exists('the_ad_group')) {
the_ad_group(147);
the_ad_group(148);
}
?>
</section>
</section>
<section class="st-article-section-grid st-article-section-grid__article-page">
<section class="st-ad-section-long-post-end st-article"> <section class="st-ad-section-long-post-end st-article">
<?php <?php
if(function_exists('the_ad_group')){ if (function_exists('the_ad_group')) {
the_ad_group(149); the_ad_group(149);
} }
?> ?>
</section> </section>
</article> <?php
comments_template();
?>
</section>
</main>
<?php <?php
comments_template();
get_footer(); get_footer();
?> ?>

View File

@ -645,6 +645,10 @@ SECTIONS
gap: 1em; gap: 1em;
} }
.st-article-section-grid__article-page {
grid-template-columns: repeat(3, 1fr);
}
.st-article-section-highlight, .st-article-section-highlight,
.st-article-section-bottom { .st-article-section-bottom {
grid-column: 1 / span 3; grid-column: 1 / span 3;
@ -689,6 +693,14 @@ SECTIONS
.st-article-section-wide .st-article-section-title { .st-article-section-wide .st-article-section-title {
grid-column: 1 / span 2; grid-column: 1 / span 2;
} }
.st-ad-section__article-page {
position: -webkit-sticky;
position: sticky;
top: 85px;
left: 0;
align-self: start;
}
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
@ -750,12 +762,28 @@ SECTIONS
border-left: 1px #0b4fa0 solid; border-left: 1px #0b4fa0 solid;
margin-bottom: 0; margin-bottom: 0;
} }
.st-ad-section__article-page {
grid-column: 3 / span 2;
border: 0;
padding-bottom: 3em;
justify-content: start;
gap: 1em;
}
.st-ad-section-long-post-end {
grid-column: 1 / span 4 !important;
}
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
.st-ad-section { .st-ad-section {
grid-area: ad; grid-area: ad;
} }
.st-ad-section__article-page {
grid-column: 4 / span 1;
}
} }
.st-ad-section img, .st-ad-section img,
@ -786,6 +814,11 @@ SECTIONS
height: auto; height: auto;
} }
.local-in-content-ad img {
max-width: 100%;
height: auto;
}
.local-article-mid-roll a, .local-article-mid-roll a,
.local-article-mid-roll img { .local-article-mid-roll img {
width: 100%; width: 100%;
@ -1132,12 +1165,17 @@ COMPONENTS
.st-article__title{ .st-article__title{
font-size: 2.5rem; font-size: 2.5rem;
} }
.st-article {
grid-column: 1 / span 2;
}
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
.st-article { .st-article {
max-width: 850px; max-width: 850px;
margin: 0 auto; margin: 0 auto;
grid-column: 1 / span 3;
} }
.st-article__title{ .st-article__title{
@ -1272,6 +1310,12 @@ a.page-numbers,
margin: 1em; margin: 1em;
} }
@media (min-width: 760px) {
.discourse-comments-area {
grid-column: 1 / span 4;
}
}
@media (min-width: 1200px) { @media (min-width: 1200px) {
.discourse-comments-area { .discourse-comments-area {
max-width: 850px; max-width: 850px;