I am having issue with a wordpress Tag CLoud Plugin.
I want to show random tags but i am confused how to do this.
the codes are given below.
I want to show random tags. like if i select to show just 5 tags and when each time i refrest the screen the tags should appear randomly.
function widget_tagcloud($args){
$option_value = retrieve_options($opt_val);
extract($args);
echo $before_widget;
echo $before_title;
echo $option_value['title'];
echo $after_title;
global $wpdb;
$tags_list = get_terms('post_tag', array(
'orderby' => 'count',
'hide_empty' => 0
));
if(sizeof($tags_list)!=0){
$max_count = 0;
if(!empty($option_value['height'])) $canvas_height = $option_value['height'];
else $canvas_height = "250";
if(!empty($option_value['width'])) $canvas_width = $option_value['width'];
else $canvas_width = "250";
foreach($tags_list as $tag) if($tag->count > $max_count) $max_count = $tag->count;?>
<div id="myCanvasContainer">
<canvas width="<?php echo $canvas_width;?>" height="<?php echo $canvas_height;?>" id="myCanvas">
<p>Tags</p>
</canvas>
</div>
<div id="tags">
<ul style="
font-family: <?php if(!empty($option_value['font_name'])) echo $option_value['font_name'];
else echo "Calibri";?>;
height:
<?php
if(!empty($option_value['height'])) echo $option_value['height'];
else echo "250";
?>px;
width:
<?php
if(!empty($option_value['width'])) echo $option_value['width'];
else echo "250";
?>px;
background-color: #<?php if(!empty($option_value['bg_color'])) echo $option_value['bg_color'];
else echo "FFF";?>;
">
<?php
if(empty($option_value['no_of_tags'])) $option_value['no_of_tags'] = 15;
if(empty($option_value['txt_color'])) $option_value['txt_color'] = "000";
if(empty($option_value['max_font_size'])) $option_value['max_font_size'] = 40;
if(empty($option_value['min_font_size'])) $option_value['max_font_size'] = 3;
$i=1;
foreach($tags_list as $tag){
if($i <= $option_value['no_of_tags']){
$font_size = $option_value['max_font_size'] - (($max_count - $tag->count)*2);
if($font_size < $option_value['min_font_size']) $font_size = $option_value['min_font_size'];
echo '<li><a href="'.$_SERVER['PHP_SELF'].'?tag='.$tag->slug.'"
style="font-size:'.$font_size.'px;color: #'.$option_value['txt_color'].';">'
.$tag->name.'</a></li>';
$i++;
}
}
echo '</ul></div>';
}
else echo "No tags found";
echo $after_widget;
}
Accordind to your code: (this part especially)
$tags_list = get_terms('post_tag', array(
'orderby' => 'count',
'hide_empty' => 0
));
The tags which you get are ordered by count , therefore - they are not randomly picked.
You can try and use the next code:
$tags_list = get_terms('post_tag', array(
'number' => 5,
'orderby' => 'none',
'hide_empty' => 0
));
And if that doesn't work , build a customized query using the RAND function of mysql.
EDIT: based on your code , you can do is even easier by using the shuffle() php function.
Just replace:
$max_count = 0;
With:
$max_count = 5;
shuffle($tags_list);
Related
I'm trying to set my posts page so that each post item loads with it's featured image as it's background. My code is working properly, but how do I add the post thumbnail as the background for each post? My code is attached below
<?php
/**
* The main template file.
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
* Learn more: http://codex.wordpress.org/Template_Hierarchy
*
* #package Clean Blog
*/
get_header(); ?>
<?php
// Custom loop that adds a clearing class to the first item in each row
$args = array('numberposts' => -1, 'order' => 'ASC' ); //For this example I am setting the arguments to return all posts in reverse chronological order. Odds are this will be a different query for your project
$allposts = get_posts($args);
$numCol = 2; // Set number of columns
// Start Counter
$counter = 0;
foreach ($allposts as $post) {
$content = '<div class="col-md-6 columns-'.$numCol.($counter % $numCol == 0 ? ' first' : '').'">'; // Add class to first column
$content .= '<h3>'.$post->post_title.'</h3>';
$content .= $post->post_content;
$content .= '</div>';
echo $content;
$counter ++;
}
?>
<style type="text/css">
/* Added styles here for the demo, but ideally you would put this in a stylesheet.*/
.columns-2 {
float:left;
}
.first {
clear:both;
margin-left:0;
}
</style>
<!-- /.col-lg-8.col-lg-offset-2.col-md-10.col-md-offset-1 -->
<?php get_footer(); ?>
UPDATE
I've now tried adding it as an inline style, but the raw style is showing up on the page. I feel like I'm missing something easy
http://imgur.com/kkATCAC
<?php
// Custom loop that adds a clearing class to the first item in each row
$args = array('numberposts' => -1, 'order' => 'ASC' ); //For this example I am setting the arguments to return all posts in reverse chronological order. Odds are this will be a different query for your project
$allposts = get_posts($args);
$numCol = 2; // Set number of columns
$thumbnail = get_the_post_thumbnail( $page->ID, 'thumbnail' );
// Start Counter
$counter = 0;
foreach ($allposts as $post) {
$content = '<div class="col-md-6 columns-'.$numCol.($counter % $numCol == 0 ? ' first' : '').'" style="background: url("${thumbnail}") center center/cover no-repeat;">'; // Add class to first column
$content .= '<h3>'.$post->post_title.'</h3>';
$content .= $post->post_content;
$content .= '</div>';
echo $content;
$counter ++;
}
?>
UPDATE 2
I've checked the quotes but now I'm getting a parse error and the page doesn't load at all.
$content = '<div style="background: url('${thumbnail}') center center/cover no-repeat;" class="col-md-6 columns-'.$numCol.($counter % $numCol == 0 ? ' first' : '').'">'; // Add class to first column
You could add it as an inline style:
<?php
$thumbnail = get_the_post_thumbnail( $page->ID, 'thumbnail' );
$content = "<div class='your-post-thing' style='background: url('${thumbnail}') center center/cover no-repeat;'>...stuff...</div>';
echo $content;
?>
OR
Depending on your browser support, you could use object-fit:
<?php
$content .= "<div class='your-post-thing'>";
$content .= "<img class='background-image' src='${thumbnail}' />";
$content .= "</div>";
echo $content;
?>
CSS:
.your-post-thing {
position: relative;
}
.background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
$content = '<div style="background-image:url('.wp_get_attachment_url(get_the_post_thumbnail()).')" class="col-md-6 columns-'.$numCol.($counter % $numCol == 0 ? ' first' : '').'">'; // Add class to first column
you can try something like this, and in your css you can add the rules to view correctly the background.
Im creating a website where there are table (10x10) with adverts inside (pictures+links). I created this table and created one advert, which leads to testlink.com and has picture "img100x100.png". How could i change the code, so I can get different links and images for each table data cell? Please explain as much as possible, because I have just started to learn PHP & MySQL.
I currently have the following code in index.php:
<?php include 'header.php'; ?>
<body>
<?php
$rows_max = 10;
$columns_max = 10;
$links = Array(
'link' => "http://testlink.com",
'image' => "img100x100.png");
print '<table border="1px" style="border-collapse:collapse;">';
for($row = 1; $row <= $rows_max; $row++)
{
print '<tr>';
for($col = 1; $col <= $columns_max; $col++)
{
print '<td width="10px" height="10px" background="'.$links["image"].'" >';
print '<center> </center>';
print '</td>';
}
print '</tr>';
}
print '</table>';
include 'footer.php'; ?>
and
td a
{
width: 100%;
height: 100%;
display: block;
margin-top: 0px auto;
}
Well you could link this up to a database with 10 rows and foreach through those. Or even simpler, you could have this all in an array. It would be a lot easier if you didn't use a table and just made them square with CSS and floated them left in a container. You would get a similar result.
$links = array(
array(
'url' => 'http://link.com/',
'image' => 'image.jpg'
), array(
'url' => 'http://link.com/',
'image' => 'image.jpg'
), array(
'url' => 'http://link.com/',
'image' => 'image.jpg'
)
// etc
);
Then
foreach($links as $link){
// Code to build out a cell
echo $link['url'];
echo $link['image'];
}
I'm using the prettyPhoto API to open the the lightbox manually with the following code:
api_images ['images/fullscreen/image1.jpg','images/fullscreen/image2.jpg','images/fullscreen/image3.jpg'];
api_titles = ['Title 1','Title 2','Title 3'];
api_descriptions = ['Description 1','Description 2','Description 3']
$.prettyPhoto.open(api_images,api_titles,api_descriptions);
The problem i'm facing is that the description values are pulling from Wordpress's WYSIWYG and the code is easily broken with random html tags, punctuation etc
<script type="text/javascript">
$(document).ready(function() {
$('#menu-item-1006').on('click', function(e) {
e.preventDefault();
var images = new Array();
var descriptions = new Array();
var titles = new Array();
<?php
$i = 0;
$images = new WP_Query(array('post_type' => 'clearance', 'showposts' => -1, 'order' => 'menu_order', 'orderby' => 'ASC'));
if ($images->have_posts()) : while ($images->have_posts()) : $images->the_post();
$featured = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');
?>
images[<?php echo $i; ?>] = '<?php echo $featured[0]; ?>';
titles[<?php echo $i; ?>] = '<?php the_title(); ?>'
descriptions[<?php echo $i; ?>] = '<?php echo get_the_content(); ?>';
<?php
$i++;
endwhile;
else:
?>
<?php endif; ?>
$.prettyPhoto.open(images, titles, descriptions);
})
});
</script>
How can i filter the get_the_content() function so it will output w/o errors? Thanks!
a simple solution could be:
replace
<?php echo get_the_content(); ?>
with
<?php echo preg_replace('/\<[^\>]+\>/s', '', get_the_content()); ?>
json_encode(get_the_content()) works!
$content = get_the_content();
echo strip_tags($content, '<a><img>');
will leave only a and img tags. I think it's all what you need for gallery
I want to put this in a loop because it needs to be repeated 6 times, is it true that using variable variables is a bad practice? Do I need associative arrays?
Basically the 'c1' inside the variable needs to progressively change into 'c2', 'c3'...etc
<?php if ($pm_c1_djwd !== '') { ?>
<div>
<span style="width:<?php echo $pm_width_c1;?>%"></span>
<span><?php echo $pm_description_c1; ?></span>
</div>
<?php } ?>
Many Thanks
Why not try regular arrays?
<?php
// Warning: Typed raw in the textarea
$pm_width = array(100, 100, 100, 100, 100, 100);
$pm_description = array(
"Gizmo",
"Doodad",
"Widget",
"Dohicky",
"Thing-me-a-bob",
"Marvelous toy my father gave to me."
);
$pm_c1_djwd = "Snod";
if ($pm_c1_djwd !== '') {
for ($i = 0; $i < count($pm_description); $i++) {
$width = $pm_width[$i];
$desc = $pm_description[$i];
echo "<div>";
echo "<span style='width:${width}%'>$desc</span>";
echo '</div>';
echo PHP_EOL;
}
}
?>
Instead of having a variable for each field like $pm_description_c1, ..c2 and so on, put them in an associative array:
$pms = array(
array('description' => 'your description', 'width' => '123px', 'djwd' = 'what'),
array('description' => 'Second item', 'width' => '123px', 'djwd' = '')
);
Then loop through them:
<?php
foreach ($pms as $pm) {
if ($pm['djwd' !== '') {
?>
<div>
<span style="width:<?php echo $pm['width'];?>%"></span>
<span><?php echo $pm['description']; ?></span>
</div>
<?php
}
}
?>
You can use variable variables for the thing you are asking...
<?php
$i = 0;
while( $i < 6 ){
$i ++;
$variable = "pm_c".$i."_djwd";
$variable2 = "pm_description_c".$i."";
if (isset($$variable) && $$variable != '') { ?>
<div>
<span style="width:<?php echo $$variable;?>%"></span>
<span><?php echo $$variable2; ?></span>
</div>
<?php }
}
Using wordpress I am grabbing the first image attachment from the posts. This works fine:
<?php
global $post;
$args = array(
'post_parent' => $post->ID,
'post_type' => 'attachment',
'post_mime_type' => 'image',
'orderby' => 'menu_order',
'order' => 'ASC',
'numberposts' => 2 );
$images = get_posts($args);
if ( $images ) {
$i = 0;
while($i <= 1){
$image = wp_get_attachment_url( $images[$i]->ID );
echo "<img src='$image' />";
$i++;
}
}
?>
I am also trying to process these images which in conjunction with timthumb resizes the images depending on browser size. I can only get this to work on one of the two images. I would expect it to log and resize twice but the script is not running in the loop. Can someone please help ? This is what the full snip I am working with looks like :
<?php
global $post;
$args = array(
'post_parent' => $post->ID,
'post_type' => 'attachment',
'post_mime_type' => 'image',
'orderby' => 'menu_order',
'order' => 'ASC',
'numberposts' => 2 );
$images = get_posts($args);
if ( $images ) {
$i = 0;
$z = 1;
while($i <= 1){
$image = wp_get_attachment_url( $images[$i]->ID );
echo "<img src='$image' class='image_$z' />";
?>
<script type="text/javascript">
var image = "<?php echo $image ; ?>";
var under700_<? echo $z ?> = "/wp-content/themes/Loupe/scripts/timthumb.php?src=<? echo $image ?>&w=340";
var under900_<? echo $z ?> = "/wp-content/themes/Loupe/scripts/timthumb.php?src=<? echo $image ?>&w=440";
function imageresize() {
var contentwidth = $('#two_up').width();
if ((contentwidth) < '700'){
console.log('under 700_<? echo $z ?>' + under700_<? echo $z ?>);
$('img .image_<? echo $z ?>').attr('src', under700_<? echo $z ?>);
} else if ((contentwidth) < '900') {
// console.log('under 900');
$('img .image_<? echo $z ?>').attr('src', under900_<? echo $z ?>);
}
else {
image;
}
}
</script>
<?php
$i++;
$z++;
}
}
?>
Use json_encode() it makes a JavaScript object (or array or combined) of a PHP variable and makes it
I'm assuming $images is an array; if not, tweak this solution to fit.
Javascript:
var images = <? echo json_encode($images); ?>;
for( x=0; x<images.length-1; x++)
{
someFunction(images[x]);
}
I would recommend setting specific height/width in your css and then using jquery to replace the images as the page loads.
As an alternative, try doing the entire processing in php. You'll save your users loading time, and imho, it's much easier.
http://www.imagemagick.org/script/index.php
What I guess you are trying to do is something like this:
<?php
global $post;
$args = array(
'post_parent' => $post->ID,
'post_type' => 'attachment',
'post_mime_type' => 'image',
'orderby' => 'menu_order',
'order' => 'ASC',
'numberposts' => 2
);
$images = get_posts($args);
if ( $images ) {
$i = 0;
?>
<script type="text/javascript">
function imageresize(imgElement, srcString) {
var under700 = "/wp-content/themes/Loupe/scripts/timthumb.php?src=" + srcString + "&w=340";
var under900 = "/wp-content/themes/Loupe/scripts/timthumb.php?src=" + srcString + "&w=440";
var contentwidth = $('#two_up').width();
if ((contentwidth) < '700'){
console.log('under 700' + under700);
$(imgElement).attr('src', under700);
imgElement.onload = ''; //stop the onload event from happening again
} else if ((contentwidth) < '900') {
// console.log('under 900');
$(imgElement).attr('src', under900);
imgElement.onload = ''; //stop the onload event from happening again
}
else {
image; //don't know what to make of this (maybe you do)
}
}
</script>
<?php
while($i < count($images)){
$image = wp_get_attachment_url( $images[$i]->ID );
echo "<img src='$image' class='image' onload='imageresize(this, \"$image\")' />";
$i++;
}
}
?>
But, as suggested before by #Toast: I'd do this in PHP and prevent the user from reloading all the images on the page. Because that is effectively done by the above code.
If you have the path of the source image files that you are trying to resize, then you could use getimagesize to get the image size, and adjust the src uri off the images accordingly.
The only guess I have, at you using javascript to do this, is that you are using the DHTML/CSS box model to help you calculate the width of the container (#two_up) for the images. This I would strongly discourage, but still the above code should work! ;)