What I want to do is have images display on each blogposts, the images that will be displayed will be what the post was tagged with, for example I will tag 1 post with 2 tags, design and print, I would like 2 small images to appear on that posts page.
This is the code that I have managed to scrape together, the else statement is displaying so a post will have the same amount of default-author.jpg showing as there are tags.
This makes me think that something in the foreach is not working but I'm still trying to learn and this is puzzling me, any help would be much appreciated.
<div class="image_wrap">
<?php
$posttags = get_the_tags(); // Get articles tags
$home = get_bloginfo('url'); // Get homepage URL
// Check if tag-slug.png exists and display it.
if ($posttags) {
foreach($posttags as $tag) {
$upload_dir = wp_upload_dir();
$image_relative_path = "/wp-content/uploads/2017/06/" . $tag->slug .".png";
$image_path = $upload_dir['basedir'] . $image_relative_path;
$image_url = $upload_dir['baseurl'] . $image_relative_path;
if (file_exists($image_path)) {
echo '<a href="' . $home . '/' . $tag->slug . '" /><img title="' . $tag->name . '" alt="' . $tag->name . '" src="' . $image_url . '" /></a>';
// If no image found, output something else.
} else { ?>
<img src="<?php bloginfo('template_directory'); ?>/img/default-author.jpg" title="image missing"/>
<?php }
}
}
?>
Does anyone have any ideas on how I can achieve the effect I want, images to be displayed on a blogpost [in wordpress] depending on what tag it has?
Trying to use a great plugin "Fly Dynamic Image Resizer" to return images from ACF but not having much luck. Can anyone provide any clue as to what I may be doing wrong? Thanks.
ACF variables:
<?php
$photo = get_field('photo', $post);
$fly_image = fly_get_attachment_image_src($photo, 'big_featured_works', true);
?>
HTML:
<img src="<?php echo $fly_image['src']; ?>"/>
$fly_image = fly_get_attachment_image_src(get_field('photo', $post), 'big_featured_works', true);
<img src="<?php echo $fly_image['src']; ?>"/>
then switch the return value of the custom field to image ID (from default "Image Array")
If your field is a repeater field you'll have to use get_sub_field, like this:
$image = get_sub_field('image');
fly_get_attachment_image_src($image, 'image-custom-size')['src'];
$image = fly_get_attachment_image_src( get_post_thumbnail_id(), 'home_page_square', array( 500, 500 ), true );
echo '<img src="' . $image['src'] . '" width="' . $image['width'] . '" height="' . $image['height'] . '" />';
(Reference)
I have selected a row from the database, within the row is a field called image. This is a blob datatype which contains an image within the database but when i try to display the image via php it displays the text version of the image not the actual image.
<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
$player = $this->player;
$name = $player->forename . " " . $player->surname;
$handed = $player->handed;
$image = $player->image;
?>
<div class="thumbnail"><?php echo '<img src="' . $image . '" alt="' . $name . '" />'?></div>
It is probably an easy fix and i did look at trying:
$mime = "image/jpeg";
$b64Src = "data:".$mime.";base64," . base64_encode($image["img"]);
echo '<img src="'.$b64Src.'" alt="" />';
?>
but that only outputed:
<img src="data:image/jpeg;base64,/w==" alt="">
Any help is much appreciated, thankyou in advance
I have a Wordpress blog and am trying to implement the foresight.js image script. In short, I need to target all post images, swap out the src, width, & height attributes with data-src, data-width, & data-height attributes. I then need to duplicate the image line and wrap it in <noscript> tags. This is the structure I'm trying to have Wordpress generate/create:
<img data-src="wordpress/image/url/pic.jpg" data-width="{get width of image with PHP & pass-in that value here} data-height="{get height of image with PHP and pass-in that value here}" class="fs-img">
<noscript>
<img src="wordpress/image/url/pic.jpg">
</noscript>
More info can be found at foresight.js' website.
I have searched the Wordpress codex and the best possible route I can find are to use filters (ie. 'get_image_tag' & 'image_tag') for modifying the html that Wordpress outputs for each image. I'm thinking that one of these options should work, or that I can do some pattern matching with regex (I know, not ideal), throw in a preg_replace and then inject this back into the_content filter.
I have tried some of these options but cannot get any to work. Could someone please offer some help?
'get_image_tag' attempt:
Found this particular one on the web, but it would need modified to fit my logic (see above structure)...can't make sense of what the preg_replace array is doing on my own.
<?php function image_tag($html, $id, $alt, $title) {
return preg_replace(array(
'/'.str_replace('//','\/\/',get_bloginfo('url')).'/i',
'/\s+width="\d+"/i',
'/\s+height="\d+"/i',
'/alt=""/i'
),
array(
'',
'',
'',
alt='"' . $title . '"'
),
$html);
}
add_filter('get_image_tag', 'image_tag', 0, 4);
?>
Another 'get_image_tag' attempt:
<?php function get_image_tag($id, $alt, $title, $align, $size='full') {
list($width, $height, $type, $attr) = getimagesize($img_src);
$hwstring = image_hwstring($width, $height);
$class = 'align' . esc_attr($align) . ' size-' . esc_attr($size) . ' wp-image-' . $id;
$class = apply_filters('get_image_tag_class', $class, $id, $align, $size);
$html = '<img src="' . esc_attr($img_src) . '" alt="' . esc_attr($alt) . '" title="' . esc_attr($title).'" data-width="' . $width . '" data-height="' . $height . '" class="' . $class . ' fs-img" />';
$html = apply_filters( 'get_image_tag', $html, $id, $alt, $title, $align, $size);
return $html;
}
?>
Pattern-matching attempt:
Tried creating my own regex on this one, but not sure if it's correct.
<?php function restructure_imgs($content) {
global $post;
$pattern = "/<img(.*?)src=('|\")(.*?).(bmp|gif|jpeg|jpg|png)(|\")(.*?)>/i";
list($width, $height, $type, $attr) = getimagesize($2$3.$4$5);
$hwstring = image_hwstring($width, $height);
$replacement = '<img$1data-src=$2$3.$4$5 title="'.$post->post_title.'" data-width="'.$width.'" data-height="'.$height.'" class="fs-img"$6>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
add_filter('the_content', 'restructure_imgs');
?>
Unfortunately can't get any of these examples to work. Any help or sharing your pre-written scripts/functions would be much appreciated! Thanks for helping a student learn!!
Your approach is before the page rendering and i think is not impossible in wordpress, however you can do the same after the page was rendered with javascript.
I tried to do that with jQuery and ti seems to work:
<!-- Example image -->
<img src="http://fotografia.deagostinipassion.com/resources/photos/2/2n/ilCielo.JPG" width="200px" height="300px">
<!-- Import jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("img").wrap(function() {
$(this).wrap(function() {
var newimg = '<img data-src="' + $(this).attr('src') + '" data-width="' + $(this).attr('width') + '" data-height="' + $(this).attr('height') + '" class="fs-img">';
return newimg;
});
return '<noscript>';
});
});
</script>
If you need more help, ask me.
All other functions work as expected. My code:
function getAndPrintUserUploads($videoEntry) {
$videoThumbnails = $videoEntry->getVideoThumbnails();
return 'Video ID' . $videoEntry->getVideoId() . '<br/><img alt="' . $videoEntry->getVideoTitle() . '" src="' . $videoThumbnails[0]['url'] . '" />';
}
The image and title are correct, but where I expect the Video ID to be vxZwKFGX26w, the above code returns PLLlFRqv2uzNiMcnkovaXkq89nUwHY9D8u.
How do I get the video ID vxZwKFGX26w out of Zend, instead of this too-long, not-right string?