I'm building a custom Wordpress theme locally and using Advanced Custom Fields for much of the content alongside custom post types.
I'm currently building the gallery section and want to use lightbox - the two size images are custom size featured images.
Before I add the lightbox anchor image my code looks like this:
<?php
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'featured-image-shop', true );
?>
<a href="<?php the_permalink(); ?>">
<img src="<?php echo $thumbnail_url[0]; ?>" alt="<?php the_title();?>">
</a>
However - when I then add in the lightbox images - the lightbox functionality works fine - but makes the page jump slightly on page load. The code looks like this:
<?php
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'featured-image-shop', true );
?>
<a href="<?php echo $thumbnail_url[0];?>" data-lightbox="gallery-images" data-title="<?php the_title();?>">
<img class="gallerypics" src="<?php echo $thumbnail_url[0];?>" alt="<?php the_title();?>">
</a>
Any ideas why this happens? I thought maybe it could be a javascript issue but even if I simply add an image in the anchor without the data-lightbox attribute it still jumps.
Perhaps someone has come across this issue before?
It's ok - just the act of writing this down gave an the answer so I thought I'd share for anyone who may have the same issue. I needed to add
html { overflow-x:auto; overflow-y:scroll; }
This forces the scrollbar to be there before the content is fully loaded which is why it was jumping before!
Related
I'm trying to link products on my Woocommerce shop page directly to the external/affiliate site by clicking on the product's image.
I created a child theme of my current theme and am working in a child's version of the Woocommerce "content-product.php" file.
Found a few similar topics, but my content-product.php file looks differently, so that's where I got lost.
Can anyone see where I should add/change what exactly to have the product images redirect directly to the external site?
For some reason I couldn't paste the code in here nicely but the full one can be viewed at http://lifestylespot.nl/code.txt
I figured (according to info found elsewhere) that the following would do the trick:
Replacing:
global $product;
by
global $product;
if(!is_single()) $product_url = get_post_meta( $product->id, '_product_url', true );
if(empty($product_url)) $product_url = get_permalink();
![enter image description here][1]?>
That did the trick. But it made my shop page look like: http://i.stack.imgur.com/uu3a7.png
Thanks in advance!
I got it working.
Simply changed:
<a href="<?php the_permalink(); ?>">
to:
<a href="<?php echo esc_url( $product->get_product_url() ) ?>">
And to open the affiliate link in a new window:
<a href="<?php echo esc_url( $product->get_product_url() ) ?>" target="_blank">
I have a wordpress site, that need to show pages using swipe, I choose to use Jquery Mobile, and I get it working fine. Now, we have 2 languages on site, using wpml plugin. And my Swipe Code works well, except when we use Change language button swipe fails.
Details on issue.
We have only 3 Text Only page in our website, in 2 language. And in Footer we have link to change language. Also client hate to have Ajax page loading, so what I did is I create three Div with data-role=page and put data-next, data-prev as #div-$postid. So the navigation works absolute fine. I put footer outside from data-role=page.
Now, when I click change button in footer, it load the english page [I saw it using Fiddler] and then take first data-role=page from server and replace /slide its content. However since it only pick the first data role, all other english page doesn't get in HTML [it just update DOM and doesn't navigate to english version]. so swipe fails as other english pages are not in dom.
Also, footer is not changing, so what I want is: can we simple force a Link to navigate instead of going swipe way? Jquery Mobile is enforcing swipe on all A tags, I do not want swipe to works anything outside data-role=page.
Hope I make sense.
Edit here is code: [not sure if this code will help at all]
<?php
get_header();
global $post;
$args = array('post_type' => 'mobile_slide','showposts' => '-1', "order" => "DESC");
$the_query = new WP_Query($args);
if($the_query->have_posts()){
while($the_query->have_posts()) { $the_query->the_post();
$prev =get_previous_post();
$next =get_next_post();
if($prev) {
$prev = "#page-" . $prev->ID; //get_permalink($prev->ID);
} else {
$prev='';
}
if($next) {
$next = "#page-".$next->ID; //get_permalink($next->ID);
} else {
$next='';
}
if (has_post_thumbnail( $post->ID ) ) {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'slider_image' ); ?>
<div id="page-<?php echo $post->ID; ?>" data-dom-cache="true" data-transition="slide" class="page" data-role="page" data-prev="<?php echo $prev; ?>" data-next="<?php echo $next; ?>" style="background-image:url('<?php echo $image[0]; ?>'); background-position:center center; background-color:#000; background-repeat:no-repeat; ">
<?php } else { ?>
<div id="page-<?php echo $post->ID; ?>" data-dom-cache="true" data-transition="slide" class="page" data-role="page" data-prev="<?php echo $prev; ?>" data-next="<?php echo $next; ?>">
<?php } ?>
<div class="post_box">
<h2><blockquote><?php the_title(); ?></blockquote></h2>
<div class="post_entry">
<?php the_content(); ?>
</div>
</div><!-- post_box -->
</div>
<?php }
} ?>
<?php get_footer(); ?>
This is all I have, except that get_footer use Ul li based list where on LI change based on language variable, to show different images for either language.
To stop Ajax from loading pages/links, add to link anchor data-rel="external" or data-ajax="false". This will load page normally without any transition.
Reference: jQuery Mobile - Links
For those who have similar problem, I fix it by using following:
1) I add a "noswipe" class to A Tag so I can refer it in Jquery
2) I add following code
$(function(){
$(".noswipe").click(function(){
window.location.href= $(this).attr("href");
return false;
});
});
The above code simply enforce to skip the Mobile's parsing and calling and works for my case.
I need wordpress plugin for this kind of header image http://www.slb.com/services/drilling.aspx like in this web site. And this image will not be slider but it's static image on perticular page and category and also different image for all categories and pages.
Easiest & best way is create a custom field named banner & in your header.php place below code.
<div class="banner">
<?php if(get_post_meta($post->ID, 'banner', true)) : ?>
<img src="<?php echo get_post_meta($post->ID, 'banner', true); ?>" />
<?php endif; ?>
<div>
But as you want plugin to do this, have a look at plugin named Dynamic Header.
I don't understand why its so hard to find an answer to this... But I really hope to because it is one of the things holding me back from releasing my theme..
To output or put the metabox option to use you would use code like this
<?php echo get_post_meta($post->ID, 'MoonRock_page_background_image', true); ?>
This is using wordpresses get_post_meta.
I am having a problem because I am trying to have a user upload a logo inside a custom post type and have that option outputted not on that page/post, but onto a template file, specifically the home template file I made.
There is a banner with an unordered list of 6 logo spots, I am trying to display the images the user uploads inside the clients post type.
Here is the UL code with some various PHP
<!-- Press Banner -->
<div id="press-banner">
<div class="span11 center nofloat clearfix">
<h2>some of our clients</h2>
<ul>
<li><a class="press-banner-logo-fastco" src="#" href="#" target="_blank"><img src=" <?php echo $text; ?>"/></a></li>
<li><a class="press-banner-logo-time" href="#" target="_blank"><img src="<?php echo get_post_meta($post->ID, '_moon_logo_image', true); ?>"/></a></li>
<li><a class="press-banner-logo-forbes" href="#" target="_blank"><img src="<?php moon_opts_show('press-banner-three',TEMPLATE_URI .'/images/logo.png'); ?>"/></a></li>
<li><a class="press-banner-logo-techcrunch" href="#" target="_blank"><img src="<?php moon_opts_show('press-banner-four',TEMPLATE_URI .'/images/logo.png'); ?>"/></a></li>
<li><a class="press-banner-logo-pandodaily" href="#" target="_blank"><img src="<?php moon_opts_show('press-banner-five',TEMPLATE_URI .'/images/logo.png'); ?>"/></a></li>
<li><a class="press-banner-logo-betabeat" href="#" target="_blank"><img src="<?php moon_opts_show('press-banner-six',TEMPLATE_URI .'/images/logo.png'); ?>"/></a></li>
</ul>
</div>
</div>
<!-- End Press Banner -->
This code actually works, but it works with the nhp options framework I am using... Only significant differance I noticed was instead of get_post_meta were using a custom function..
Here is the code for that function...
/**
* This is used to echo and option value from the options array
*/
function moon_opts_show($opt_name, $default = null){
global $moon_Options;
$option = $moon_Options->get( $opt_name, $default );
if( ! is_array( $option ) ){
echo $option;
}
}
I dont understand it, I kind of do, but I still wouldnt know how to use that inside my metabox code, I wouldnt know what variables to get and stuff..
So I am a little lost between if that is the solution to output the image into my homepage template, or if maybe I need to use WP_Query I have a few options in mind but its giving me a hard time.. So I ask for a little help.. please oh please im begging hehe...
EDIT: I am going to add the original question into simple terms...
Image post meta WILL out put onto the specific post, I have a clients post type, and a file called single-clients.php, when I create a new post all the meta data changes the content on that specific page... Obviously if I have a client post named WILL SMITH the featured image will apply to only WILL SMITH, and that goes for meta info, such as text and images.
What I would like to learn/acheive is outputting the image meta from WILL SMITH onto the homepage, I already see that I would need unique IDS and such, boy I am confused..
Ok I found the solution and as I guessed it was an easy one.
By putting it inside a WP_Query or a loop I guess you would call it, the meta data outputted onto my homepage template
<?php $loop = new WP_Query( array( 'post_type' => 'clients', 'posts_per_page' => 6 ) );
while ( $loop->have_posts() ) : $loop->the_post();
the_post_thumbnail();
echo get_post_meta($post->ID, '_moon_logo_image', true);
endwhile;
?>
Inside the endwhile I can add anything I want from my clients posts, or portfolio posts.. etc I am sure 99% of themers and any wordpress expert knows that, but I am working my way up to the expert level.. gotta learn sometime..
I am using wordpress acf plugin to show some custom images with their description and some text. So first I just made the acf plugin fileds like this and assigned the page to the home page with the conditional tags Location-> Rules-> Page->is equal to-> Home
now when I made my content-page.php to show the image code like this
<?php
if( get_field('image') ):
?><img src="<?php the_field('image'); ?>" alt="" /><?php
endif;
?>
I am getting only a broken image. The firebug is showing image source like this
Kindly help me to solve this. I have already wasted one day behind it. So any help and suggestions will be really appreciable. Thanks
Here is the screen shot for my custom fields setup
Here is the firebug html code which is showing the image source
Had this problem too. This is what I came up with that works:
<?php if (get_field('staff_photo')) {
$imgarray = get_field( 'staff_photo' );
?>
<img src="<?php echo $imgarray['url'] ; ?>" alt="" class="staff-photo" />
<?php } ?>
So, what I did was put get_field('field_name') array into a variable, then took a WAG that the key was 'url', which it was. Seems like the ACF people need to update their documentation.
Hah! Discovered another way -- this way you can pick a size:
<?php
if ( get_field('staff_photo') ) {
$imgarray = get_field( 'staff_photo' );
$size = "thumbnail"; // (thumbnail, medium, large, full or custom size)
echo wp_get_attachment_image( $imgarray['id'], $size );
}
?>
For wp_get_attachemnt_image to work, you have to extract the image id, for which the key is, ta-da! 'id'.