Seiperi Fyn-Sydney
asked 9 years ago

Is there a way of using featured image for only categories on the page but not using it in the main slider. Of cos at times I want to use it in the main slider but there are some news items that I don’t see as necessary for the the slider but should be on the page with a thumbnail
This is important to me because with the featured image comes thumbnail. 
Please treat as urgent.
 
Kind regards
 

nobita
replied 9 years ago

hi there, i'm a little bit confuse about your question , don't know what it really means. but if you want to use the featured image you can use this code : get_the_post_thumbnail();
It'll get the featured image of a post.you can read more at :https://codex.wordpress.org/Function_Reference/get_the_post_thumbnail

Seiperi Fyn-Sydney
replied 9 years ago

Let me rephrase. From my understanding of the DWFOCUS Theme, featured images are used primary with the home page slider but I want publish a new article and I don’t want the article to appear on the home page slider but still appear on the home page but this time with only with thumbnail. Take a look at this story “The Lagos street carnivals are here again” on my website (www.pearl.com.ng) home page. You would notice that featured image was not used on the story “The Lagos street carnivals are here again” at the time of publish because we didn’t want the story to appear on the home page slider but some where still on the home page because of that we lost the opportunity of getting it a thumbnail. So, HOW DO WE GET A THUMBNAIL FOR A NEW A POST THAT WE DON’T WANT TO APPEAR ON THE HOME PAGE SLIDER?Please treat urgent.Regards

nobita
replied 9 years ago

in my opinion, i think that is a feature of DW-focus theme (News Slider widget) , so if you don't want it to appear on slider but still got thumbnail is quite impossible then .Some how , there is another way to resolve this problem but it's quite complex : add a metabox in back-end to upload a media or picture that you want it to be a thumbnail.After that , you can save it to a post_meta and then use it as a post's thumbnail ( because the query out of it differ than the thumbnail ). You can use that picture to appear at other widget.Read more at here :

Seiperi Fyn-Sydney
replied 9 years ago

Great. Can you guide me in implementing the metabox in the necessary backend areas?….Merry Christmas

4 Answers
Allen
answered 9 years ago

Hi there here is the solution for your problem then 😀 It’s quite long so please read carefully 🙂

1st step: In this step , we need to create a metabox in post back-end so you can do like this :
Open functions.php and put these codes to the bottom 😀

/*-----------------------------------------------------------------------------------*/
/* Metabox
/*-----------------------------------------------------------------------------------*/
if( !function_exists('dw_wall_image_post_enqueue_script') ){
function dw_wall_image_post_enqueue_script() {
wp_enqueue_script( 'upload-image-script', get_template_directory_uri() . '/assets/js/upload_image.js' );
}
add_action( 'admin_enqueue_scripts', 'dw_wall_image_post_enqueue_script' );
}
if( !function_exists('dw_wall_post_image_metabox') ){
function dw_wall_post_image_metabox(){
add_meta_box( 'dw_wall_custom_image_upload', 'Image upload', 'dw_wall_image_post', 'post', 'normal' );
}
add_action( 'admin_init', 'dw_wall_post_image_metabox' );
}
if( !function_exists('dw_wall_image_post') ){
function dw_wall_image_post( $pos0,$boxt ){
wp_enqueue_media();
?>
<h4>Media</h4>
<input class="image_container" id="dw_wall_custom_image_upload" name="dw_wall_custom_image_upload" value="<?php echo get_post_meta(get_the_ID(), '_dw_wall_custom_image_url', true);?>">
<button class="upload_image_button" >Upload</button>
<?php
}
}
if( !function_exists('dw_wall_image_post_save') ){
add_action( 'save_post', 'dw_wall_image_post_save' );
function dw_wall_image_post_save( $post_id ){
if( ! empty( $_POST['dw_wall_custom_image_upload'] ) ){
update_post_meta( $post_id, '_dw_wall_custom_image_url', $_POST['dw_wall_custom_image_upload'] );
} else {
delete_post_meta( $post_id, '_dw_wall_custom_image_url' );
}
}
}


