feat(site): Comunidade section with Instagram posts the gym was tagged in
Per-gym Graph API /tags fetch with file cache and local thumbnails, section after the gallery, navbar link and admin page (Gestão > Site).
This commit is contained in:
andre committed
1 parent
6ac5213624
commit
e804c52b4e
10 files changed
+491
-3
No files matched your search
@@ -2687,6 +2687,7 @@ h3.contact-title {
|
||||
4.5:1), so those use the ink green; dark sections keep the bright accent. */
|
||||
.feature-section .section-eyebrow,
|
||||
.gallery-section .section-eyebrow,
|
||||
.community-section .section-eyebrow,
|
||||
.service-section .section-eyebrow,
|
||||
.schedule-section .section-eyebrow,
|
||||
.workhours-section .section-eyebrow {
|
||||
@@ -4953,3 +4954,70 @@ a:where(:not(.site-btn, .gym-switch-btn, .gal-link, .skip-link, .splide__arrow,
|
||||
h1, h2,
|
||||
.navbar-brand img,
|
||||
.gym-switch-logo { filter: url(#pt-noise); }
|
||||
|
||||
/* ── Comunidade (Instagram posts the gym was tagged in, site/index.php) ── */
|
||||
.community-section {
|
||||
padding: 80px 0 70px;
|
||||
background: var(--fitme-white);
|
||||
}
|
||||
|
||||
.community-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(min(220px, 45%), 1fr));
|
||||
gap: 12px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.community-post {
|
||||
position: relative;
|
||||
display: block;
|
||||
aspect-ratio: 1;
|
||||
overflow: hidden;
|
||||
border-radius: var(--fitme-radius);
|
||||
background: var(--fitme-surface-2);
|
||||
}
|
||||
|
||||
.community-post img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform .4s ease;
|
||||
}
|
||||
|
||||
.community-type {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 4px rgba(var(--fitme-dark-rgb), .6);
|
||||
}
|
||||
|
||||
.community-user {
|
||||
position: absolute;
|
||||
inset: auto 0 0;
|
||||
padding: 28px 12px 10px;
|
||||
color: #fff;
|
||||
font-size: .85rem;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
background: linear-gradient(transparent, rgba(var(--fitme-dark-rgb), .75));
|
||||
opacity: 0;
|
||||
transition: opacity var(--fitme-transition);
|
||||
}
|
||||
|
||||
.community-post:hover img,
|
||||
.community-post:focus-visible img { transform: scale(1.05); }
|
||||
|
||||
.community-post:hover .community-user,
|
||||
.community-post:focus-visible .community-user { opacity: 1; }
|
||||
|
||||
/* Touch screens have no hover: keep the @user visible. */
|
||||
@media (hover: none) {
|
||||
.community-user { opacity: 1; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.community-post img { transition: none; }
|
||||
}
|
||||
@@ -37,6 +37,7 @@ usort($whours, fn($x, $y) => strcmp((string) $x['open'], (string) $y['open']));
|
||||
$events = site_active_events($pdo, $gid); // time-limited events, banner below the hero
|
||||
$memberships = $on('mensalidades') ? site_memberships($pdo, $gid) : [];
|
||||
$reviews = $on('reviews') ? site_reviews($gym) : null; // null when not configured / nothing qualifies
|
||||
$community = $on('comunidade') ? site_instagram($gym) : []; // tagged Instagram posts, [] when not configured
|
||||
$hero_img = $gym['hero_image'] !== '' ? $gym['hero_image'] : 'site/assets/img/home.jpg';
|
||||
|
||||
// ── Hero section ────────────────────────────────────────────────────────────────
|
||||
@@ -128,6 +129,47 @@ $gallery_h2 = 'Conhece as nossas instalações';
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php
|
||||
// ── Comunidade (Instagram) ──────────────────────────────────────────────────────
|
||||
// Latest public posts where the gym was tagged (functions_instagram.php), cached
|
||||
// with local thumbnails; each tile opens the post on Instagram.
|
||||
if ($community):
|
||||
?>
|
||||
<section id="comunidade" class="community-section" aria-labelledby="comunidade-title">
|
||||
<div class="container">
|
||||
<div class="row justify-content-md-center mb-4">
|
||||
<div class="col-lg-8">
|
||||
<div class="section-title text-center deco">
|
||||
<span class="section-eyebrow">Comunidade</span>
|
||||
<h2 id="comunidade-title">A nossa comunidade</h2>
|
||||
<p class="section-subtitle">Os treinos de quem nos identifica no Instagram.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="community-grid list-unstyled">
|
||||
<?php foreach ($community as $p):
|
||||
$cm_alt = trim(mb_strimwidth(preg_replace('/[[:space:]]+/u', ' ', $p['caption']), 0, 120, '…'));
|
||||
?>
|
||||
<li>
|
||||
<a class="community-post" href="<?= htmlspecialchars($p['permalink']) ?>" target="_blank" rel="noopener"
|
||||
aria-label="<?= htmlspecialchars('Publicação de @' . $p['username'] . ' no Instagram') ?>">
|
||||
<img src="<?= htmlspecialchars(base_url($p['image'])) ?>" alt="<?= htmlspecialchars($cm_alt) ?>" loading="lazy" decoding="async">
|
||||
<?php if ($p['type'] === 'VIDEO'): ?><i class="fas fa-play community-type" aria-hidden="true"></i>
|
||||
<?php elseif ($p['type'] === 'CAROUSEL_ALBUM'): ?><i class="far fa-clone community-type" aria-hidden="true"></i><?php endif; ?>
|
||||
<span class="community-user"><i class="fab fa-instagram" aria-hidden="true"></i> @<?= htmlspecialchars($p['username']) ?></span>
|
||||
</a>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
<?php if (!empty($info['instagram'])): ?>
|
||||
<p class="text-center mt-4 mb-0">
|
||||
<a class="btn btn-outline-dark" href="<?= htmlspecialchars($info['instagram']) ?>" target="_blank" rel="noopener"><i class="fab fa-instagram me-1"></i> Identifica-nos no Instagram</a>
|
||||
</p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php
|
||||
// ── Modalidades ─────────────────────────────────────────────────────────────────
|
||||
if ($modalidades):
|
||||
|
||||
Reference in new issue
Block a user