Is it possible to change/add a font awesome icon based on the fetched data?
If the type is .pdf the font awesome will be <i class="fa fa-file-pdf-o"> else if type is .docx it will be <i class="fa fa-file-word-o"></i>. Can someone give me ideas how to do it? What will i use? Javascript or PHP?
here's some of my code.
<div class="col-sm-6 col-md-6">
<?php
$sql ="SELECT * FROM lectures WHERE subj_descr = '$subj'";
$result = mysqli_query($con, $sql);
while($row = mysqli_fetch_array($result)){
$file = $row['file'];
$type = $row['type'];
?>
<a style="display:block; margin-top:5px;" href="uploads/<?php echo $file ?>" target="_blank"><i class="fa fa-file-word-o"></i> <?php echo $file; ?></i></a>
<?php
}
?>
</div>
Try something like this:
<?php
if($type = $row['type'] == 'pdf') // make <i> tag on behalf of condition
{
echo '<i class="fa fa-file-pdf-o">'. your text here .'</i>';
}
else if($type = $row['type'] == 'txt')
{
echo '<i class="fa fa-file-word-o">'. your text here .'</i>';
}
?>
First of all, best practice is to separate your presentation from your logic. Having a mysql query right smack in the middle of your HTML is not a good idea. Instead put your query before your HTML and loop over the results in the HTML.
Put something like this before your HTML:
$files = [];
while($row = mysqli_fetch_array($result)){
$file['filename'] = $row['file'];
$file['type'] = $row['type'];
switch($file['type']) {
case 'pdf':
$file['fa'] = 'fa-file-pdf-o';
break;
case 'docx':
case 'doc':
$file['fa'] = 'fa-file-word-o';
break;
default:
throw new Exception('Invalid file type'); // Handle this how you want
}
$files[] = $file;
}
Then within your HTML loop over the result:
<div class="col-sm-6 col-md-6">
<?php
foreach ($files as $file) {
?>
<a style="display:block; margin-top:5px;" href="uploads/<?php echo $file['filename'] ?>" target="_blank">
<i class="fa <?php echo $file['fa'];?>"></i> <?php echo $file['filename']; ?></i>
</a>
<?php
}
?>
</div>
You can also use a switch here.
switch(strtolower($row['type'])){
case 'pdf':
$icon = "fa-file-pdf-o";
break;
default:
$icon = "fa-file-word-o";
break;
}
echo "<i class='fa ". $icon ."'>". your text here ."</i>";
Note: You can use a variable value to your text as well. Which will then also go inside the switch case.
you can also do like this.put less code in html.
<?php
$row['type']=='pdf'?'pdf':'txt';
?>
<i class="fa fa-file-<?=$row['type']?>-o"></i>;
Add the following function to your page. If you need to add additional file types/icons you can add more elements to the array $fa in "new_file_type" => "fa-icon-name". Just don't forget the commas . Arrays
<?php
function getFa($type){
$fa = array(
"pdf" => "fa-file-pdf-o",
"docx" => "fa-file-word-o"
);
return isset($fa[$type]) ? $fa[$type] : '';
}
?>
Then in the HTML it can be used like this:
<i class="fa <?php echo getFa($type); ?>"></i> <?php echo $file; ?></i>
The function is not necessary but it'll prevent errors in case the $type variable is empty or the file type is not contained in the array.
It is also possible to just create an array and call it from your code if you're certain that the file type will always exist and it will have an element associated in the array.
Example:
<?php
$fa = array(
"pdf" => "fa-file-pdf-o",
"docx" => "fa-file-word-o"
);
?>
In HTML:
<i class="fa <?php echo $fa[$type]; ?>"></i> <?php echo $file; ?></i>
Related
This is my output, clicking like button should add +1 to the likes column in MySQL .
I use a while loop to iterate buttons
For example, the "button" is displayed multiple times in the picture below. I have a tag in the while loop, so it outputs the button several times. And that name comes from the database.
MY Question. All the buttons in the will have the same ID. Currently, the user can only click the first button. I would like to give each element a different ID if possible. Then I would like to use jQuery to add a click event. So, if I click on the 4th button, the like count for that comment should be increased.
What I need.
How I can assign a different ID to each element in the far loop, so it does only make the first Image clickable but instead all elements' clickables?
<?php
$result = mysqli_query($link, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
?>
<div class="single-item">
<div class="cmt_user"><div class="circle2">
<h5>
<?php
$name = $row['name'];
$f_letter = strtoupper($name[0]);
echo $f_letter;
?>
</h5>
</div>
<h4><?php echo $row['name']; ?></h4>
</div>
<p><?php echo $row['comment']; ?></p><div class="lcr">
<ul>
<li id = "modified" > </li>
</ul>
<form action="<?php echo $_SERVER['PHP_SELF']?>" method="POST" class="form">
<button onclick="imageClick(<?php echo $row['id_vnr']; ?>)" name="like" value="<?php echo $row['id'] ?>" class="like_btn"><i class="fa fa-heart"></i> Like</button>
</form>
this is Php Code to insert likes count
<?php
$like = $_POST['like'];
if($like){
$sql = "UPDATE comments set likes = likes + 1 where id = '".$row['id']."'";
echo $sql;
$result=mysqli_query($link,$sql);
}
?>
It's really simple. do it like this
$result = mysqli_query($link, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
?>
<div class="single-item">
<div class="cmt_user"><div class="circle2">
<h5>
<?php
$name = $row['name'];
$f_letter = strtoupper($name[0]);
echo $f_letter;
?>
</h5>
</div>
<h4><?php echo $row['name']; ?></h4>
</div>
<p><?php echo $row['comment']; ?></p><div class="lcr">
<ul>
<li id = "modified" > </li>
</ul>
<form action="<?php echo $_SERVER['PHP_SELF']?>" method="POST" class="form">
<input name="like" value="1">
<input name="row_id" value="<?php echo $row['id'] ?>">
<button class="like_btn"><i class="fa fa-heart"></i> Like</button>
</form>
And get POST values like this
<?php
$like = $_POST['like'];
$row_id = $_POST['row_id'];
if(isset($like) && $like == 1){
$sql = "UPDATE comments set likes = likes + 1 where id = '".$row_id."'";
echo $sql;
$result=mysqli_query($link,$sql);
}
?>
Situation
I'm creating a custom Wordpress website where I want to show the most recent articles grouped by day and have it scroll infinitely when you've reached the bottom of your screen.
Problem
I don't know how to continue with the date you were on without breaking the layout.
I've seen many code that involve having infinite scroll, but none of them really worked for me since it also needs to match the design.
Here is the design:
The image pretty much explains what I need to create and so I've written the following code:
<div class="recent">
<?php
$args = array(
'posts_per_page' => -1,
'orderby' => 'date'
);
$myQuery = new WP_Query($args);
$date = '';
$postCount = 0;
$newDay = false;
if ( $myQuery->have_posts() ) : while ( $myQuery->have_posts() ) : $myQuery->the_post();
$postCount++;
if ( $date != get_the_date() ) {
if ( $postCount != 1 ) {
$newDay = false;
if (!$newDay) {
?></div><?php
}
?>
</div>
<?php
}
?>
<div class="recent__articles">
<?php
$newDay = true;
$date = get_the_date();
?>
<div class="recent__header">
<img class="header__icon" src="<?php echo get_home_url() ?>/wp-content/themes/insane/assets/images/time.svg" alt="time-icon">
<?php echo $date; ?>
</div>
<?php
if ($newDay) {
?>
<div class="articles__wrapper"><?php
}
}
?>
<div class="recent__article">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<figure class="article__image">
<?php if ( has_post_thumbnail() ) :
the_post_thumbnail();
else : ?>
<img src="<?php echo get_home_url() ?>/wp-content/themes/insane/assets/images/article-placeholder.png" alt="image-placeholder">
<?php endif ?>
</figure>
<div class="article__meta">
<span class="article__cat">
<?php
foreach((get_the_category()) as $category){
echo $category->name;
}
?>
</span>
<h2 class="article__title"><?php echo get_the_title() ?></h2>
<div class="article__date">
<?php echo esc_html( time_difference( get_the_time('U'), current_time('timestamp') ) ); ?>
</div>
</div>
</a>
</div>
<?php
endwhile; endif;
wp_reset_postdata();
?>
</div>
Top part where I check the date and increment the postCount is so I can group the articles of that day in separate div and style it accordingly.
Now all I need is to check wether I've reached the bottom and continue with where I left off.
Any help with the directions I need to be going is much appreciated.
Thank you!
I've fixed my problem in combination with the Ajax Load More plugin.
I hope this will help others facing the same problem as I did.
If anybody sees improvement in my code, I'd much appreciate it.
Tested on: MacOS - Chrome/Safari/Firefox & iOS - Chrome/Safari
I've installed the Ajax Load More plugin
They have a Repeat Templates section which is basically the while loop in php and I've added the following code (a bit stripped from what I've showed here above).
<?php $postCount++;
if ( $date != get_the_date() ) {
if ( $postCount != 1 ) {
$newDay = false;
if (!$newDay) {
?></div><?php
}
?>
</div>
<?php
}
?>
<div class="recent__articles">
<?php
$newDay = true;
$date = get_the_date();
?>
<div class="recent__header">
<img class="header__icon" src="<?php echo get_home_url() ?>/wp-content/themes/insane/assets/images/time.svg" alt="time-icon">
<?php echo $date; ?>
</div>
<?php
if ($newDay) {
?>
<div class="articles__wrapper"><?php
}
}
?>
<div class="recent__article">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<figure class="article__image">
<?php if ( has_post_thumbnail() ) :
the_post_thumbnail();
else : ?>
<img src="<?php echo get_home_url() ?>/wp-content/themes/insane/assets/images/article-placeholder.png" alt="image-placeholder">
<?php endif ?>
</figure>
<div class="article__meta">
<span class="article__cat">
<?php
foreach((get_the_category()) as $category){
echo $category->name;
}
?>
</span>
<h2 class="article__title"><?php echo get_the_title() ?></h2>
<div class="article__date">
<?php echo esc_html( time_difference( get_the_time('U'), current_time('timestamp') ) ); ?>
</div>
</div>
</a>
</div>
I've a .php file that I load in somewhere els that looks like this:
<div class="recent">
<?php
$date = '';
$postCount = 0;
$newDay = false;
echo do_shortcode("[ajax_load_more post_type='post' posts_per_page='2' scroll_distance='0']");
?>
</div>
Now for the last part I've written the following in jQuery:
// Ajax load more fix
function ajaxShowMore() {
var oldXHR = window.XMLHttpRequest;
function newXHR() {
var realXHR = new oldXHR();
realXHR.addEventListener("readystatechange", function() {
if (realXHR.readyState === 4) { // When the Ajax call is finished new content is loaded
var oldRecentHeaders = $('.recent__header'); // Store all previous recent headers in variable
setTimeout(function() { // Set a timeout, since it goes a bit to fast to store the data
var newRecentHeaders = $('.recent__header'); // Store all the headers in a variable
newRecentHeaders.splice(0, oldRecentHeaders.length); // Splice it, so you only get the new added headers
if (newRecentHeaders.first().text() === oldRecentHeaders.last().text()) { // Check if the first of new header date is the same as the last of the old header date
var newArticles = newRecentHeaders.first().parent().find('.articles__wrapper').children(); // Store all the articles
newRecentHeaders.first().parent().remove(); // Remove the first new added articles
oldRecentHeaders.last().parent().find('.articles__wrapper').append(newArticles); // Add them here
}
}, 10);
}
}, false);
return realXHR;
}
window.XMLHttpRequest = newXHR;
}
So for me this specific solution works, based on the classes and structure of my project I've set.
I hope this helps
I'm having a hard time displaying the title and note on each row of my database. I want to display one row (with the title and note) after each
from a form in a page heading to the displaying of row datas page.
This is my code below:
//
Let's say that we have 4 rows of datas. In my code, I can only display the first row, because it keeps having the first row's data. This is because the form is in the first php file. Then after I submit the form, it's directed to this file, and it keeps getting the first row.
<?php $con=mysqli_connect("localhost","root","","task");?>
<?php $results = mysqli_query($con, "SELECT * FROM note"); ?>
<?php while ($row = mysqli_fetch_array($results)) { ?>
<?php
$id=$row['id'];
echo ' ';
echo '<button class="call_modal" data-id="$id" style="cursor:pointer;">'. $row['title'] . '</button>';
?>
<?php
}?>
<?php $results = mysqli_query($con, "SELECT * FROM note"); ?>
<?php while ($row = mysqli_fetch_array($results)) { ?>
<div class="note" data-id="<?= $row['id'] ?>">
<div class="modal">
<div class="modal_close close"></div>
<div class="modal_main">
<?php
echo '<br><br>';
echo '<div class="padding">'.$row['title'].'';
echo '<br><br><br><br>';
echo ''.$row['note'].'</div>';
?>
</div>
</div>
<?php
}?>
<?php
<?php
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
} ?>
The code below is not tested but it should be correct and give you a better idea of what you are doing right/wrong. I hope it helps..
<?php
$con=mysqli_connect("localhost","root","","task");
$results = mysqli_query($con, "SELECT * FROM note");
while ($row = mysqli_fetch_array($results)) { //starting your data row loop
$id=$row['id'];// you are creating a variable here but not using it two lines down.
echo ' ';
//YOUR OLD CODE echo '<button class="call_modal" data-id="$id" style="cursor:pointer;">'. $row['title'] . '</button>';
echo '<button class="call_modal" data-id="$id" style="cursor:pointer;">'. $id . '</button>';// use the variable "$id" that you created here
// You dont need the next two lines, you already did a query and have the data loaded in the "$results" array
/* $results = mysqli_query($con, "SELECT * FROM note");
while ($row = mysqli_fetch_array($results)) */
?> // close the php tag if you are going to switch to html instead of "echoing html"
/* OLD CODE <div class="note" data-id="<?= $row['id'] ?>"> you were missing the "php" in the php tags */
<div class="note" data-id="<?php echo $id; ?>"> // corrected code
<div class="modal">
<div class="modal_close close"></div>
<div class="modal_main">
<?php //switching back to php so create your open tag again...
echo '<br><br>';
echo '<div class="padding">'.$row['title'].'';
echo '<br><br><br><br>';
echo ''.$row['note'].'</div>';// you dont NEED the '' before .$row.... unless you want it but its just essentially a blank string
?>
</div>
</div>
<?php
} // ending your "for each data row" here
?>
<?php
// PS you're not using this function anywhere unless its in ommited code?
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
} ?>
In your loop you're using mysqli_fetch_array, which returns an array with each element in that array containing the field value.
What you want is mysqli_fetch_assoc instead, this will return a hash which you can then use the way you're using it now.
Another thing is that you don't need to have 2 loops in there querying the database. And please indent your code, it makes it really hard for you and everyone else to read it.
Here is the updated/cleaned up version of your code. This has been tested, you can find a sample code with instructions to run on my Github here.
<?php
$con = mysqli_connect("localhost", "root", "", "task");
$results = mysqli_query($con, "SELECT * FROM note");
while ($row = mysqli_fetch_assoc($results)) {
$id = $row['id'];
echo ' ';
echo '<button class="call_modal" data-id="' . $id . '" style="cursor:pointer;">'. $row['title'] . '</button>';
?>
<div class="note" data-id="<?= $row['id'] ?>">
<div class="modal">
<div class="modal_close close"></div>
<div class="modal_main">
<?php
echo '<br /><br />';
echo '<div class="padding">' . $row['title'];
echo '<br /><br /><br /><br />';
echo $row['note'];
echo '</div>'
?>
</div>
</div>
</div>
</div>
<?php
}
?>
<?php
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
After hours of research and try and errors I start my first question here.
If it can be done with wordpress syntax even better. Otherwise I think I'm near to the solution.
I want a custom gallery on a wordpress template page but with the post image from certain categories with the content from it. So far so good.
In my designerin.php template I give every images a class img-x.
class="img-<?php echo $img_counter; ?>
And the content get the id img-x
id="img-<?php echo $post_counter; ?>
The counter is just an increment. So image 1 has class img-1, image 2 img-2 and so on.
Now I want the related content of that image created in the wordpress editor showing up when you are clicking on this specific image.
Say you click on image 5 and want the content from image 5.
I'm stucked on the step where I say (in jQuery), that display the content
if .img-x == #img-x {
display the_content()
}
Enough said - here is my jQuery code:
$(".large-img-wrapper").hide();
$('.gallery li').on('click', function(e) {
e.preventDefault();
var largeImgLink = $(this).find('a').attr('href');
$(".large-img-wrapper").first().fadeIn();
var imgContent = $('#img-5').html();
$('#large-img').remove();
$('#append-id').remove();
$(".large-img").append('<img id="large-img" src="' + largeImgLink + '">').fadeIn();
$(".large-img").append('<div id="append-id">' + imgContent + '</div>').fadeIn();
$(".large-img-container .img-title").remove();
});
The var imgContent was just a test. Every image shows up the content from image 5 at the moment.
My template page code:
<div class="row content full-width">
<div class="cats row">
Alle Kategorien
<?php query_posts( 'category_name=designerin&posts_per_page=-1'); if (have_posts()) : while (have_posts()) : the_post();
$categories = get_the_category();
$separator = ' ';
$output = '';
if($categories){
foreach($categories as $category) {
$output .= $category->cat_name;
}
}
$cat_name = get_category(get_query_var('cat'))->name;
?>
<?php echo trim($output); ?>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div>
<ul class="row small-block-grid-3 medium-block-grid-5 large-block-grid-8 gallery">
<?php $img_counter = 0; ?>
<?php query_posts( 'category_name=designerin&posts_per_page=-1'); if (have_posts()) : while (have_posts()) : the_post();
$img_counter++;
$thumb_id = get_post_thumbnail_id();
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail', true);
$large_url_array = wp_get_attachment_image_src($thumb_id, 'large', true);
$thumb_url = $thumb_url_array[0];
$large_url = $large_url_array[0];
$categories = get_the_category();
$separator = ' ';
$output = '';
if($categories){
foreach($categories as $category) {
$output .= $category->cat_name;
}
}
?>
<li>
**<img src="<?php echo $thumb_url; ?>" alt="<?php echo the_title(); ?>">**
</li>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</ul>
<?php $post_counter = 0; ?>
<?php query_posts( 'category_name=designerin&posts_per_page=-1'); if (have_posts()) : while (have_posts()) : the_post();
$post_counter++;
?>
**<ul class="large-img-wrapper">
<li>
<div class="large-img-container">
<div class="large-img"></div>
<div class="img-content" id="img-<?php echo $post_counter; ?>">
<div class="img-title">
<?php echo the_title(); ?>
</div>
<div class="img-text">
<?php echo the_content(); ?>
</div>
</div>
</div>
</li>
</ul>**
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div>
The first query is for filtering the categories by slug.
My last attempt feels so near..
var inc = '5';
var objClass = $(this).find("a").hasClass( "img-" + inc );
console.log(objClass);
When I'm clicking on the 5th image I get "true". But how can I get the X (inc) related to my template php code?
Sorry for my english and possible bad code
If i'm understanding correctly this might help
$('.gallery li').on('click', function(e) {
e.preventDefault();
var className = $(this).find('a').attr('class');
var imgContent = $('#'+className).html();
});
I am using a module for joomla called RokMiniEvents but there is a problem, once you use the navigation it adds a path to the events url: "/modules/mod_rokminievents3"..
Let's say the working url is this:
<a class="rme-title" href="/td/index.php/component/jevents/icalrepeat.detail/2014/07/22title=proto-seminario/0/-/-?rp_id=2&Itemid=0">Event name</a>
But once you use the Navigation it becomes:
<a class="rme-title" href="/td/modules/mod_rokminievents3/index.php/component/jevents/icalrepeat.detail/2014/07/22title=/0/-/-?rp_id=2&Itemid=0">Πρωτο Σεμιναριο</a>
I would like to use something like:
where a with class="rme-title" replace the /mod_rokminievents3 with nothing..
Is that possible with javascript or any other language ? I've seen a lot of answers here but without the class selection..
Select the elements and replace that part of the href with nothing using String.replace
$('a.rme-title').attr('href', function(_, href) {
return href.replace('/mod_rokminievents3','');
});
Hi I had same problem with this module, this is my solution:
In modules/mod_rokminievents3/tmpl open default_item.php
search the code:
<?php if (!$event->getLink()): ?>
<span class="rme-title"><?php echo $event->getTitle(); ?></span>
<?php else: ?>
<?php
$values = $event->getLink();
$internal = $values['internal'];
$link = $values['link'];
?>
<a class="rme-title<?php echo $internal ? '' : ' rme-external-link'; ?>" href="<?php echo $link ?>"><?php echo $event->getTitle(); ?></a>
<?php endif; ?>
finally get $link value and replace "modules/mod_rokminievents3/" by "" here is the final code:
<?php if (!$event->getLink()): ?>
<span class="rme-title"><?php echo $event->getTitle(); ?></span>
<?php else: ?>
<?php
$values = $event->getLink();
$internal = $values['internal'];
$link = $values['link'];
$link=str_replace ("modules/mod_rokminievents3/" ,"" , $link );
?>
<a class="rme-title<?php echo $internal ? '' : ' rme-external-link'; ?>" href="<?php echo $link ?>"><?php echo $event->getTitle(); ?></a>
<?php endif; ?>
This works for me.