De multe ori ți se poate întâmpla să scrii un text, dar să nu ai în minte o imagine care să poată fi setată ca reprezentativă (sau nu ai timp și chef să cauți una care să poată fi folosită sau să-l rogi pe ChatGPT să-ți facă una).
În astfel de situatii ai 3 posibilităti:
- Lasi articolul făra imagine reprezentativă, dar îți strici aspectul vizual al blogului.
- Instalezi un plugin WordPress care să genereze una, dar de foarte multe ori se va întqmpla să nu genereze chiar ceea ce îti doresti.
- Adaugi o funcție în tema curentă care să facă acest lucru (acesta este motivul pentru care scriu articolul)
Tocmai am inclus în această temă personalizată o astfel de funcție, care să-mi genereze o imagine reprezentativă, deci trebuia să fac un articol pentru a o testa.
Funcția este aceasta:
/
<?php
/**
* Generează un SVG ca imagine reprezentativă fallback.
* - Fundal vibrant (gradient) determinist (aceeași postare => aceeași imagine)
* - Litere random din titlu, poziționate random, cu opacități diferite
* - Returnează Data URI ce poate fi pus direct în <img src="">
*/
if (!function_exists('grig_fallback_featured_svg_datauri')) {
function grig_fallback_featured_svg_datauri($post_id = null, $w = 1200, $h = 630) {
$post_id = $post_id ?: get_the_ID();
$post = get_post($post_id);
if (!$post) return '';
// Titlu (fallback la post_name dacă e gol)
$title = get_the_title($post_id);
if (!$title) $title = $post->post_name ?: 'Post';
// Seed determinist (aceeași postare => același "random")
$seed_str = $post_id . '|' . $post->post_date_gmt . '|' . $title;
$seed = abs(crc32($seed_str));
// PRNG simplu determinist
$rand = function($min, $max) use (&$seed) {
// LCG
$seed = (1103515245 * $seed + 12345) & 0x7fffffff;
return $min + ($seed % (($max - $min) + 1));
};
// Culori "vii" (paletă)
$palette = [
['#ff006e', '#8338ec'],
['#00f5d4', '#00bbf9'],
['#f15bb5', '#fee440'],
['#fb5607', '#ffbe0b'],
['#3a86ff', '#00f5d4'],
['#9b5de5', '#f15bb5'],
['#06d6a0', '#118ab2'],
['#ef476f', '#ffd166'],
];
$pair = $palette[$rand(0, count($palette)-1)];
$c1 = $pair[0];
$c2 = $pair[1];
// Alege litere din titlu (doar A-Z0-9), fără diacritice
$clean = remove_accents($title);
$clean = strtoupper($clean);
$clean = preg_replace('/[^A-Z0-9]+/u', '', $clean);
if (strlen($clean) < 3) $clean = 'BLOG';
// câte “glyph-uri” desenăm
$count = $rand(10, 16);
$texts = [];
for ($i=0; $i<$count; $i++) {
$ch = $clean[$rand(0, strlen($clean)-1)];
$x = $rand(20, $w - 20);
$y = $rand(60, $h - 20);
$size = $rand((int)($h*0.10), (int)($h*0.22)); // 10–22% din înălțime
$rot = $rand(-28, 28);
$op = $rand(18, 45) / 100; // 0.18–0.45
$blur = $rand(0, 1);
$texts[] =
'<text x="'.$x.'" y="'.$y.'" text-anchor="middle" '.
'font-family="Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial" '.
'font-weight="800" font-size="'.$size.'" '.
'fill="rgba(255,255,255,'.$op.')" '.
'transform="rotate('.$rot.' '.$x.' '.$y.')" '.
($blur ? 'filter="url(#soft)"' : '').
'>'.$ch.'</text>';
}
// Titlul mare jos (opțional; dacă vrei DOAR litere random, comentează blocul)
$title_display = esc_html($title);
$title_block =
'<foreignObject x="60" y="'.($h-210).'" width="'.($w-120).'" height="170">'.
'<div xmlns="http://www.w3.org/1999/xhtml" style="font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;'.
'color:white; font-weight:800; font-size:54px; line-height:1.1; text-shadow:0 10px 25px rgba(0,0,0,.25);'.
'display:block; overflow:hidden; max-height:170px;">'.
$title_display.
'</div>'.
'</foreignObject>';
$svg =
'<svg xmlns="http://www.w3.org/2000/svg" width="'.$w.'" height="'.$h.'" viewBox="0 0 '.$w.' '.$h.'">'.
'<defs>'.
'<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">'.
'<stop offset="0%" stop-color="'.$c1.'"/>'.
'<stop offset="100%" stop-color="'.$c2.'"/>'.
'</linearGradient>'.
'<filter id="soft" x="-20%" y="-20%" width="140%" height="140%">'.
'<feGaussianBlur stdDeviation="1.6" />'.
'</filter>'.
'</defs>'.
'<rect width="100%" height="100%" fill="url(#bg)"/>'.
// un strat subtil de “noise” fake (linii transparente)
'<g opacity="0.10">'.
'<path d="M0 '.($rand(40,120)).' C '.($w*0.3).' '.($rand(0,$h)).', '.($w*0.7).' '.($rand(0,$h)).', '.$w.' '.($rand(40,120)).'" stroke="#fff" stroke-width="3" fill="none"/>'.
'<path d="M0 '.($rand(240,360)).' C '.($w*0.3).' '.($rand(0,$h)).', '.($w*0.7).' '.($rand(0,$h)).', '.$w.' '.($rand(240,360)).'" stroke="#fff" stroke-width="3" fill="none"/>'.
'</g>'.
'<g>'.$title_block.'</g>'.
'<g>'.implode('', $texts).'</g>'.
'</svg>';
// Data URI (encode minimal)
$svg = preg_replace('/\s+/', ' ', $svg);
$data = 'data:image/svg+xml;charset=UTF-8,' . rawurlencode($svg);
return $data;
}
}
P.S.: Acum îmi dau seama că îmi lipseste un block pentru postarea unui cod PHP în articol
