Associating an image with a post in WordPress - wordpress

What's the best way to associate an image with a post in WordPress?
What I mean by that is when each post has a 'header' image which is not in the body of the post. You'd most likely use it to show a small image next to each post when they're listed somewhere.
I know you can use custom fields with posts, but are there any better ways of doing it?
Thanks in advance.

If you go the custom field route - in your template code you can save the value of the custom field to a variable and then echo it out to your image.
<?php $post_image = get_post_meta($post->ID, post_image, true); ?>
<?php if( $post_image != "" && isset($post_image) ) : ?>
<p><img src="<?php echo $post_image; ?>" alt="<?php echo $post_image; ?>" /></p>
<?php endif; ?>
<?php the_content('read more...'); ?>
The function the_content() may or may not be what you will end up using - for more control, you can try setting a new WP_Query() and then revamping the loop.

Not really any better way than custom fields, although you could always write out a unique class name containing the post ID on the container div and add the images via CSS each time you add a post. You'd end with a potentially huge CSS file though so I'd go for custom fields myself.

If you want a different image per post then use Customs Fields as suggested before - the only problem with that will be that Custom Fields are text fields and so you will have to upload your image and then paste the filename into your Custom Field. You could use the normal Add Image facility in the main post entry form but that will break up your workflow a bit as you will have to: upload the image in main post form, copy image url from HTML of form, remove image from form, paste URL into a custom field.
A bit of a pain!
If you want to use an image per category. Say, for example, you have a thumbnail for news items and a thumbnail for tutorials and so on. You could edit your WP theme template, check the category inside The Loop and show the relevant image from there.
The first option is a bit of a pain and the second requires some PHP coding.

A good way of associating an image with a post is to call the first image attached to that post in your template file.
I've elaborated a bit in this thread:
How would you recommend adding an image as a custom field in WordPress?

Related

How to add a custom field to my page header