Step 2 : Go to assets -> js -> create a new js file name : upload_image.js  ( this js file to enable upload media in back-end custom field )
And as you see in “Enqueue script” code to make the js work in back end) 
In this js file , you use this code : 

 jQuery(function($){
var file_frame;
jQuery('.upload_image_button').live('click', function( event ){

event.preventDefault();

// If the media frame already exists, reopen it.
if ( file_frame ) {
file_frame.open();

return;
}

// Create the media frame.
file_frame = wp.media.frames.file_frame = wp.media({
title: jQuery( this ).data( 'uploader_title' ),
button: {
text: jQuery( this ).data( 'uploader_button_text' ),
},
multiple: false // Set to true to allow multiple files to be selected
});
var current = 0;
// When an image is selected, run a callback.
file_frame.on( 'select', function() {

attachment = file_frame.state().get('selection').first().toJSON();
var url = attachment.url;
$('.image_container').val(url);
});

// Finally, open the modal
file_frame.open();
});
});

Final step : Now you will see the box in back-end post like this : 
http://imgur.com/WLrINAn.
The link of your image will store in a post meta , you can use that picture at any where you want by use this :

<img src="<?php echo get_post_meta(get_the_ID(), '_dw_wall_custom_image_url', true); ?>">

And in single post , or widget , just use that picture instead of thumbnail , you will have that picture appear replace the thumbnail therefor , that post will not show on the slider.. it’s will be lots of work to do if you want to custom the theme as you want :). Best regards !

Seiperi Fyn-Sydney
replied 9 years ago

Thanks so far. I have implemented STEP 1. On STEP 2, I can’t find assets -> js -> . How do I get there?. That is why I am so far. Regards

nobita
replied 9 years ago

I mean in the theme folder, go to assets –> js
It's like this : dw-focus/assets/js
then you should create a new Javascript File : name it : upload_image.js
and then put that code in step 2 to it 🙂

Btw : this step 2 just to enable the media upload for that upload button 😀 with the step 1 , you can save content in that text box at backend :), you can push image link in that box , and get it out by using the code:
echo get_post_meta(get_the_ID(), '_dw_wall_custom_image_url', true);

If you have more trouble , just ask , i'll try my best to help you 😀

DominicStaff
answered 9 years ago

@nobita , thanks for your help, that’s awesome, my buddy 🙂
@Seiperi Fyn-Sydne, please refer to the solution that @nobita gave above. If there is anything else you need to assist, don’t hesitate to contact us. We are ready to support you.
 
 
 

Seiperi Fyn-Sydney
replied 9 years ago

I have implemented Steps 1 and 2. I FTPed the file to the appropriate folder and location.Thanks @Nobita, @DominicNow, I decided to test it using the story on the home page – The Interview Movie Sells Out In U.S (http://pearl.com.ng/2014/12/the-interview-movie-sells-out-in-u-s/) but the thumbnail didn’t show in the home pageBelow is what the post page looked likehttp://prntscr.com/5ldju6Thanks once more far. I really appreciate all your effortsRegards

Allen
answered 9 years ago

yes, it’s like that , now the picture of a post will store in a post meta. But it’s not the thumbnail, just a picture then. The using of it depends on you, that’s why i mean : ” it’s will be lots of work to do if you want to custom the theme as you want “. You want it to appear at home page , you need to add some code to the widgets you need ( inc->widgets ), this is not the thumbnails , so to call it you have to use
get_post_meta(get_the_ID(), ‘_dw_wall_custom_image_url’, true);
Go to the widget you need , use it ( but not use it in the widget that make the slider ). It’s a bit complex thou 🙂
This is an example for latest news: You can go to widget –> dw-focus-lastest-news.php
line 38 -> 53 , replace like this :
 

 <?php
if( has_post_thumbnail( get_the_ID() ) || get_post_meta(get_the_ID(), '_dw_wall_custom_image_url', true) ) {
$class = ' has-thumbnail';
}
?>
<article id="post-<?php the_ID(); ?>" <?php post_class($class); ?> >
<?php if( has_post_thumbnail() || get_post_meta(get_the_ID(), '_dw_wall_custom_image_url', true) ) : ?>
<div class="entry-thumbnail">
<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'dw_focus' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark">

<?php if ( has_post_format('Video') || has_post_format('Audio') || has_post_format('Gallery')) : ?>
<?php echo dw_focus_post_format_icons(); ?>
<?php endif ?>

<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail('medium');
} elseif ( get_post_meta(get_the_ID(), '_dw_wall_custom_image_url', true) ) {
?>
<img src="<?php echo get_post_meta(get_the_ID(), '_dw_wall_custom_image_url', true); ?>">
<?php
}

