Adding the "Figure" code to the top of pages and posts

Travelify
1

Hi there,

Just on the off chance you are bored and looking for something to think about on Christmas Day…

The web site I am using your excellent theme on is : http://www.visitkyushu.org/

I’ve found myself with some time at work to come back to our site and try and improve the sites content etc… cos I’m lazy I haven’t put much nice/useful content into the site… :slight_smile:

Anyway, I’m going to try and work out how to add the “figure” code that you have at the top of the posts when they are listed.
(eg)https://colorlib.com/travelify/

To the top of a regular page and an open post.

Example:

For a page…
<div id=“primary” class=“no-margin-left”>
<div id=“content”><section id=“post-7986” class=“post-7986 page type-page status-publish hentry en-US”>
<article>
<header class=“entry-header”>
<h2 class=“entry-title”>Fukuoka </h2><!-- .entry-title --></header>

Between <article> and <header class=“entry-header”> I’d like to have each page or posts featured image be at the top of each page and post. Like the way you use the <figure> code below.

<figure class=“post-featured-image”></figure>

Just so as I can stop using sliders and have a better looking image at the top of each page/post.

If you are at a loose end please help me out! :slight_smile:
I’m going to try and figure it out, but it’ll take me a while. If I get anywhere with it I’ll post it back here as it might be useful to someone else.

2

I’m thinking that the code that needs to be changed is in the “travelify_main_container” function.

Speaking to myself as all other sensible people are on holiday on Christmas day.

3

So I’ve found the functions file content_extensions.php

There are 7 different functions:

travelify_theloop_for_archive

travelify_theloop_for_page

travelify_theloop_for_single

travelify_theloop_for_search

travelify_theloop_for_template_blog_image_large

travelify_theloop_for_template_blog_image_medium

travelify_theloop_for_template_blog_full_content

Do you know which of the above functions is run on this page?
https://colorlib.com/travelify/blog-large-image/
(I’m guessing travelify_theloop_for_template_blog_image_large)

https://colorlib.com/travelify/blog-full-content/
(I’m guessing travelify_theloop_for_template_blog_full_content)

https://colorlib.com/travelify/category/miami/
(Not sure…)

I’m kindof answering my own questions as I go along.
By the way, your code is very easy to follow, well done. :slight_smile:

4

@kennym

This is code used for featured images in blog page:

<?php
if( has_post_thumbnail() ) {
$image = '';
		$title_attribute = apply_filters( 'the_title', get_the_title( $post->ID ) );
		$image .= '<figure class="post-featured-image">';
	$image .= '<a href="' . get_permalink() . '" title="'.the_title( '', '', false ).'">';
	$image .= get_the_post_thumbnail( $post->ID, 'featured', array( 'title' => esc_attr( $title_attribute ), 'alt' => esc_attr( $title_attribute ) ) ).'</a>';
	$image .= '</figure>';
	echo $image;
}
?>

You can add it anywhere you want, even on your static pages. For this you need to add above mentioned code inside travelify_theloop_for_page function on the same content-extensions.php file. I think you might want to add featured images above this code

			<header class="entry-header">
    			<h2 class="entry-title">
    				<?php the_title(); ?>
    			</h2><!-- .entry-title -->
  			</header>

Just play around to see what works for you.

Let me know if this is what you were looking for.