Is there a way to add a custom field to change the image displayed in my web site's header?
I want the same imageto be displayed in every page, so I dont know how to make a general custom field instead of a field specific for each page.
<?php
$img = the_field('background_url');
?>
Add Options page for ACF with the help of below code:
if( function_exists('acf_add_options_page') ) {
acf_add_options_page();
}
and then assign options to acf field.
now you can access this common field with <?php the_field('logo', 'option'); ?>
If you are using ACF Pro then you can create an option page and create Header, Footer fields into that. check the below link.
https://www.advancedcustomfields.com/resources/options-page/
I'm assuming that the header image is loaded from the header.php file in your theme?
If you want the same background image on all pages you could set the default header image via the set_theme_mod function. The set_theme_mod is responsible for all modification values for the current theme. In this case you would want to set the header_image property.
Start with setting the default header_image for your theme in your themes functions.php file:
function theme_setup() {
set_theme_mod(‘header_image’, ‘http://yoursite.com/wp-content/uploads/yourimage.png’);
}
add_action('after_setup_theme', 'theme_setup');
Display the newly set header image in your theme file responsible for displaying your header (assumingly header.php):
<?php if ( get_header_image() ) : ?>
<div id="site-header">
<img alt="" src="<?php header_image(); ?>
</div>
<?php endif; ?>
If you want to be able to upload custom images from within the Customizer (Appearance > Header) in the wp admin section you could use the custom_header property, you'll find more information about it here:
Theme Handbook: Custom Headers
I found a way after reading ACF documentation, in order to make the custom field's scope global, I have to add the post/page ID on it:
$video_file = get_field('background_video',156);
Please install ACF plugin and you would easily get the image. While creating an image field there would be an option which name is Return Format, please select any of them and you would get results accordingly.
Image Array
Image URL
Image ID
For further please follow ACF official documentation.
AdvancedCustomField

How to add custom content in sidebar of each Wordpress post?

I want to integrate specific text (text, links, images) making reference to specific sentences of my blog post.
Is it possible to do it with code or using a plugin ?
I send you a sketch :
This is the sketch
That is common need and often Aside in WordPress is talked for it. There are WP plugins like Aside Widget, Custom Sidebars for ordinary needs. But if you need too much custom stuff like my website's "About this Article" sidebar widget - https://thecustomizewindows.com/2016/09/limitations-of-openvz-virtualization-to-guest-cloud-server-vps/ then it is better to use
Otto's this plugin to use PHP in text widget - https://wordpress.org/plugins/php-code-widget/ and use PHP. In my case, rest is PHP code like this on sidebar (I can use shortcode too) :
<?php if(is_single()) : ?>
<h3>About This Article</h3>
<strong>Title:</strong> <?php echo get_the_title(); ?><br />
Published on: <?php the_time('Y-m-d') ?>
<br />
...
// rest of the code
<?php endif; ?>
Obviously you can call post image thumbnail with WordPress function.
As you need specific text, you may think about combining Pull Quote Plugin or Aside Widget to mark the specific like and echo it with PHP.
As other options -- you can use CSS3 to automatically select first line, first paragraph, second sentence. You can use Javascript to conditionally mark.
Best possible customisation I saw is on BMJ's sidebars. They use Drupal, not WordPress. BMJ has beautiful sidebar -- (as example) - http://www.bmj.com/content/355/bmj.i4924 Drupal has description of the work - https://www.drupal.org/node/1557636 Sadly I lack idea about Drupal. I tried a lot behind using WordPress for academic purpose.

Wordpress Advanced Custom Field - Field Not Displaying

I am building an artist directory page which displays all the artist pages as thumbnails with captions.
I would then like it so that when you click on one of the thumbnails it takes you to that page and shows the various fields ACF.
However, it only shows the title and I cannot get it to display the bio field at all!
<h1><?php echo $post->post_title; ?></h1>
<div id="artist-bio">
<?php the_field('artist_bio'); ?>
</div>
first, it's a good practice to check if your fields have been set in the first place. You can test like this:
if (get_field('artist_bio') {
the_field('artist_bio');
} else {
echo "Artist bio has not been set";
}
If it's claiming that it hasn't been set, yet you're sure it is, then there's probably an issue with the loop. Are you inside the default loop, or are you running a custom query? In the latter case you would need to modify your command like so: the_field('artist_bio', $post->ID).

Trying to understand custom fields in WordPress

I'm trying to make my single.php page show more details about each project/item in a portfolio, with multiple larger image files that will display with captions to the right of the project description.
I'm thinking the best way to approach this would be to use the 'featured image' for the thumbnail display on the homepage which seems to be working now, but I've been trying to figure out Custom Fields to use for my other images (image1, image2, image3). I can't figure it out.
I go to "Enter new" under Custom Fields from the admin screen, enter image1 for the name. What goes in the Value field? How do I get it to work? I know I need to add some code to my single.php page... but what? And when/where do I upload the images themselves?
Any help would be greatly appreciated! I'm a little dense in the PHP department...
Have look at your single.php file. You will find the following lines, one near the top, the other lower down.
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
...
...
<?php endwhile; // end of the loop. ?>
Anything between these two lines will be applied over and over, once per blog post that happens to be displayed by that template file. So you should put your magic between those lines.
What you put there will be a mix of HTML and PHP. For instance, you might use this line:
<img src="<?php echo get_post_meta($post->ID, 'image1', true) ?>"/>
which combines
<img src=""/>
with
<?php echo get_post_meta($post->ID, 'image1', true) ?>
The PHP line looks up whatever value you have entered for the custom field named 'image1'. If you look at the HTML I used, you will see that this value is being placed inside the 'src' attribute. In other words, the value associated with 'image1' should be the url of that image.
You can expand upon this basic idea, but that's where your own creativity will have to come in.
[Is this not a repeated question?]

adding single.php page to wordpress or if condition for main page or post detail page

I use Barecity Theme for WordPress. i built everything, but now i need to add a single.php file to theme. now it displays all post content at homepage, I created a short_desc Custom Field. and I call it from code with;
<?php //get_post_meta($post->ID, 'short_desc', true); ?>
it is fine. but i need to display this short desc at home page listing, and the main content at details page. how can do that?
I appreciate helps!!
It sounds like what you are trying to do is show a custom field that you have set on a post on the index page (which lists all the posts).
To do that you'll need to modify index.php by adding your snippet where you would like to have the short description.
<?php echo get_post_meta($post->ID, 'short_desc', true); ?>
You need to use echo to display the results from the get_post_meta function.
Depending on how your posts are setup you can also use the More button when you write your posts. This will cut off your post at a certain point that you decide and only show that short part on the index and archive pages.
Another option would be to use
<?php the_excerpt(); ?>
Which shows the first 55 words (this can be adjusted though) of the post.
Hope that helps,
Paul

Resources