Hi moepstar, that’s an interesting question, I haven’t don this before but I can see how using the Slideshow title or description could come in handy sometimes.
You can avoid having the slideshow title transition by move it outside of the “meteor-slideshow” container, just above this line:
<div id="meteor-slideshow<?php echo $slideshow; ?>" class="meteor-slides <?php
Trick is though that get_the_term_list
won’t work outside the loop, at least as it is. Luckily each slideshow already has a “slideshow” variable attached to it which contains the slideshow’s slug if one has been set.
You can use this slug to get other info about that slideshow term like the name or description, even outside of the loop:
<?php // Use the slideshow slug to get the slideshow title and display it as a headline
if ( !empty( $slideshow ) ) {
$slideshow_term = get_term_by( 'slug', $slideshow, 'slideshow' );
$slideshow_name = $slideshow_term->name;
echo '<h5 class="meteor-title">' . $slideshow_name . '</h5>';
} ?>
In that example, I simplified your markup. I wouldn’t use the <center>
tag it is old and likely not supported by all modern browsers. Instead you should center it using CSS. I also removed the paragraph tag because the H5 tag is also a block level element and can be used the same way on it’s own; filling a whole line or having padding and margin like a paragraph.
You could use the class I added to the headline to target just those H5 tags and center the text and add any margins you need like this:
.meteor-title {
margin: 0 0 5px 0;
text-align: center;
}
One thing though, the slideshow title is outside of the slideshow container so if you need to float the whole slideshow or add a frame around it, you’d need to wrap the slideshow and title in another new container and style that.