Can you please take a look at this snippet and let me know why I am outputting the alt attribute in
echo '<img src="'.wp_get_attachment_link($image, 'large').'" alt="Projects" />';
in following snippet:
$images = get_post_meta($post->ID, 'vdw_gallery_id', true);
foreach ($images as $image) {
echo '<div class="col-xs-6 col-md-3">';
echo '<div class="thumbnail">';
echo '<img src="'.wp_get_attachment_link($image, 'large').'" alt="Projects" />';
echo '</div>';
echo '</div>';
}
here is what happening
wp_get_attachment_link returns an html link https://codex.wordpress.org/Function_Reference/wp_get_attachment_link
Use wp_get_attachment_image_src instead https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/
$images = get_post_meta($post->ID, 'vdw_gallery_id', true);
foreach ($images as $image) { ?>
<div class="col-xs-6 col-md-3">
<div class="thumbnail">
<?php
$img = wp_get_attachment_image_src($image,'large');
if ($img && isset($img[0])):
?>
<img src="<?php echo $img[0];?>" alt="Projects" />
<?php endif;?>
</div>
</div>
<?php }?>
TRY LIKE THIS
echo "<img src='".wp_get_attachment_image_src($image,'large')."' alt='Projects'/>";
error in this line
echo '<img src="'.wp_get_attachment_link($image, 'large').'" alt="Projects" />';
Your error are due to ' in 'large' change to below
$images = get_post_meta($post->ID, 'vdw_gallery_id', true);
foreach ($images as $image) {?>
<div class="col-xs-6 col-md-3">
<div class="thumbnail">
<img src="<?=wp_get_attachment_link($image, 'large')?>" alt="Projects" />
</div>
</div>
<?php }?>
Related
In WordPress I need to fetch the Author image of author who created post. I tried to get the profile image in this way, but it didn't work.
Here is the code I have written to get other author_meta_details.
<div class="row">
<div class="avatar col-md-3">
<picture class="avatar-circle">
<?php if($avatar = get_avatar(get_the_author_meta('ID')) !== FALSE): ?>
<img src="<?php echo $avatar; ?>" alt="">
<?php else: ?>
<img src="/wp-content/themes/lymited-child/images/avatar-image.png">
<?php endif; ?>
</picture>
</div>
<div class="author-details col-md-9">
<div class="author-name"><strong><?php echo get_the_author_meta('first_name'); ?></strong> - <?php echo get_the_author_meta('nickname'); ?>
</div>
<div class="author-summery"><?php echo get_the_author_meta('description'); ?>
</div>
</div>
</div>
Try this
<?php
$get_author_id = get_the_author_meta('ID');
$get_author_gravatar = get_avatar_url($get_author_id, array('size' => 450));
if(has_post_thumbnail()){
the_post_thumbnail();
} else {
echo '<img src="'.$get_author_gravatar.'" alt="'.get_the_title().'" />';
}
?>
OR Remove this if the condition and try
echo get_avatar( get_the_author_meta('ID') );
get_avatar() returns <img> element so you don't need to wrap it to img again
Also you need to wrap $avatar = ... to parenthesis as = priority is lower than !==
try to replace this
<?php if ( $avatar = get_avatar(get_the_author_meta('ID')) !== FALSE): ?>
<img src="<?php echo $avatar; ?>" alt="">
with this
<?php if ( ( $avatar = get_avatar(get_the_author_meta('ID')) ) !== FALSE): ?>
<?php echo $avatar; ?>
I am trying to display images on a page using the bootstrap grid system, where their names are dynamically created by taking it from a database. For example I have this database, and I want to use the imageID in the src name of each image. Is there any cleaner way to do it without having to manually add a new div etc for each image?
PHP Code for getting image id:
<?php
//dynamically render images
include "../storescripts/connect-mysql.php";
$sql = mysql_query("SELECT * FROM imageGallery ORDER BY dateAdded ASC");
$images = array();
$imageCount = mysql_num_rows($sql); //Count the amount of products
if($imageCount > 0){
while($row = mysql_fetch_array($sql)){
$image = $row['imageID'];
$images[] = $image;
}
}else{
$image_gallery = "<h2>You have no images in the database</h2>";
}
?>
My HTML for displaying the images:
<div class="col-md-12">
<div class="col-md-3 galleryImg">
<img onclick="myfunction(this)" class="galleryImage" src="../img/gallery/<?php echo $images[0] ?>.png" alt="Jedi Cycle Sport Gallery Image">
</div>
<div class="col-md-3 galleryImg">
<img onclick="myfunction(this)" class="galleryImage" src="../img/gallery/<?php echo $images[1] ?>.png" alt="Jedi Cycle Sport Gallery Image">
</div>
<div class="col-md-3 galleryImg">
<img onclick="myfunction(this)" class="galleryImage" src="../img/gallery/<?php echo $images[2] ?>.png" alt="Jedi Cycle Sport Gallery Image">
</div>
<div class="col-md-3 galleryImg">
<img onclick="myfunction(this)" class="galleryImage" src="../img/gallery/<?php echo $images[3] ?>.png" alt="Jedi Cycle Sport Gallery Image">
</div>
</div>
See the image source for how I used the PHP.
As you have images available within $images array. So make a foreach loop inside html div.
<div class="col-md-12">
<?php foreach ($images as $image): ?>
<div class="col-md-3 galleryImg">
<img onclick="myfunction(this)" class="galleryImage" src="../img/gallery/<?php echo $image; ?>.png" alt="Jedi Cycle Sport Gallery Image">
</div>
<?php endforeach; ?>
</div>
Update
This is for if you want only four divs inside a parent div over and over again.
<?php
$i = 0;
foreach ($images as $image):
if ($i % 4 == 0) {
echo '<div class="col-md-12">';
}
echo '<div class="col-md-3 galleryImg">';
echo '<img onclick="myfunction(this)" class="galleryImage" src="../img/gallery/' . $image .'" alt="Jedi Cycle Sport Gallery Image">';
echo '</div><!-- outputs child div -->';
$i++;
if ($i % 4 == 0) {
echo '</div> <!-- outputs parent div -->';
}
endforeach;
if ($i % 4 != 0) {
echo '</div> <!-- outputs parent div-->';
}
Simply use the foreach. Use the code as follows
<div class="col-md-12">
<?php foreach($images as $image) {?>
<div class="col-md-3 galleryImg">
<img onclick="myfunction(this)" class="galleryImage" src="../img/gallery/<?php echo $image ?>.png" alt="Jedi Cycle Sport Gallery Image">
</div>
<?php } ?>
</div>
Instead of manually adding divs, you can simply use a foreach loop like this:
<div class="col-md-12">
<?php
foreach($images as $image){
?>
<div class="col-md-3 galleryImg">
<img onclick="myfunction(this)" class="galleryImage" src="../img/gallery/<?php echo $image; ?>.png" alt="Jedi Cycle Sport Gallery Image">
</div>
<?php
}
?>
</div>
I am writing a custom landing page in PHP parsing an XML product feed. The product descriptions are very long, as it goes into technical information and specifications, so need to be condensed to read the first 200 characters. hopefully with a read more link once 200 characters has been reached.
The code I have so far is:
<?php
$xml = simplexml_load_file('feed.xml');
foreach ($xml->item as $item) { ?>
<div class="row">
<div class="lhs">
<h3><?php echo $item->brand.' '.$item->title ?></h3>
<p class="pri">£<?php echo $item->price ?></p>
<p><?php echo $item->description; ?></p>
</div>
<div class="rhs">
<img src="<?php echo $item->image_link ?>" alt="<?php echo $item->title ?>" height="150" />
</div>
</div>
<?php
}
?>
Please could anyone advise what else I need to add? I can follow basic patterns in PHP, I just need some guidance.
Many thanks in advance.
Notice the $short_description line.
Edited with some basic js example of "Show more"
<?php
$xml = simplexml_load_file('feed.xml');
foreach ($xml->item as $item) {
$short_description = substr($item->description, 0, 200);
?>
<div class="row">
<div class="lhs">
<h3><?php echo $item->brand . ' ' . $item->title ?></h3>
<p class="pri">£<?php echo $item->price ?></p>
<p id="shown"><?php echo $short_description; ?>... Show more</p>
<p id="hidden"><?php echo $item->description; ?></p>
</div>
<div class="rhs">
<img src="<?php echo $item->image_link ?>" alt="<?php echo $item->title ?>" height="150" />
</div>
</div>
<?php
}
?>
image folder has 3 files
<img src='images/AAA_1.jpg'>
<img src='images/AAA_2.jpg'>
<img src='images/AAA_3.jpg'>
<img src='images/BBB_1.jpg'>
<img src='images/BBB_2.jpg'>
<img src='images/BBB_3.jpg'>
<img src='images/CCC_3.jpg'>
PHP is
foreach ($carousel as $image) {
if(strpos($image, 'AAA_') === 0){
echo "<div class='box'><img src='images/carousel/$image'/></div>";
}
}
so the output is
<div class='box'>
<img src='images/AAA_1.jpg'>
</div>
<div class='box'>
<img src='images/AAA_2.jpg'>
</div>
<div class='box'>
<img src='images/AAA_3.jpg'>
</div>
How can I add a first class on the fist box, looks like
<div class='box first'>
<img src='images/AAA_1.jpg'>
</div>
<div class='box'>
<img src='images/AAA_2.jpg'>
</div>
<div class='box'>
<img src='images/AAA_3.jpg'>
</div>
Use the key:
foreach ($carousel as $key=>$image) {
$first = $key == 0 ? ' first' : '';
if(strpos($image,'AAA_') === 0){
echo <<<EOD
<div class='box{$first}'>
<img src='images/carousel/{$image}.jpg'>
</div>
EOD;
}
}
Note: I used a heredoc statement for the echo as I prefer to echo multiple tags of HTML over multiple lines.
Simple: Use a flag.
$firstEchoed = FALSE;
foreach ($carousel as $image) {
if(strpos($image,'AAA_') === 0){
echo "<div class='box";
if ( ! $firstEchoed)
echo " first";
echo "'><img src='images/carousel/$image'/></div>";
$firstEchoed = TRUE;
}
}
You can use a boolean flag, or add count param to foreach:
foreach ($carousel as $i => $image)
I have the following foreach:
<?php
foreach($result15 as $row15) {
$thumb15 = $row15->thumb;
$id15 = $row15->id_discografia;
?>
<div class='wrapper'>
<div class="album"><img src="img/<?php echo $thumb15; ?>" alt="" width="246" height="246"></div>
</div>
<?php } ?>
But thus appears only a div .album within each div .wrapper. How do I see two divs .album within each div .wrapper?
UPDATE
Guys, found the solution:
<?php
$total = 0;
foreach($result15 as $row15){
$thumb15 = $row15->thumb;
$id15 = $row15->id_discografia;
if($total == 0){
echo '<div class="wrapper">';
}
?>
<div class="album" data-disco="disco<?php echo $id15; ?>">
<img src="img/<?php echo $thumb15; ?>" alt="" width="246" height="246">
</div>
<?php
$total = $total + 1;
if($total % 2 == 0){
echo '</div>';
$total = 0;
}
}
?>
<div class='wrapper'>
<div class="album"><img src="img/<?php echo $thumb15; ?>" alt="" width="246" height="246">
<div class="album"><img src="img/..." alt="" width="246" height="246"></div>
</div>
Something like this?
EDIT
I dont understand what you want. But you can do this to get two divs, but you will need to get your image path for the second div image:
<?php
foreach($result15 as $row15) {
$thumb15 = $row15->thumb;
$id15 = $row15->id_discografia;
echo "<div class='wrapper'>";
echo '<div class="album"><img src="img/'.$thumb15.' alt="" width="246" height="246"></div>';
echo '<div class="album"><img src="img/'.$thumb15.' alt="" width="246" height="246"></div>';
echo '</div>';
} ?>
Try this:
<?php
foreach($result15 as $row15) {
$thumb15 = $row15->thumb;
$id15 = $row15->id_discografia;
echo "<div class='wrapper'>";
echo '<div class="album"><img src="img/'.$id15 .' alt="" width="246" height="246"></div>';
echo '<div class="album"><img src="img/'.$id15 .' alt="" width="246" height="246"></div>';
echo '</div>';
} ?>
A nice solution could be to use array chunk considering you want to treat the data in 'chunks' of 2 images at a time. This way, if you want to alter how many images appear in a wrapper you only need to change your chunk size.
$chunkSize = 2;
foreach (array_chunk($result15, $chunkSize) as $wrapperImages) {
echo '<div class="wrapper">';
foreach ($wrapperImages as $image) {
$thumb = $image->thumb;
echo '<div class="album"><img src="img/'.$thumb.' alt="" width="246" height="246"></div>';
}
echo '</div>';
}