<?php
|
namespace JVBase;
|
|
use JVBase\meta\Meta;
|
use WP_User;
|
|
if (!defined('ABSPATH')) {
|
exit; // Exit if accessed directly
|
}
|
/**
|
* edmonton.ink Embed Code Generator
|
* Generates SEO-friendly embed codes for artists to place on their websites
|
*/
|
class EmbedGenerator
|
{
|
protected int $user_id;
|
protected int $profileID;
|
protected WP_User $user_data;
|
protected Meta $meta;
|
protected string $base_url = 'https://edmonton.ink';
|
protected string $badge_url;
|
|
/**
|
* Constructor
|
*
|
* @param int $user_id User ID to generate embed code for
|
*/
|
public function __construct(int $user_id)
|
{
|
$this->user_id = $user_id;
|
$this->profileID = get_user_meta($user_id, BASE . 'link', true);
|
$this->user_data = get_userdata($user_id);
|
|
$this->meta = Meta::forPost($this->profileID);
|
|
// Set badge URL - this would be your badge image path
|
$this->badge_url = JVB_URL . 'assets/images/badges/edmonton-ink-badge.png';
|
}
|
|
/**
|
* Get the HTML embed code
|
*
|
* @return string The HTML code for embedding
|
*/
|
public function getEmbedCode():string
|
{
|
$profile_url = get_permalink($this->profileID);
|
$display_name = $this->user_data->display_name;
|
$city = jvbArtistCity($this->profileID);
|
$type = jvbArtistType($this->profileID);
|
|
// Get artist's top styles for more precise microdata
|
$styles = $this->getArtistStyles();
|
$style_text = ! empty($styles) ? implode(', ', $styles) : '';
|
|
// Escape all values for safety
|
$profile_url = esc_url($profile_url);
|
$display_name = esc_html($display_name);
|
$badge_url = esc_url($this->badge_url);
|
$city = esc_html($city);
|
$type = esc_html($type);
|
$style_text = esc_html($style_text);
|
|
// Generate a unique ID for the container
|
$container_id = 'jvbnk-badge-' . $this->user_id;
|
|
// Legacy Tattoo Removal URL
|
$legacy_url = 'https://legacytattooremoval.ca';
|
|
// Build HTML with structured data for SEO
|
return <<<HTML
|
<!-- edmonton.ink Artist Badge - Start -->
|
<div id="$container_id" class="jvb-badge" style="max-width:200px; margin:12px auto; text-align:center;">
|
<a href="$profile_url" target="_blank" rel="noopener"
|
style="display:block; text-decoration:none; color:#1B1B1B; font-family:Arial, sans-serif;"
|
onclick="window.jvbTrackClick('$container_id')">
|
|
<div itemscope itemtype="https://schema.org/Person">
|
<meta itemprop="name" content="$display_name" />
|
<meta itemprop="jobTitle" content="$type" />
|
<meta itemprop="knowsAbout" content="$style_text" />
|
|
<div itemprop="location" itemscope itemtype="https://schema.org/Place">
|
<meta itemprop="name" content="$city" />
|
</div>
|
|
<img src="$badge_url" alt="$display_name - edmonton.ink Verified Artist"
|
style="max-width:100%; height:auto; border:0;"
|
itemprop="image" />
|
|
<div style="margin-top:5px; font-size:12px; line-height:1.4;">
|
<strong itemprop="name">$display_name</strong><br>
|
<span>$type in $city</span><br>
|
<span style="color:#FF0080;">edmonton.ink Verified</span>
|
</div>
|
</div>
|
</a>
|
|
<div style="margin-top:4px; padding-top:4px; border-top:1px dotted #ddd; font-size:10px; color:#666;">
|
<span>Powered by </span>
|
<a href="$legacy_url" target="_blank" rel="noopener" style="color:#FF0080; text-decoration:none; font-weight:bold;">
|
Legacy Tattoo Removal
|
</a>
|
</div>
|
|
<script>
|
// Simple analytics tracking
|
if (!window.jvbTrackClick) {
|
window.jvbTrackClick = function(id) {
|
if (navigator.sendBeacon) {
|
navigator.sendBeacon('https://edmonton.ink/badge-click',
|
JSON.stringify({id: id, ts: new Date().getTime()})
|
);
|
}
|
}
|
}
|
</script>
|
</div>
|
<!-- edmonton.ink Artist Badge - End -->
|
HTML;
|
}
|
|
/**
|
* Get a more compact embed code (just image + link)
|
*
|
* @return string The HTML code for minimal embedding
|
*/
|
public function getMinimalEmbedCode():string
|
{
|
$profile_url = esc_url(get_permalink($this->profileID));
|
$display_name = esc_html($this->user_data->display_name);
|
$badge_url = esc_url($this->badge_url);
|
$container_id = 'jvb-badge' . $this->user_id;
|
$legacy_url = 'https://legacytattooremoval.ca';
|
|
return <<<HTML
|
<!-- edmonton.ink Artist Badge - Start -->
|
<div id="$container_id" style="max-width:150px; text-align:center;">
|
<a href="$profile_url" target="_blank" rel="noopener"
|
onclick="window.jvbTrackClick('$container_id')">
|
<img src="$badge_url" alt="$display_name - edmonton.ink Verified Artist"
|
style="max-width:100%; height:auto; border:0;" />
|
</a>
|
<div style="margin-top:2px; font-size:9px; color:#666;">
|
<a href="$legacy_url" target="_blank" rel="noopener" style="color:#FF0080; text-decoration:none;">
|
Legacy Tattoo Removal
|
</a>
|
</div>
|
<script>
|
if (!window.jvbTrackClick) {
|
window.jvbTrackClick = function(id) {
|
if (navigator.sendBeacon) {
|
navigator.sendBeacon('https://edmonton.ink/badge-click',
|
JSON.stringify({id: id, ts: new Date().getTime()})
|
);
|
}
|
}
|
}
|
</script>
|
</div>
|
<!-- edmonton.ink Artist Badge - End -->
|
HTML;
|
}
|
|
/**
|
* Get the artist's top styles
|
*
|
* @return array Array of style names
|
*/
|
protected function getArtistStyles():array
|
{
|
$styles = [];
|
$top_styles = $this->meta->get('top_style');
|
|
if (!empty($top_styles)) {
|
$style_ids = explode(',', $top_styles);
|
foreach ($style_ids as $style_id) {
|
$term = get_term((int) $style_id, BASE . 'style');
|
if ($term && !is_wp_error($term)) {
|
$styles[] = html_entity_decode($term->name);
|
}
|
}
|
}
|
return $styles;
|
}
|
|
/**
|
* Get image-only embed code with embedded backlinks
|
*
|
* @return string The HTML code for image-only embedding
|
*/
|
public function getImageOnlyEmbedCode():string
|
{
|
$profile_url = esc_url(get_permalink($this->profileID));
|
$display_name = esc_html($this->user_data->display_name);
|
$badge_url = esc_url($this->badge_url);
|
$container_id = 'jvb-badge-img-' . $this->user_id;
|
$legacy_url = 'https://legacytattooremoval.ca';
|
|
return <<<HTML
|
<!-- edmonton.ink Artist Badge - Start -->
|
<div id="$container_id" style="display:inline-block;">
|
<a href="$profile_url" target="_blank" rel="noopener"
|
style="display:inline-block;"
|
onclick="window.jvbTrackClick('$container_id')">
|
<img src="$badge_url" alt="$display_name - edmonton.ink Verified Artist | Legacy Tattoo Removal"
|
style="max-width:100%; height:auto; border:0;"
|
usemap="#edmonton-ink-map-$container_id" />
|
</a>
|
|
<map name="edmonton-ink-map-$container_id">
|
<!-- Bottom area links to Legacy Tattoo Removal -->
|
<area shape="rect" coords="20,155,300,190" href="$legacy_url" alt="Legacy Tattoo Removal" target="_blank" rel="noopener">
|
</map>
|
|
<script>
|
if (!window.jvbTrackClick) {
|
window.jvbTrackClick = function(id) {
|
if (navigator.sendBeacon) {
|
navigator.sendBeacon('https://edmonton.ink/badge-click',
|
JSON.stringify({id: id, ts: new Date().getTime()})
|
);
|
}
|
}
|
}
|
</script>
|
</div>
|
<!-- edmonton.ink Artist Badge - End -->
|
HTML;
|
}
|
|
/**
|
* Generate the embed code display with preview and copy functionality
|
*
|
* @return string HTML for the embed code UI component
|
*/
|
public function generateUIComponent():string
|
{
|
$embed_code = htmlspecialchars($this->getEmbedCode(), ENT_QUOTES, 'UTF-8');
|
$minimal_code = htmlspecialchars($this->getMinimalEmbedCode(), ENT_QUOTES, 'UTF-8');
|
$image_only_code = htmlspecialchars($this->getImageOnlyEmbedCode(), ENT_QUOTES, 'UTF-8');
|
$preview = $this->getEmbedCode();
|
|
return <<<HTML
|
<div class="jvb-embed-code-container">
|
<h3>Embed Code for Your Website</h3>
|
<p>Copy this code to your website to show your edmonton.ink verified status and link back to your profile.</p>
|
|
<div class="jvb-embed-tabs">
|
<button class="jvb-tab-btn active" data-tab="standard">Standard</button>
|
<button class="jvb-tab-btn" data-tab="minimal">Minimal</button>
|
<button class="jvb-tab-btn" data-tab="image-only">Image Only</button>
|
</div>
|
|
<div class="jvb-tab-content active" data-tab="standard">
|
<div class="jvb-code-preview">
|
$preview
|
</div>
|
|
<div class="jvb-code-block">
|
<textarea readonly class="jvb-embed-textarea">$embed_code</textarea>
|
<button class="jvb-copy-btn" data-target="standard">Copy Code</button>
|
</div>
|
</div>
|
|
<div class="jvb-tab-content" data-tab="minimal">
|
<div class="jvb-code-preview">
|
{$this->getMinimalEmbedCode()}
|
</div>
|
|
<div class="jvb-code-block">
|
<textarea readonly class="jvb-embed-textarea">$minimal_code</textarea>
|
<button class="jvb-copy-btn" data-target="minimal">Copy Code</button>
|
</div>
|
</div>
|
|
<div class="jvb-tab-content" data-tab="image-only">
|
<div class="jvb-code-preview">
|
{$this->getImageOnlyEmbedCode()}
|
</div>
|
|
<div class="jvb-code-block">
|
<textarea readonly class="jvb-embed-textarea">$image_only_code</textarea>
|
<button class="jvb-copy-btn" data-target="image-only">Copy Code</button>
|
</div>
|
<p class="jvb-note" style="font-size:13px; color:#666; margin-top:8px;">
|
<em>Note: This image contains clickable areas - the badge links to your edmonton.ink profile,
|
while the bottom area links to Legacy Tattoo Removal.</em>
|
</p>
|
</div>
|
|
<div class="jvb-embed-notice">
|
<p><strong>Pro Tips:</strong></p>
|
<ul>
|
<li>Add this badge to your footer or about page for the best SEO benefit</li>
|
<li>The badge helps customers verify your edmonton.ink profile authenticity</li>
|
<li>This is great for both your website SEO and edmonton.ink's visibility</li>
|
</ul>
|
</div>
|
</div>
|
HTML;
|
}
|
}
|
