How would you recommend adding an image as a custom field in WordPress? - wordpress

I need to add an image to each page in WordPress.
I don't wish to insert it using the WYSIWYG editor, I just need the url as a custom field, which I later use in the template.
I tried using the CFI plugin (Custom Field Images), and I hacked my way into getting it to work with the rest of my plugins, but then I moved the site to the production server and CFI just didn't work for some reason.
I can't seem to find any other plugin that just lets you pick an image from the library and add it as a custom field.
I've downgraded to the point where I'm willing to manually enter all the URLs into each and every page. but before I do, I thought I'd check here.
Can anyone tell me what's the easiest, best way to add images as custom fields in WordPress (2.7.1 if it matters)?

In our WordPress template, each post generally only has one image 'attached', which is displayed outside the posts' (textual) content.
I simply upload the file using the edit posts' media uploader, never insert it into the post like JoshJordan above, then retrieve the image using a bit of code in the right place in my template file.
This would also work if you're using more than one image in your post, eg. in your post content. As long as you keep the image used as the 'main' post image as the first image (remember you can re-order images in your posts' image library by dragging them up and down), you're easily able to call it anywhere in your template file by using something like this:
<?php
$img_size = 'thumbnail'; // use thumbnail, medium, large, original
$img_id = $wpdb->get_var("SELECT ID FROM $wpdb->posts where post_parent= $post->ID and (post_mime_type = 'image/jpeg' OR post_mime_type = 'image/gif') and post_type = 'attachment'");
$img_array = wp_get_attachment_image_src($img_id,$img_size,false);
echo '<img src="'.$img_array[0].'"' title="'.get_the_title().'" />';
?>
No need for copying and pasting image urls.

The template I have uses a manually-entered custom field for the splash image of each post. When I'm done writing my article, I upload an image, copy its URL from the upload tool, never insert it into my post, and then paste that URL into the "Image" custom field. Simple as pie and takes only seconds. Insignificant compared to the amount of time it takes me to write an article.

You can use the custom key value fields on posts as well. let's say you always give your images the key 'thumb'. you can then use this code to output them in your post as a thumbnail:
<?php
$values = get_post_custom_values("thumb");
echo “<img src=\”$values[0]\” class=\”thumb\”></a>”; ?>

Consider using Flutter it's a bit tricky to figure out at first, and has many really useful featured, including EIP (edit in place), and image handling.
After installing the plugin create a new "Write Panel", you'll figure it out from there. The plugin provides you with a rather intuitive GUI, which includes an image uploader. The template tags are very easy to use, I believe it's something like
<?php echo get_image('name_of_field'); ?>
I just had to build a site for a client that needed the same feature, I ended up using Flutter.

Related

How to get a WordPress template file to insert different images based on the current page?

I have a number of pages (100) which are all build individually in a visual editor (DIVI). They each have a set of 10-15 different images on, inserted into an identical 'wrapper'. Other than the images, the pages are identical - This was my first website and so I knew no better than this approach when I began. As I now understand, I could use a custom page template for these pages to allow scalability/re-design with much greater ease.
I understand how a template.php page could be created that pulls necessary page metadata to populate the title/subheadings etc for each page. I am thinking of writing a for loop to insert each image for the page into the repeating 'wrapper'. However, I am not sure how the template would know which images to pass into this loop based on the page visited?
I had a few thoughts on how this could be done (I am very inexperienced):
a) Re-structure my wp-uploads folder to match my sitemap and get the template to insert all images in the path that matches the slug
b) Upload all images for each page to the page in the back-end (not sure if this is possible) and get the template to insert all images associated with the page in question
c) Get the template to loop through a database table containing all of the image names matched to the page id on which they should be found and only insert those that match the current page id
If this changes anything, all 100 pages are child-pages of pageX and their slug begins with a common word. eg:
mysite.com/pageX/commonword-page1/
mysite.com/pageX/commonword-page2/
Since you have so many pages, I wouldn't use an if statement. The best way to handle this would be to use Advanced Custom Fields and set up an image field to show on the pages post type. Then, in your code, call the custom field and that way every page dynamically show their respective image. You can find ACF in the Plugins repository on your WordPress site or download it directly from their website.
Here is the image field documentation:
https://www.advancedcustomfields.com/resources/image/
The cleanest way is to set the field to use the URL of the image. Here is what would go in your code:
<?php if( get_field('field_slug') ): ?>
<img src="<?php the_field('field_slug'); ?>" />
<?php endif; ?>

Place an Edit Button on the view node page in Drupal 7