?>
</a>
Seiperi Fyn-Sydney
replied 9 years ago

I just added the specified code into dw-focus-lastest-news.php between line 38 – 53, yet I didn’t see the thumbnail in the home page in the story The Interview Movie Sells Out In U.S ( Under News). Regards

nobita
replied 9 years ago

Oops ,sorry 😀 that's just for the lastest news widget 🙂 , for categories widget then : you can open:Inc -> widget -> dw_focus_categories.php :Line 239 –> 247 : replace
$i = 0;
if( $i == 0 ){ $posts->the_post();
$i++;
$post_class = '';
if(has_post_thumbnail() || get_post_meta(get_the_ID(), '_dw_wall_custom_image_url', true) ) $post_class = 'has-thumbnail';
?>
<article >
<a href="" title="" rel="bookmark">
<?php if( has_post_thumbnail( get_the_ID() ) ) { the_post_thumbnail('thumbnail');
} elseif ( get_post_meta(get_the_ID(), '_dw_wall_custom_image_url', true) ) { ?> <img src=" <?php echo get_post_meta(get_the_ID(), '_dw_wall_custom_image_url', true); ?> ">
<?php } ?>
</a>

nobita
replied 9 years ago

BTW this just for full width option.

Seiperi Fyn-Sydney
replied 9 years ago

Please verify the above code. In my dreamweaver development environment. It tells me that there is an error on a particular line and also observed that ; is missing after $i++Regards

nobita
replied 9 years ago

sr , it’s only thing that missing in that code 😀

Seiperi Fyn-Sydney
replied 9 years ago

The line numbering you specified was not the same in my dreamweaver though very close and also, I keep getting getting the error message as well. I have attached a photo image http://prntscr.com/5m5snr      . Please confirm or attached a photo showing specified area. Thank so so much

nobita
replied 9 years ago

Seiperi Fyn-Sydney
replied 9 years ago

Hello Long time. i keep error message while trying to implement the changes. This is what i did…$i = 0;if( $i == 0 ){ $posts->the_post();$i++; $post_class = ”; if(has_post_thumbnail() || get_post_meta(get_the_ID(), ‘_dw_wall_custom_image_url’, true) ) $post_class = ‘has-thumbnail’;?> <article > <a href="” title=”” rel=”bookmark”><?php if( has_post_thumbnail( get_the_ID() ) ) { the_post_thumbnail(‘thumbnail’);} elseif ( get_post_meta(get_the_ID(), ‘_dw_wall_custom_image_url’, true) ) { ?> <img src=" “> <?php } ?> On the contrary I have sent email to hi@ and [email protected] with the exact file dw-focus-categories.php. Pls edit from your end and send it back .Kind regards

DominicStaff
answered 9 years ago

I have helped you change the file, you can download new file here: https://www.dropbox.com/s/m05rjeyq5et2jr7/dw-focus-categories.php?dl=0
Or you can download from your email. 
If you still face there issue, you can send me username & password of your site (via private answer) for further checking.
Hope this helps !

Seiperi Fyn-Sydney
replied 9 years ago

Thanks Dominic for all your assistance but the script didn’t work rather it knocked off the home page when I uploaded it. Luckily for me I had an old backup on my pc which I used to restore the website. If I may ask, where is my lovely Nobita? Hope you understand What I really want to achieve? I have sent my ftp info to your email. Regards

nobita
replied 9 years ago

@Seiperi: Hi there , sorry for late reply 🙂 ,
i try to upload the : dw-focus-categories.php to mediafire,
you can verify the code from line 237 – 258 or you can download the file and replace it 🙂
Here is the link :

Seiperi Fyn-Sydney
replied 9 years ago

Thanks @Nobita it worked but there is one thing, the SIZE. The size of the image/picture need to be resized to conform with other images on the home. For example the images of the stories 100 days: Gen Adebayo Applauds Fayose’s Achievements (News) http://imgur.com/pPJCD0J,bWfazJx and Buhari;s daughter, Zahra Buhari deletes twitter account days after becoming ‘twitfamous (Entertainment) http://imgur.com/pPJCD0J,bWfazJx#1 both on the home page came out with their original sizes. This puts disfigures the beauty of the entire design. Please reduce the original size for the home here. Thanks so so much for all the lovely support once more. Hope to hear from you. Kind Regards

nobita
replied 9 years ago

@Seiperi: Hi there 🙂 to resolve that problem i have to modify some code in dw-focus-categories at line 248–> 255 , or you can download this to replace

Seiperi Fyn-Sydney
replied 9 years ago

@Nobita… Thanks so so much. Bless your soul. It worked perfectly. I have tested it.

Seiperi Fyn-Sydney
replied 9 years ago

@Nobita… The news and entertainment category is fine as shown here (http://imgur.com/7433sGV,Ky5bmnd) but the Politics category shown here (http://imgur.com/7433sGV,Ky5bmnd#1) I think is missing some CSS. The photo in the story Lagos cancels monthly sanitation for PVCs is not there. Please see to it. Kind regards

nobita
replied 9 years ago

Hi 🙂 , just comeback after my weekend, about the question, i see why : as i said , it's just for full width option , the 2nd picture is in 3-columns option in customize 😀 i need to modify a bit 😀
Try replace with this link : http://www.mediafire.com/view/zhn2pufp0pnb4fh/dw-focus-categories.php

Seiperi Fyn-Sydney
replied 9 years ago

It worked. Thanks. The only problem now is the width which I think might be a CSS issue. Take a look at political story in the link here http://imgur.com/VlpN2yk

Seiperi Fyn-Sydney
replied 9 years ago

This link http://imgur.com/YPWm9Rg also explains the same issue. Regards

Seiperi Fyn-Sydney
replied 9 years ago

You might have to look into this CSS again. It worked fine but it distorted the image of a recent post with featured image see before(http://imgur.com/NlcQwgM,geeixDZ,BauQ51v#0; http://imgur.com/NlcQwgM,geeixDZ,BauQ51v#1; http://imgur.com/NlcQwgM,geeixDZ,BauQ51v#2)….. See After with new CSS addition (http://imgur.com/PXivU3x,I8ouh62,BhSiSRl#0; http://imgur.com/PXivU3x,I8ouh62,BhSiSRl#1; http://imgur.com/PXivU3x,I8ouh62,BhSiSRl#2)…. Thank you so much. Regards

Dominic Staff
replied 9 years ago

Please remove the css code then restore your Username/password that you sent me previous. We will help you resolve this issue.

Seiperi Fyn-Sydney
replied 9 years ago

I have removed the css and also just sent you email….Thanks Dominic

Dominic Staff
replied 9 years ago

I have helped you resolve this issue. Regarding image size, You need upload the image size 770x400px.

Seiperi Fyn-Sydney
replied 9 years ago

what do you mean by upload image size? Pls explain. Also that the image didn’t show here (http://imgur.com/QFVxjAh) @Nobita added an upload link for post that would not be using Featured Image ie the story or post is not supposed to appear on the main slider on the home page. It has been working well until now. That was the main thing @Nobita has been working on. Pls see to it. Thanks…..Do you have wordpress themes i can use for Church websites and a Property Company?… Kind regards

Seiperi Fyn-Sydney
replied 9 years ago

I think it worked fine. Will test for a while and get back to you? Still interested in the image size thing and the new themes for Churches and property firm

Seiperi Fyn-Sydney
replied 9 years ago

@Dominic. I put posted a story titled “UAE Introduces Strict Visa Age Restriction For Nigerians Travelling To Dubai” and made it stick to the home page but the thumbnail is not showing, http://imgur.com/jBdpyV1 . Please see to it. Thanks for all the support. Regards

nobita
replied 9 years ago

Hi Seiperi 🙂 , i think it not work be cause the widget you use here is not categories widget , It’s Recent post widget , so you need to modify in : \inc\widgets\dw-focus-recent-posts.php. Glad!

Seiperi Fyn-Sydney
replied 9 years ago

Ok. So can you give what need to be added and at what point/place. Regards

Powered by DW Question & Answer Pro