• Tweet

• Tweet

Szperając w internecie natrafiłem na ciekawą stronę, na której przedstawiono miłą dla oka prezentację zdjęć – CSS Decorative Gallery. Wszystko czego potrzeba to dodanie odpowiedniego kodu w miejscu, gdzie pojawia się zdjęcie. Później pozostaje już jedynie zastosować odpowiednie wpisy w pliku styli i już można cieszyć się znacznie ładniejszym wyświetlaniem zdjęć. Wszystko super, tylko jak uzyskać taki efekt w WordPressie?

Przede wszystkim potrzebujemy plugin Image Caption Easy. Ale, żeby nie było zbyt łatwo będziemy musieli (raczej) zastosować drobne poprawki w pliku image-caption-easy.php
odszukujemy linie 104 i 105:

1
2
3

$to_replace_with = "<div class=\"imagecaptioneasy imagecaptioneasy_" . $top_of_page.$align . "\" style=\"width:" . $width . "px;\">" . $image_code . "<br style=\"clear:both\" /><span>" . $caption_text . "</span></div>";
 
			$html = preg_replace("/$image_code_escape/", "$to_replace_with", $html);

i zastępujemy je następującym wpisem:

1
2
3
4

if ($width > 30){
			$to_replace_with = "<div class=\"photo img\"><span></span>" . $image_code . "</div>";
			$html = preg_replace("/$image_code_escape/", "$to_replace_with", $html);
			}

Warunek (if) wykluczy podmianę obrazków mniejszych niż 30px, np kiedy mamy ustawioną zamianę emotikon na graficzne. Pozostałe modyfikacje dotyczą uzyskania struktury podobnej do tej, jaka jest potrzebna przy uzyskaniu efektów CSS Decorative Gallery.
Na koniec pozostaje ustawienie odpowiedniego stylu (w moim zastosowaniu):

.photo {
	position: relative;
	float: left;
}
.photo img {
	background: #fff;
	border: solid 1px #ccc;
	padding: 4px;
}
.photo span {
	width: 28px;
	height: 21px;
	display: block;
	position: absolute;
	top: -12px;
	left: 50%;
	background: url(img/pin.png) no-repeat;
}
.photo a {
	text-decoration: none; border:none;
}

I to tyle. Wystarczy cieszyć się ładną prezentacją zdjęć na stronie…