Support ForumAdd an image in blog post preview – Support Forum

Add an image in blog post preview

codeKameleon — Thu, 12 Mar 2015 20:16:06 +0000

Hi,
Is it possible to add an image in the article preview ? The default display is :
article’s title(link to the article page) followed by the first lines of the article.

Can we add an image between them ? Thx

Reply To: Add an image in blog post preview

IshYoBoy — Fri, 13 Mar 2015 08:56:03 +0000

Hey,

Sure you can. You need to edit all post format files:

boldial/content-post-standard.php
boldial/content-post-audio.php
boldial/content-post-image.php
boldial/content-post-quote.php
...

boldial/content-post-standard.php

boldial/content-post-audio.php

boldial/content-post-image.php

boldial/content-post-quote.php

...

In them you will find the code for all available overview layouts:

– FullWidth
– Masonry
– classic

Edit the one you need updated and output the featured image.

P.S.: We recommend overriding these file using a child theme rather than editing them directly. More about child themes can be found here:

What is a child theme and how, but mainly why to use it?

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Add an image in blog post preview

codeKameleon — Wed, 18 Mar 2015 11:22:05 +0000

Sorry, i don’t get what i have to do in these files. I know it’s the Masonry layout i need to change but could you tell me which line is it , do i have something to add or remove ? What do you mean by outputing the featured image ? Thx

Reply To: Add an image in blog post preview

IshYoBoy — Wed, 18 Mar 2015 12:14:56 +0000

Hey,

could you please provide a link to your current blog to be 100% sure we’re providind feedback to what you really want to do.

Do your posts have featured image set in their settings (When you edit a post’s detail the image can be set in the right column at the complete bottom). The featured image is then used in the blog overview.

Like in here:

Masonry Grid Blog

Masonry Tiles Blog

What image would you like to add between the Article’s title and Article’s excerpt?

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Add an image in blog post preview

codeKameleon — Wed, 18 Mar 2015 12:27:15 +0000

https://kamilopardalicephalocampe.codekameleon.com/blog/

I already tried to use the featured image but it is displayed as a background in full width. What i would do is just add an image between the title and the few first lines of the article.

Like this :

Reply To: Add an image in blog post preview

IshYoBoy — Wed, 18 Mar 2015 12:54:37 +0000

Hey,

In your case this is not Masonry but Full-Width blog so you will have to edit the full-width part. In a standard post’s template as all your posts seem to be standard it’s:

// FULL_WIDTH
if ( 'fullwidth' == $blog_style ){

	$bg_style = ishyoboy_get_item_bg_style();

	?>
	<div id="post-<?php the_ID(); ?>" <?php post_class( 'wpb_row vc_row-fluid ish-row-notfull ish-row_section' . $color_data['bg_class'] . $color_data['text_class'] ); ?> <?php echo $bg_style; ?>>
		<?php if ( has_post_thumbnail() ) { echo '<div class="ish-overlay"></div>'; } ?>
		<div class="ish-vc_row_inner">

			<h2><a href="<?php the_permalink(); ?>"><i class="ish-icon-align-left"></i><?php the_title(); ?></a></h2>

			<?php echo ishyoboy_get_post_details() ?>

			<?php echo ishyoboy_get_blog_excerpt(); ?>

			<span class="ish-blog-post-links">
				<a class="ish-sc_button ish-color1" href="<?php comments_link(); ?>"><i class="ish-icon-chat"></i><?php comments_number('0', '1', '%'); ?></a>
				<?php ishyoboy_the_likes(); ?>
				<a class="ish-sc_button ish-color1" href="<?php the_permalink(); ?>"><?php _e( 'Read more', 'ishyoboy'); ?></a>
			</span>

		</div>
	</div>
	<?php

}

// FULL_WIDTH

if ( 'fullwidth' == $blog_style ){

$bg_style = ishyoboy_get_item_bg_style();

<div id="post- the_ID(); ?>" post_class( 'wpb_row vc_row-fluid ish-row-notfull ish-row_section' . $color_data['bg_class'] . $color_data['text_class'] ); ?> echo $bg_style; ?>>

if ( has_post_thumbnail() ) { echo '

'; } ?>

<h2><a href=" the_permalink(); ?>"><i class="ish-icon-align-left"></i> the_title(); ?></a></h2>

echo ishyoboy_get_post_details() ?>

echo ishyoboy_get_blog_excerpt(); ?>

<a class="ish-sc_button ish-color1" href=" comments_link(); ?>"><i class="ish-icon-chat"></i> comments_number('0', '1', '%'); ?></a>

ishyoboy_the_likes(); ?>

<a class="ish-sc_button ish-color1" href=" the_permalink(); ?>"> _e( 'Read more', 'ishyoboy'); ?></a>

</span>

</div>

<?php

}

Here is an example how you could change it to make use of the “Featured Image”:

// FULL_WIDTH
if ( 'fullwidth' == $blog_style ){

	$bg_style = ishyoboy_get_item_bg_style();

	?>
	<div id="post-<?php the_ID(); ?>" <?php post_class( 'wpb_row vc_row-fluid ish-row-notfull ish-row_section' . $color_data['bg_class'] . $color_data['text_class'] ); ?>>		
		<div class="ish-vc_row_inner">

			<h2><a href="<?php the_permalink(); ?>"><i class="ish-icon-align-left"></i><?php the_title(); ?></a></h2>
			
			<?php if ( has_post_thumbnail() ) { ?>
				<div class="ish-blog-post-media">
					<a href="<?php the_permalink(); ?>">
						<?php the_post_thumbnail('theme-large'); ?>
					</a>
					<?php the_post_thumbnail_caption(); ?>
				</div>
			<?php } ?>

			<?php echo ishyoboy_get_post_details() ?>

			<?php echo ishyoboy_get_blog_excerpt(); ?>

			<span class="ish-blog-post-links">
				<a class="ish-sc_button ish-color1" href="<?php comments_link(); ?>"><i class="ish-icon-chat"></i><?php comments_number('0', '1', '%'); ?></a>
				<?php ishyoboy_the_likes(); ?>
				<a class="ish-sc_button ish-color1" href="<?php the_permalink(); ?>"><?php _e( 'Read more', 'ishyoboy'); ?></a>
			</span>

		</div>
	</div>
	<?php
}

// FULL_WIDTH

if ( 'fullwidth' == $blog_style ){

$bg_style = ishyoboy_get_item_bg_style();

<div id="post- the_ID(); ?>" post_class( 'wpb_row vc_row-fluid ish-row-notfull ish-row_section' . $color_data['bg_class'] . $color_data['text_class'] ); ?>>

<h2><a href=" the_permalink(); ?>"><i class="ish-icon-align-left"></i> the_title(); ?></a></h2>

if ( has_post_thumbnail() ) { ?>

the_post_thumbnail('theme-large'); ?>

</a>

the_post_thumbnail_caption(); ?>

</div>

} ?>

echo ishyoboy_get_post_details() ?>

echo ishyoboy_get_blog_excerpt(); ?>

<a class="ish-sc_button ish-color1" href=" comments_link(); ?>"><i class="ish-icon-chat"></i> comments_number('0', '1', '%'); ?></a>

ishyoboy_the_likes(); ?>

<a class="ish-sc_button ish-color1" href=" the_permalink(); ?>"> _e( 'Read more', 'ishyoboy'); ?></a>

</span>

</div>

<?php

}

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market