I am trying to develop this blog http://www.racecarwow.com . I have used youtube video thumbnail for post thumbnail . In single post , there is a facebook share button. When i click on it, it is not showing the post thumbnail image. it only show a fix image for all post thumbnail during share. I have used the following code for post thumbnil
<a class="thumbnail" href="<?php the_permalink(); ?>">
<img class="img-responsive" src="http://img.youtube.com/vi/<?php echo $youtube_code; ?>/hqdefault.jpg" alt="<?php the_title()?>" />
</a>
Here $youtube_code is coming from custom field. I have also try this following way
<a class="thumbnail" href="<?php the_permalink(); ?>">
<?php if($post_img_src){?>
<img src="<?php echo $post_img_src[0] ?>" alt="<?php the_title();?>" class="img-responsive">
<?php } else{?>
<img class="img-responsive" src="http://img.youtube.com/vi/<?php echo $youtube_code; ?>/hqdefault.jpg" alt="<?php the_title()?>" />
<?php }?>
</a>
And i have used the following code for share post
<a class="btn btn-block btn-social btn-facebook" href="https://www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink($post->ID)); ?>&t=<?php echo urlencode($post->post_title); ?>"target="_blank">
<i class="fa fa-facebook"></i> Share on facebook
</a>
Please tell me the solution.
You need to put your thumbnail image in a meta tag that Facebook can read for each post:
<meta property="og:image" content="http://img.youtube.com/vi/<?php echo $youtube_code; ?>/hqdefault.jpg" />
I think you have a plugin that has the Facebook meta tags, you might need to edit the plugin in order for your custom thumbnails to show with the other meta info.
You can debug your website on Facebook here https://developers.facebook.com/tools/debug
Related
I have a product overview page with 1 image per product:
https://axces.be/nl/product/
You can add multiple images to a products. All these images are shown on the detail page. But on the product page, you only see the first image.
My template looks like this:
<a href="<?php the_permalink(); ?>" class="single-prod">
<div class="single-prod__image">
<?php
$productImages = get_field('product_images');
?>
<img src="<?php echo $productImages[0]['product_image']?>" />
</div>
</a>
But now the images are served on the size they are uploaded. This causes a slower load time. So I want to serve smaller images.
I've tried to add the image size thumbnail to it, in order to see if the load time is better. But that doesn't work:
<a href="<?php the_permalink(); ?>" class="single-prod">
<div class="single-prod__image">
<?php
$image_size = 'thumbnail';
$productImages = get_field('product_images');
?>
<img src="<?php echo $productImages[0]['product_image']['sizes'][$image_size]; ?>" />
</div>
<div class="single-prod__information">
<span class="single-prod__name">
<?php the_title(); ?>
</span>
<span class="single-prod__short">
<?php the_field('product_short'); ?>
</span>
</div>
</a>
So eventually, I want to achieve that the images are smaller. Not necessary the to see the thumbnail because that's probably going to crop the image.
Thanks in advance.
I got a problem, I tried several times but I couldn't find a solution for this.
As you know, we can change product image size in System / Setting / Image, but it won't set to the size of product page. let me show you what I mean, Please check this image:
The exact size of Product Image Thumb Size is 770 x 228
So, even if we will set the same size in System/Setting/Image , it won't be fit perfectly and then we will face problem in responsive / mobile view...
Here is also mobile view:
so how can I set image size to be fit in width and height, maybe with css or java script ?
Here is the code for this specific section
<li><a class="France" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
in the root of:
catalog/view/theme/default/template/product/product.tpl
I really appreciate for any information and share your knowledge about it.
Thanks and cheers
Here, missing thumbnail css class according to OpenCart html css structure. So, You need to add thumbnail css class in <a> tag. Try following code & then check it.
<li><a class="France thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
I have built a site for someone else who will be updating it via a CMS (CushyCMS). They wanted a lightbox gallery included. I want to be able to allow them to upload a new image and for that image url to be copied into the a tag so lightbox works.
So far I am able to do that, but the client has to ensure the file names and format are exactly the same as what I have set them to in the php code. Is there a way to get the img url from the img tag (possibly identifying it using an id attribute) and put it directly into the tag?
Heres what I have so far:
<?php
$src1 = "images/test1.jpg";
$src2 = "images/test2.jpg";
?>
<a href="<?php echo $src1?>" data-lightbox="group-1">
<img class="cushycms profile" name="image1" id="slideshow_image" src="images/test1.jpg"/></a>
<a href="<?php echo $src2?>" data-lightbox="group-1">
<img class="cushycms profile" id="slideshow_image" src="images/test2.jpg"/></a>
Many thanks!
You can do it with jQuery:
<a data-lightbox="group-1">
<img name="image1" src="images/test1.jpg" />
</a>
<script>
var img = $('img[name="image1"]');
var imgSrc = img.attr('src');
img.parent().attr('href', imgSrc);
</script>
If you have multiple images and want to automate this you can use the map function:
<a data-lightbox="group-1">
<img name="image1" src="images/test1.jpg" class="slideshow" />
</a>
<a data-lightbox="group-1">
<img name="image2" src="images/test2.jpg" class="slideshow" />
</a>
<a data-lightbox="group-1">
<img name="image3" src="images/test3.jpg" class="slideshow" />
</a>
<script>
$(".slideshow").map(function() {
$(this).parent().attr('href', this.src);
});
</script>
Assuming you use jQuery somewhere there, you could/should use a lightbox plugin, like this one here:
http://www.jacklmoore.com/colorbox/
Using the xamples there, you would then use:
(http://www.jacklmoore.com/colorbox/example1/)
$('a.gallery').colorbox({rel:'group-1'});
which would result in a lighbox gallery showing on "click" on any anchor with class "gallery" while the gallery would show all the elements pointed by "href" from all anchors of that have class="group-1" (so each anchor would be
although you have to include some files for jquery and the lightbox plugin, I think it will make your life much easier in the end.
Also not sure what your php level is, but the example code you have there asks for:
<?php
$images = array(
'images/test1.jpg',
'images/test2.jpg'
);
?>
<?php foreach($images as $i => $url): ?>
<a href="<?php echo $url?>" data-lightbox="group-1">
<img class="cushycms profile" name="image<?php echo $i+1 ?>" id="slideshow_image" src="<?php echo $url ?>"/>
</a>
<?php endforeach; ?>
Just in case you got more images there.
Hello i am updating a WordPress site that was riddled with errors (over 1000...-'-) now i have gotten it down to 15 or so however one page has 105 errors and they are all caused by a stray p tag that is being generated after every image here's what the code is being outputted as
<div id="ngg-image-40" class="ngg-gallery-thumbnail-box" >
<div class="ngg-gallery-thumbnail" >
<a href="a link" title="the title" class="shutterset_set_5" ><br />
<img title="01596-01_1" alt="01596-01_1" src="the src" width="100" height="75" /><br />
</a>
</div>
</p></div>
As you can see there is a p tag there for no reason, I've tried Google but got no one with a solution to this problem, I've tried looking through all the php files for the nextgen gallery and couldn't figure it out the actual code that outputs the gallery is below.
<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box" <?php echo $image->style ?> >
<div class="ngg-gallery-thumbnail" >
<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
<?php if ( !$image->hidden ) { ?>
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
<?php } ?>
</a>
</div>
</div>
Again as you can see there is no reference to the p tag in the above. Any and all help is appreciated.
I also did not find a solution within the gallery but I have to admit that I didn't search that well. I was lazy and fixed it with javascript as I use a custom javascript for my gallery. Maybe that helps you, too. It's MooTools btw. and assumes that the gallery div has the id "gallery":
var p = document.id('gallery').getPrevious();
if (p.get('tag') == 'p') {
p.dispose();
}
I have a Wordpress managed web site at http://www.urbanvision.org.uk/ I have built it and everything works like I want it to and I'm happy with the outcome as it is my first fully built Wordpress web site.
I've become stuck on a request I had at the start of the week.
We have a Properties for Sale page (http://www.urbanvision.org.uk/services/property-services/properties-for-sale/) the items on this page link to PDF downloads of plans and property details. However we now have a number of properties that need to be added that link not the PDF but to an external link.
The problem I have is the page template relies on custom fields managed by the plugin Advanced Custom Fields, the field to upload the PDF is a file upload field which will take a PDF but not an URL to another page or site.
I have tried to switch the custom field to an URL rather than an upload screen but not keen on this for 2 reasons, 1) i'd have go back through the other properties and copy the url into the changed field and 2) it becomes a little more difficult for colleagues to update.
I have also tried introducing a separate a field and working out which custom field should be pulled in:
If PDF file exists in property_details pull in the URL to PDF.
If URL exists in property_details_url pull in URL entered.
There are two parts of each post that need to link to further details (PDF or external URL). They are the thumbnail image and the view details link.
The code I had before (just linking to the PDF):
<?php
$featuredPosts = new WP_Query();
$featuredPosts->query('showposts=20&cat=13');
while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?>
<div class="literaturedescription">
<a href="<?php the_field('property_details'); ?>" title="<?php the_field('property_title'); ?>">
<img src="<?php the_field('property_thumbnail'); ?>" width="220px" height="150px" alt="<?php the_field('property_title'); ?>" /></a>
<p><strong><?php the_field('property_title'); ?></strong><br /><?php the_field('property_excerpt'); ?> <span style="color:red;font-weight:bold;"><?php the_field('property_status'); ?></span>
<br />> > View Details</p><br />
The Code I have changed it to (still can't get it to work):
<?php $featuredPosts = new WP_Query();
$featuredPosts->query('showposts=20&cat=12');
while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?>
<div class="literaturedescription">
<a href="<?php the_field('property_details'); ?>" title="<?php the_field('property_title'); ?>">
<img src="<?php the_field('property_thumbnail'); ?>" width="220px" height="150px" alt="<?php the_field('property_title'); ?>" /></a>
<p><strong><?php the_field('property_title'); ?></strong><br /><?php the_field('property_excerpt'); ?> <span style="color:red;font-weight:bold;"><?php the_field('property_status'); ?></span>
<?php if(get_field('property_details_url')){ ?>
<br />> > View Details</p><br />
<?php } else { ?>
<br />> > View Details</p><br />
<?php } ?>
I also had a look at pulling directly from the MySQL database that Wordpress is using but really struggled to get the page to display without error.
As always, any help would be greatly appreciated.
your on the right track, but what to do is assign your customfield to a variable.
ie:
<?php
$prop_det_url = get_field('property_details_url');
if($prop_det_url!=''){ ?>
<br />> > View Details</p><br />
<?php } else { ?>
<br />> > View Details</p><br />
<?php } ?>
hopefully the check should fine that the property_details_url has somthing other than nothing, it will show the link, if not it will show the other piece of code?
Marty