I am trying to set the Featured image as the og:image
I have tried various ways and plugins (Yoast) but finding it hard to get my head around this.
The issue is that it isn't picking up the feature image at all instead it is picking up the images in the content.
This is my current pages code for the single blog post. This is the part which i need to be able to get when sharing the blog post to Facebook rather then the content images.
<div class="image-wrapper">
<?php if( get_field('featured_image') ): ?>
<?php $featuredImage = get_field('featured_image'); ?>
<img rel="image_src" src="<?php echo $featuredImage['url']; ?>" alt="">
<?php else: ?>
<img src="http://lorempixel.com/842/458/?rand9" alt="">
<?php endif; ?>
</div>
It does do this weird thing when a blog post hasn't got any images in the content it then picks up the feature images and images in the sidebar. I also ran the Facebook debugger but again it is only picking up the contents imagery.
I did find this snippet that targets the featured image but i have a feeling because mine is a custom post it may not be picking it up.
<meta property="og:image" content="<?php $post_thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'large'); echo $post_thumbnail[0]; ?>" />
Any help would be great if you need anything else let me know.
Managed to figure it out.
<meta property="og:image" content="<?php $featuredImage = get_field('featured_image'); echo $featuredImage['url']; ?>" /
I had to call the custom field image.
Related
Hi guys wondering how I can manually add a link from Joomla intro article images to their corresponding article and also add a title tag to the link.
Ideally the way I want to do this is to for example wrap an achor tag around the image reference in the blog-item.php file (also want to achieve this for generic articles). And then within the anchor tag capture the related image alt tag and populate the title tag with that value.
Below is where I'm at. It's not currently working, not sure why as it should be pretty straight forward. I'm not a php developer, wondering what i'm missing.
Also already cleared both browser and joomla caches after my changes.
Any help would be appreciated, cheers guys
<a href="<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid)); ?>" title="<?php echo htmlspecialchars($images->image_intro_alt); ?>">
<img
src="<?php echo htmlspecialchars($images->image_intro); ?>"
alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/>
</a>
To make your code work, add just before your code.
<?php $images = json_decode($this->item->images); ?>
and your code will start working.
Already tested and it worked.
So I am currently using the following script (effect 3):
http://tympanus.net/codrops/2013/06/18/caption-hover-effects/
I am trying to make these boxes show on my blog content listings, which currently uses the content feature. I have included the call for the CSS and JS of the demo file for this effect;
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
I have added this to the index.php file rather than the header, as I only need it on this page. Currently, I have this so only the featured image/embed shows for the blog listing. I removed any wordpress title and excerpt tags as I wanted to focus on getting this to work before adding in the content. So, currently, it's just a copy of the code used in the demo combined with the code for the blog listing itself. Shown here is the image post.
<ul class="grid cs-style-3">
<li>
<figure>
<?php
}
if ($format === 'image') { ?>
<?php if (has_post_thumbnail()) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" class="post-image" >
<?php the_post_thumbnail(); ?>
</a>
<figcaption>
<h3>Settings</h3>
<span>Jacob Cummings</span>
Take a look
</figcaption>
</figure>
This is where I am getting a little bit lost and maybe this is down to too many scripts on the same page, as the blog listing itself uses webkit coding to display. But I have copied all the code exactly as it was in the demo, minus the image section which is my blog code instead. But no matter what I try it just shows without the effect and under the image. I am completely lost as to what to do here and out of ideas.
I have tried searching, but nothing has helped. So I am thinking this is more down to the coding I already have for the theme not playing nicely with this code. I have managed to add additional sections in the same way, but not get extra code to work with the themes functions itself.
You can see the page I am referring to and where it has gone wrong here, under any of the images:
http://outside.hobhob.uk/test/blog/
Happy to provide anything else extra.
Full code: http://hostcode.sourceforge.net/view/6152
The code you posted has some problems, try replacing it with this. I just removed the brachet I was talking about in the comment, and added the endif;s at the end of the block. I still have no idea if the $format variable is correctly populated elsewhere in your code, so there may be other issues.
<figure>
<?php if ($format === 'image') : ?>
<?php if (has_post_thumbnail()) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" class="post-image" >
<?php the_post_thumbnail(); ?>
</a>
<figcaption>
<h3>Settings</h3>
<span>Jacob Cummings</span>
Take a look
</figcaption>
<?php endif; ?>
<?php endif; ?>
</figure>
Alright so I looked through here and tried to find a solution to this, and I found some php that came up twice as an answer, but it isn't working for me, so here's the problem.
I have a custom wordpress theme. Under the navbar, I want to put a dynamic image based on that page's featured image. The image needs to be responsive and spread across the width of the page, much like you'd imagine a responsive header image to function. I can handle the responsive css bit and put the image in a div when I get to pulling it, but the image isn't even pulling.
Here's the code that came up twice as an answer on Stack Overflow:
<img src="<?php $img=wp_get_attachment_thumb_url(get_post_thumbnail_id($post->ID)); echo $img[0]; ?>" alt="<?php the_title(); ?>"/>
It isn't working. The php string is not pulling the thumbnail url and the only output in the console is the alt information wrapped in an img tag. I don't know if it has to do with the code being in the header.php, but any advice would be great.
Use this to show post thumbnails within the loop. You can also pass an elseif statement to show nothing if no image is uploaded or show a placeholder image. Hope that helps!
<?php if ( has_post_thumbnail()) : ?>
<?php the_post_thumbnail('PLACE-CUSTOM-SIZE-HERE-OR-OMIT-TO-USE-ORIGINAL-SIZE'); ?>
<?php endif; ?>
<?php
if ( has_post_thumbnail()) {
$featureImage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'feature' );
$featureImage = $featureImage[0];
?>
<div id="feature" style="background-image: url('<?php echo $featureImage; ?>')">
<? } else { ?>
<div id="feature">
<? } ?>
This is how I have accomplished this in the past.
I'm just going to leave this here in case this is causing your issue.
From the doc page: get_post_thumbnail_id()
Note: To enable featured images, see post thumbnails, the current
theme must include add_theme_support( 'post-thumbnails' );
i am trying to have different header background images depending on which inner page is accessed. Right now i have the same picture for all inner pages and need the php code changed so its conditional. Like if im on contact page, 1.jpg to be set as header img. If on services page, 2.jpg to be set as header img etc, you get the idea.
Here is the php code ive found in this wp theme im trying to improve for a friend:
<div class="bgtop">
<?php
//display featured image if one exists
$featimage = get_bloginfo('stylesheet_directory') . "/images/pageheader.png";
if ((has_post_thumbnail( $post->ID ))&&(!is_single()&&(!is_category())) ){
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );
$featimage = $image[0];
}
?>
<div class="pageheader" style="background: url(<?php echo $featimage; ?> ); background-position: center top;">
<div class="centermenu">
<div class="pagelogo">
<!--<a href="<?php bloginfo('home'); ?>">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/indexlogo.png" alt="logo" />
</a>-->
</div>
Well.. It's more of a structure thing. How are you determining which page they are on? Does the user click a link? Use the information available to the server to decide what content to serve. If you're using one script to serve all your pages, then you'll need to pass it a parameter when the user clicks a link. You can do this by making your links take parameters.
Markup like so:
<a href='default.php?page=home'> Navigate To Home </a>
<a href='default.php?page=blog'> Navigate To Blog </a>
php like so:
if($_POST['page'] == "home")
echo $homeheader;
elseif($_POST['page'] == "blog")
echo $blogheader;
But, usually you just make multiple php pages that include some common elements (called templating). That helps keep things cleaner than making one php script that serves up your whole site.
If you're wanting the manage this in the back-end of WordPress: You can use the Advanced Custom Fields Plugin for WordPress (http://wordpress.org/plugins/advanced-custom-fields/). Through it, you can add a field on every page an even every post that allows you to enter in a background image.
Then, in your header.php template file, add the shortcode somewhere in your body tag:
<body background="(<?php the_field('background_image')" ?>)">
Depending on what page you're on, it will show that background image.
If You'd like the process automated: You can create a folder called "bg" and have an image with the same name as your page. For example, for about.php you can have about.jpg.
Then write a script that takes the page name, and then sets the background image to that name. You would place this in the header.php file in your template Something like:
$page = end(explode("/",$_SERVER['REQUEST_URI']));
$image = str_replace("php","jpg",$page);
Then use:
<body background="bg/<?php print $image ?>">
This is assuming that you are keeping your image files in http://www.yoursite.com/bg/ But you can also use shortcodes to keep these images within your theme with <?php echo get_template_directory_uri(); ?>
I'm having trouble trying to figure out how to code this, I've researched like crazy (an hour and a half), and I finally decided to sign up for Stack Overflow to see if anyone can help, soo....
In my wordpress theme, I have a section for banners (images that are attached to posts). This is what I currently have:
<?php
$headline = new WP_Query();
$headline->query('posts_per_page=2&tag=review&orderby=date');
?>
<div id="headline">
<?php if(get_post_meta($post->ID, "image_value", $single = true) != "") : ?>
<img src="<?php echo get_post_meta($post->ID, "image_value", $single = true); ?>" alt="<?php the_title(); ?>" />
<?php endif; ?>
</div>
The problem is that the width of the content area is 960px, and the banners I upload are sizes (width): 728px, 960px, and 232px. So does anyone know some PHP code that would find the width of the banners of the two posts, see if they would fit, and if they dont, just use one banner (either the 728px or the 960px), and then if the 728px is used also add the 232px image to the div so it fills in nicely?
And the selection of the images used by the code is kind of supposed to be random, I can handle that though.
Any help?
You must get the width through eg. GD. Then bother with some ifs.
Hint: getimagesize();