I don't use the Drupal Tabs because they interfere with my CSS but I need the functionality of the Edit tab to be on that screen so that a user can edit the node after reviewing it.
Any ideas on how to do this? Functions? tpl placement? Thanks!
You can do this in a custom module as follows.
In yourcustommodule.module you implement hook_preprocess_node(). In there you check if the user has permissions to edit the node and you set the edit link.
function yourcustommodule_preprocess_node(&$vars) {
if (node_access("update", $vars['node']) === TRUE) {
$vars['edit_link']['#markup'] = l(t('Edit'), 'node/' . $vars['nid'] . '/edit');
}
}
In the node.tpl.php template in the theme you print the edit link if it is available.
<?php if (isset($edit_link)) : ?>
<p><?php print render($edit_link); ?></p>
<?php endif; ?>
If you do not have a node.tpl.php template in your theme folder than copy the one from modules/node.
If you're using the Views Format "Fields", one of the fields that you can add is "Edit Link." It's pretty flexible; it will tell you what text to display in the link. That's probably the preferred option.
If you're not using the "Fields" format, it gets trickier, especially since you're already interfering with some basic drupal styling. I'd need more information about your View and your skill set to recommend a method that doesn't cause more problems.
As a sidenote: I learned Drupal theming from the outside in, and used to use CSS that would interfere with the underlying drupal mechanics like tabs and contextual links. I've moved away from that; I find very few cases where I need to interfere with native styling-- and for those I can use custom .tpl's to get around.
EDIT: Ah. If you're not using views, a custom page .tpl is probably the best way to go. If you're not familiar, the structure for any node edit link is '/node/<NID>/edit' (for clean URL's) or '/?q=node/<NID>/edit' for old-style URL's. Depending on how your path aliases are set up, '/<url-alias>/edit' may work as well but the previous ones are more reliable.
This link on drupal.org gives a few options.
I think u can write a theme file(.tpl) for u specific case and theme page in whichever way u want

Wordpress: How to pass additional Content to the blog-preview page?

For each blog-post on my wordpress-blog I'd like to have Teaxtarea where i can pass additional content for that post.
In my case that would be an unordered list which contains a quick overview of the content.
That additional content should be displayed in the preview of the post on the blog-preview-page.
My problem:
I am actually not sure on how to best add this additional content and then pass it to the preview.
Do I use wordpress' custom fields for something like this?
I'm gratefull for a push in the right direction.
Thank you,
Nils
If I understand you right, I'd take a look at "custom meta boxes" functionality - it allows you to add any type of additional input into your blog post admin area, and than display its content on front-end however you like.
There's a nice tutorial series on that topic, with example code snippets:
http://wp.tutsplus.com/series/reusable-custom-meta-boxes/
And if you'd like to display the textarea content only in preview mode, you can use appropriate conditional tag in you template file:
http://codex.wordpress.org/Conditional_Tags#A_Preview
The conditional tag is_preview returns true when a single post is viewed in Draft mode. The following will append post meta to the content when a post is being previewed:
function so16799607_preview( $content )
{
if ( ! is_preview() )
return $content;
return $content . get_post_meta( get_the_ID(), 'my_post_meta', true );
}
add_filter( 'the_content', 'so16799607_preview', 10, 1 );
You should check out Advanced Custom Fields. That's a really stable plugin that lets you create custom meta boxes in posts, pages and custom post types. That plugin does exactly what your question states. Need al little PHP to get stuff from your database, but that is as easy as:
<?php the_field(field_name);?>
And the documentation is pretty good. And if you don't like a plugin, it exports the PHP as well.
Anther tool that does the same is Pods Framework. Both powerfull extensions to any WP install in my opinion.
Hope this helps.

How can I display WPAlchemy post meta in my custom wordpress template?

I am using the WPAlchemy class to create a meta box for my custom post type which includes image upload fields. The setup works and I can add image and save the images url for each post. I setup everything as shown here: http://www.farinspace.com/wpalchemy-metabox/#installsetup
How do I now display the saved image meta url on my page? Ideally I would like to be able to display as an image on the page by adding the image's url to image src so it displays the image not the link. However I would be happy to just display the url on the page to start to make sure it's present. But I am really stuck knowing how to echo or print the info to the page. I have tried following some of their examples but nothing seems to be working and I sometimes get php errors saying:
Fatal error: Call to a member function the_name() on a non-object in C:\
Any help appreciated. I thought it would be easier than it is, like the_meta() or something similar but it's not clear what to add to get the info showing up on page.
Cheers
Best things to do is use:
global $custom_mb;
$meta = $custom_mb->the_meta([ID_IS_OPTIONAL]);
$meta will be an array of all your stored values for the given post, loop through it as you normally would loop an array

Adding A Button Between post-content and Related Posts Thumbnail Plugin on WordPress

I am trying to add a button to my WordPress template. Basically, I have the post and then there is the Related Posts Thumbnails widget that appears. I want the button to go between the text of the post and the related posts thumbnail widget. The code in my 'Single Post' that contains all of this is as follows:
<div class="post-content">
<?php the_content(__('<em><strong>More:</strong> Read the rest of this entry...</em>', 'life-is-simple')); ?>
</div>
I know the Related Posts Thumbnails plugin falls within this code because it's at that place when I 'Inspect Element' on Google Chrome. I can't find how to edit the order of things within that div though. Any help would be greatly appreciated, thanks!
EDIT
Clarification: I am using the Life Is Simple WordPress theme although it has been custom editing quite a bit (mostly on the CSS side of things though).
That plugin is probably appending the output to the_content with a filter .
That means , that the output is being added to the_content automatically. it is a common behaviour.
You need to look at the plugin´s admin interface to see if you can have an alternative way (I believe there is ) which is using a template tag. in that case, you should put the template tag after the div where the the_content() is .
EDIT I :
After a small dig, - in fact there is - you need to put
<?php get_related_posts_thumbnails(); ?>
Then the plugin should know by itself not to append to the_content.
For parameter passing, or if something is not working, go read their APi or help files.
You'll probably need to edit single.php or archive.php in your theme. If nothing is occuring there that looks familiar, it's probably using a loop. In which case you might find what you are looking for either in loop.php, loop-single.php, or loop-archive.php depending on what type of page you are on and how the theme was constructed. Add your button near where you find Read the rest of this entry...
With more information (such as what theme you are using), one might be able to help more as well.

Resources