I'm using WordPress and advanced custom fields, and I want to display 3-6 images depending on which fields are selected on a Select field post type.
I have it so the value/variables tie into the image name, so it would display images selected based on your choices.
e.g. "red : Red"
<img src="example.com/images/image-<?php the_field(color) ?>.jpg" alt="<?php the_field(color) ?>">
Now the noob question is, when more than one field is selected, it returns an array (i.e. red, green, black.) and I can't really have the function output as an array since it won't match the image name.
Does anyone know how to separate an array for multiple image outputs?
foreach ($image_list as $image) {
printf('<img src="example.com/images/image-%s.jpg" alt="%s" />', $image['color'], $image['color']);
}
If you don't have an associated array but just a simple array you might do:
foreach ($gem_colors as $color) {
printf('<img src="example.com/images/image-%s.jpg" alt="%s" />', $color, $color);
}
Something like:
<?php foreach($imageArray as $row): ?>
<img src="example.com/images/image-<?php echo $row['color']; ?>.jpg" alt="<?php echo $row['color']; ?>">
<?php endforeach; ?>
Related
I have two image arrays in my mysql database that i am trying to loop through and display them. One array holds an array called 'postImage' of full size images, the other called 'thumbnail' holds thumbnails of those same images. However one array is for an <a> link that i want to direct to the full size image(s) and the other array is for an <img> tag inside the <a> link. What i'm trying figure out is how i can loop through both arrays but have each <a> link go to the correct matching full size image.
here is my code:
<?php foreach(json_decode($post->thumbnail) as $thumbnail) { ?>
<?php foreach(json_decode($post->postImage) as $postImage) { ?>
<a href="/storage/photos/{{$postImage}}">
<img src="/storage/photos/{{$thumbnail}}" alt="" class="img-fluid">
</a>
<?php } ?>
<?php } ?>
Don't use nested loops, that will produce a cross-product of all thumbnails and images.
Loop over one array, and use its index to access the corresponding element of the other array.
$thumbnails = json_decode($post->thumbnail);
$postImages = json_decode($post->postImage);
foreach ($thumbnails as $i => $thumbnail) {
$postImage = $postImages[$i]; { ?>
<a href="/storage/photos/{{$postImage}}">
<img src="/storage/photos/{{$thumbnail}}" alt="" class="img-fluid">
</a>
<?php } ?>
I assign a color value to each category of elements. I retrieve the color that has that category and I use it as background-color in a <span> in the following way:
<span class="cat-icon" style="background-color: <?php echo esc_attr( $first_ctg->get_color() ) ?>;">
What I need to do is that depending on the value of that color, I must show one image source or another inside the <span>.
if ($first_ctg->get_color() == red)
show img_01
elseif ($first_ctg->get_color() == blue)
show img_02
endif;
How can I do this properly in PHP?
There are more ways you could do this, I assume you have just two pictures (you can use elseifs otherwise). Solution:
<span class="cat-icon" style="background-color: <?php echo esc_attr( $first_ctg->get_color() ) ?>;">
<?php
$src = "img_02";
if ($first_ctg->get_color() == "red") {
$src = "img_01";
}
?>
<img src="<?php echo $src ?>">
I am finding out the image source in conditions first and then assigning its value to variable $img. Then I am echoing source to src inside php tags.
You can do this with PHP by checking the value of $first_ctg->get_color() and echoing the entire <span> element based on that value, i.e.
switch ( $first_ctg->get_color() ) {
case 'red': // or whatever value you would expect to receive from your get_color() function
echo '<span class="cat-icon" style="background-color:#ACOLOR"><img src="PATH/TO/WHATEVER/IMAGE"><span>';
break;
case 'another color':
echo '<span class="cat-icon" style="background-color:#ANOTHERCOLOR"><img src="PATH/TO/ANOTHER/IMAGE"><span>';
break;
...
default:
echo '<span class="cat-icon" style="background-color:#ANOTHERCOLOR"><img src="PATH/TO/ANOTHER/IMAGE"><span>';
break;
}
It's worth stating that this is arguably a case for using Javascript (or JQuery) to manipulate the DOM based on other elements or attributes, but since your question specifically asked how to do this in PHP that's the answer I gave.
Its Very Simple you need to put some conditions like
if ($first_ctg->get_color() == red)
{
$src = "https://www.example.com/img/background.png";
}
elseif ($first_ctg->get_color() == blue)
{
$src = "https://www.example.com/img/background-2.png";
}
And Into img tag you need to put this variable (i.e: $src)
<img src="<?php echo $src;?>" title="">
Since a category already knows its color. Why not make the icon also a property of the category class ? Then in your vieuw you could simply write something like
<img src="<?php echo $first_ctg->get_icon()">
I am using Advanced Custom Fields PRO Version 5.3.7. I am trying to load a picture that is within my custom post type.
I have configured the ACF field for the custom post type and it works well for text related fields.
However, I am trying to display an image. I am using an adapted example from the acf documentation. Below you can find my code.
<div class="image">
</div>
My problem ist that on my site, I get the Array back instead of the single value:
Any suggestions what is wrong with my code?
I appreciate your replies!
Dont use the_field('box_image')['url'] because the_field() echoes directly everything and echoing an array outputs array(); Instead of this, try this:
<?php $img = get_field('box_image'); ?>
<?php if( $img ): ?>
<a href="<?php the_field('link'); ?>" rel="nofollow" class="am" target="_blank" >
<img class="b-lazy wp-post-image b-loaded" alt="<?php esc_attr_e( $img['alt'] ); ?>" src="<?php echo esc_url( $img['url'] ); ?>" width="230">
</a>
<?php endif; ?>
Whn you setting a ACF, you can select options "Return value" (array, url, id) change this as id if you want get different sizes (thumbnails), and URL if you want get original image url.
if you use ID option to get image as html tag you can use wp_get_attachment_image($id, $size); i always prefer to store only image ID.
I am trying to find picid in array but it's not working. When I echo it, nothing appears.
Here is my code
<?php $psql=mysql_query("select * from gallery where userId='$miid'");
$photo1 = array();
while($photo=mysql_fetch_assoc($psql)) {
$photo1[]=$photo;
print_r($photo);
}
foreach($photo1 as $k => $v){
if($v['picId']==$mipic){
$pic="uploads/".$v['photo'];
echo ">>>". $key=array_search($v['picId'],$photo1);
?>
NEXT
<img src="<?php echo $pic; ?>" width="300px" height="300px">
PREVIOUS
<?php
}
}?>
array_search is not recursive. $v exists in $photo1, while $v['picId'] only exists in $v.
That makes $key=array_search($v['picId'],$photo1) return false which, when you echo it, will print as nothing.
I am not sure why you are using array_search at all. In order to retrieve the next and previous picId, try this:
NEXT
<img src="<?php echo $pic; ?>" width="300px" height="300px">
PREVIOUS
Beware though that one of the hrefs is modules/gallery/miloader.php while the other is just miloader.php. So unless you actually have two different miloader.php files (one in each of the directories), one of them is wrong.
so I am using php to retrieve data from mysql database. This data is in the form of a number. I want to echo the same number of images tags according to that number. I do not want to use if statement because I do not know what the number will be (it is dynamic prosses). Any thoughts ?
for example if the number is 5 the result should be :
<img src=''>
<img src=''>
<img src=''>
<img src=''>
<img src=''>
Do a for loop
with $n your number from the db:
for($i=0;$i<$n;$i++):
?>
<img src='path/to/image.jpg'>
<?php
endfor;
Try something like:
for ($count=0; $count<$row['tagcount']; $count++) {
echo("<img src=''>");
}
try this...
$number = $number[fromdatabase];
$array = range(1,$number);
foreach ($array as $img) {
echo "<img src=''></img>";
}
Now you will have img tags for the number in your database