I'm working on wordpress and I'm working with some foreach, here's my code:
$content = get_the_content();
if (preg_match_all('/<div id="description" class="description">([^<]*)<\/div>/', $content, $match)) {
for ($i = 0; $i < count($match[0]); $i = $i + 1) {
echo $match[0][$i];
}
}
$attachments =& get_children($args);
if ($attachments) {
foreach ($attachments as $attachment) {
foreach ($attachment as $attachment_key => $attachment_value) {
$imageID = $attachment->ID;
$imageTitle = $attachment->post_title;
$imagearray = wp_get_attachment_image_src($attachment_value, $size, false);
$imageAlt = get_post_meta($imageID, '_wp_attachment_image_alt', true);
$imageURI = $imagearray[0]; // 0 is the URI
$imageWidth = $imagearray[1]; // 1 is the width
$imageHeight = $imagearray[2]; // 2 is the height
?>
<div class="col_1_2">
<div id="attachment_<?php echo $imageID; ?>" class="wp-caption alignnone" style="width: 356px;">
<a rel="lightbox-0" href="<?php echo $imageURI; ?>"><img
class="wp-image-<?php echo $imageID; ?> size-full" title="<?php echo $imageTitle; ?>"
src="<?php echo $imageURI; ?>" alt="<?php echo $imageAlt; ?>" width="456" height="304"/></a>
<p class="wp-caption-text"><?php echo $imageTitle; ?>
<div class="link-veteran"></div>
<div class="popup"><?php echo $imageAlt; ?>
<div class="arrow-up"></div>
</div>
</p>
<p><?php echo $match[0][$i]; ?></p>
</div>
</div>
<?php
break;
}
}
}
I want that for the 1st attachment, the 1st description has to displayed with it. For the 2nd attachment, the 2nd description has to displayed with it, etc.
Does below code work for you ?
$content = get_the_content();
$j=0;
if (preg_match_all('/<div id="description" class="description">([^<]*)<\/div>/', $content, $match)) {
for( $i = 0; $i < count($match[0]); $i = $i+1 ) {
echo $match[0][$i];
}
}
$attachments =& get_children($args);
if ($attachments) {
foreach($attachments as $attachment) {
foreach($attachment as $attachment_key => $attachment_value) {
$imageID = $attachment->ID;
$imageTitle = $attachment->post_title;
$imagearray = wp_get_attachment_image_src($attachment_value, $size, false);
$imageAlt = get_post_meta($imageID, '_wp_attachment_image_alt', true);
$imageURI = $imagearray[0]; // 0 is the URI
$imageWidth = $imagearray[1]; // 1 is the width
$imageHeight = $imagearray[2]; // 2 is the height
?>
<div class="col_1_2">
<div id="attachment_<?php echo $imageID; ?>" class="wp-caption alignnone" style="width: 356px;">
<a rel="lightbox-0" href="<?php echo $imageURI; ?>"><img class="wp-image-<?php echo $imageID; ?> size-full" title="<?php echo $imageTitle; ?>" src="<?php echo $imageURI; ?>" alt="<?php echo $imageAlt; ?>" width="456" height="304" /></a>
<p class="wp-caption-text"><?php echo $imageTitle; ?><div class="link-veteran"></div><div class="popup"><?php echo $imageAlt; ?><div class="arrow-up"></div></div></p>
<p><?php echo $match[0][$j]; ?></p>
</div>
</div>
<?php
break;
}
$j++;
}
}
Related
I wanted to do the DRY approach in my code but I'm having a hard time figuring it out. And also, I want to hide the entire code if there's no image_1. Hope you could help me do the trick.
Here's the code
<div class="col-md-4">
<?php
$image = get_field('image_1');
if(get_field('image_1'))
{
echo '<a href="' . get_field('image_link_1') . '">';?>
<img src="<?php echo $image['url']; ?>" title="<?php echo $image['title']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php echo '</a>';
} else {
echo '<img src="http://localhost/image.png">';
} ?>
</div>
<div class="col-md-4">
<?php
$image = get_field('image_2');
if(get_field('image_2'))
{
echo '<a href="' . get_field('image_link_2') . '">';?>
<img src="<?php echo $image['url']; ?>" title="<?php echo $image['title']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php echo '</a>';
} else {
echo '<img src="http://localhost/image.png">';
} ?>
</div>
<div class="col-md-4">
<?php
$image = get_field('image_3');
if(get_field('image_3'))
{
echo '<a href="' . get_field('image_link_3') . '">';?>
<img src="<?php echo $image['url']; ?>" title="<?php echo $image['title']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php echo '</a>';
} else {
echo '<img src="http://localhost/image.png">';
} ?>
</div>
You should put differences to arrays and then wrap everything into for loop:
<?php
$images = array('image_1', 'image_2', 'image_3');
$links = array('image_link_1', 'image_link_2', 'image_link_3');
for($i=0; $i<3; $i++){
?>
<div class="col-md-4">
<?php
$image = get_field($images[$i]);
if(get_field($images[$i])){
echo '<a href="' . get_field($links[$i]) . '">';
?>
<img src="<?php echo $image['url']; ?>" title="<?php echo $image['title']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php echo '</a>';
} else {
echo '<img src="http://localhost/image.png">';
}
?>
</div>
<?php
}
?>
Just a hint...:
<?php
for ($i = 0; $i < 3; $i++) {
echo "<div class='col-md-4'>" . "\n";
$image = get_field("image_" . ($i + 1));
...
echo "</div>" . "\n";
}
?>
Something along these lines should get you started if I'm understanding you correctly:
<?php for ($q = 1; $q <= 3; $q++) {
$image_loop = 'image_' . $q;
echo '<div class="col-md-4">';
if ($image = get_field($image_loop)) {
echo '<a href="' . get_field('image_link_' . $q) . '">';
?>
<img src="<?php echo $image['url']; ?>" title="<?php echo $image['title']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php echo '</a>';
} else {
echo '<img src="http://localhost/image.png">';
} ?>
</div>
<?php } // end loop ?>
The other suggestions here will work as well but here's what I would do:
First arrange the images in an associative array with keys being the image name and values being the image link and then iterate via a foreach loop.
I generally try to not echo HTML unless strictly necessary.
<?php
$array = [
"image_1" => "image_link_1",
"image_2" => "image_link_2",
"image_3" => "image_link_3",
"image_4" => "image_link_4"
];
foreach ($array as $name => $link):
$image = get_field($name);
if ($image): ?>
<div class="col-md-4">
<a href="<?=get_field($link)?>">
<img src="<?= $image['url']; ?>" title="<?= $image['title']; ?>" alt="<?= $image['alt']; ?>" />
</a>
<?php else: ?>
<img src="http://localhost/image.png">
<?php endif; ?>
</div>
<?php endforeach; ?>
I've got a forech loop that displays 50 logos. But what I need is another loop that creates a new div(.autogrid_wrapper .cte .block) every 5 images.
<div class="autogrid_wrapper cte block">
<div class="inner">
<?php foreach($this->entries as $entry): ?>
<figure class="image_container">
<img src="<?php echo $entry->field('logo')->generate(); ?>" title="<?php echo $entry->field('name')->value(); ?>" alt="<?php echo $entry->field('name')->value(); ?>" >
</figure>
<?php endforeach; ?>
</div>
</div>
I hope you guys can help me.
A simple counter could help -
<div class="autogrid_wrapper cte block">
<div class="inner">
<?php
$i = $j = $k = 0;
foreach($this->entries as $entry):
$i++;
$class = '';
if($j === 0) {
$class = 'first';
}
$j++;
$html = '';
if($i % 5 === 0) {
$k++;
$j = ($i - (5 * $k));
$class = 'last';
$html = "</div></div>
<div class='autogrid_wrapper cte block'><div class='inner'>";
}
?>
<figure class="image_container <?php echo $class; ?>">
<img src="<?php echo $entry->field('logo')->generate(); ?>" title="<?php echo $entry->field('name')->value(); ?>" alt="<?php echo $entry->field('name')->value(); ?>" >
</figure>
<?php
echo $html;
endforeach;
?>
</div>
</div>
I want to get each product related images which is not assign to product but want to show all related images in front-end.
<?php
foreach ($data['product'] as $product) {
$product_id = $product->getId();
$product_name = $product->getName();
$product_description = $product->getDescription();
$product_price = $product->getPrice();
$isporductImage = $product->getImage();
$product_image = Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB, true) . "media/catalog/product" . $product->getImage();
$isproductthumbnail = $product->getThumbnail();
$product_thumbnail = Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB, true) . "media/catalog/product" . $product->getThumbnail();
$collectionimage = Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB, true) . "media/catalog/category/thumb/" . $data['collection']['image'];
$productplaceholderImage = $this->getSkinUrl() . "whi/assets/images/whi_placeholder.png";
?>
<?php if ($isproductthumbnail != "") { ?>
<div class="image-div" style="background: url('<?php echo $product_thumbnail;?>');">
<img src="<?php echo $product_thumbnail; ?>" alt="celeb" />
</div>
<?php }elseif ($isporductImage != "") { ?>
<div class="image-div" style="background: url('<?php echo $product_image;?>');">
<img src="<?php echo $product_image; ?>" alt="celeb" />
</div>
<?php } else { ?>
<div class="image-div" style="background: url('<?php echo $productplaceholderImage;?>');">
<img src="<?php echo $productplaceholderImage ?>" alt="celeb" />
</div>
<?php } ?>
i want to show all related product images in this list.
<ul class="outfit-images-cmt">
<li><img src="<?php echo $this->getSkinUrl() ?>whi/assets/images/doll.png"></li>
<li><img src="<?php echo $this->getSkinUrl() ?>whi/assets/images/doll.png"></li>
<li><img src="<?php echo $this->getSkinUrl() ?>whi/assets/images/doll.png"></li>
<li><img src="<?php echo $this->getSkinUrl() ?>whi/assets/images/doll.png"></li>
</ul>
Try the below code for fetch all the gallery images:
$product_image_url_gallery = $product->getMediaGalleryImages();
$galleryURL = '';
echo '<ul class="outfit-images-cmt">';
foreach ($product_image_url_gallery as $image) {
$galleryImage = Mage::helper('catalog/image')->init($product, 'image', $image->getFile());
echo '<li><img src="'.$galleryURL.'"></li>'
}
echo '</ul>';
Here's my problem, I have to display array values (description) under pictures like this :
Instead it appears like this
I'm working on this problem, this is my current code :
if (preg_match_all('/<div id="description" class="description">([^<]*)<\/div>/', $content, $match)) {
for( $i = 0; $i < count($match[0]); $i = $i+1 ) {
$description[] = $match[0][$i];
}
}
$attachments =& get_children($args);
$arrayMatches = array();
if ($attachments) {
foreach(array_chunk($attachments, 2) as $img) {
echo '<div class="two_cols">';
foreach($img as $attachment) {
foreach($attachment as $attachment_key => $attachment_value) {
$imageID = $attachment->ID;
$imageTitle = $attachment->post_title;
$imagearray = wp_get_attachment_image_src($attachment_value, $size, false);
$imageAlt = get_post_meta($imageID, '_wp_attachment_image_alt', true);
$imageURI = $imagearray[0]; // 0 is the URI
$imageWidth = $imagearray[1]; // 1 is the width
$imageHeight = $imagearray[2]; // 2 is the height
?>
<div class="col_1_2">
<div id="attachment_<?php echo $imageID; ?>" class="wp-caption alignnone" style="width: 356px;">
<a rel="lightbox-0" href="<?php echo $imageURI; ?>"><img class="wp-image-<?php echo $imageID; ?> size-full" title="<?php echo $imageTitle; ?>" src="<?php echo $imageURI; ?>" alt="<?php echo $imageAlt; ?>" width="456" height="304" /></a>
<p class="wp-caption-text"><?php echo $imageTitle; ?></p>
<?php
$arrayMatches[] = $match[0][$j];
?>
</div>
</div>
<?php
break;
}
$j++;
}
foreach(array_chunk($arrayMatches, 2) as $desc) {
echo '<div class="description">';
foreach($desc as $item) {
echo $item;
}
echo '</div>';
}
echo '</div>';
}
}
I try so many solutions but no one was the good one.
Thanks for the help ;)
Try:
foreach(array_chunk($arrayMatches, 2) as $k => $desc) {
if($k < 1) continue;
echo '<div class="description">';
foreach($desc as $item) {
echo $item;
}
echo '</div>';
}
I love jQuery and dont really understand php.
I am making a slider with albums. So far so good except I am now stuck trying to add two arrays into one for each loop. At least I think that is the best solution.
In my code you can see I have achieved what I need by hard coding 6 images for the 6 custom fields in the custom post type (I am using wordpress). The problem is that if there are not six images then the slider show a blank image (as it exists but doesnt have a src). I tried removing the element with jquery but that was no good. Here is the code I have so far, perhaps there is something i am missing, I just cant seem to get the logic quite right.
<?php
$args = array(
'post_type' => 'albums_gallery',
);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
$album_name = get_the_ID();
$image_1 = get_field('image_1');
$image_1_url = $image_1['url'];
$image_1_caption = get_field('image_1_caption');
$image_2 = get_field('image_2');
$image_2_url = $image_2['url'];
$image_2_caption = get_field('image_2_caption');
$image_3 = get_field('image_3');
$image_3_url = $image_3['url'];
$image_3_caption = get_field('image_3_caption');
$image_4 = get_field('image_4');
$image_4_url = $image_4['url'];
$image_4_caption = get_field('image_4_caption');
$image_5 = get_field('image_5');
$image_5_url = $image_5['url'];
$image_5_caption = get_field('image_5_caption');
$image_6 = get_field('image_6');
$image_6_url = $image_6['url'];
$image_6_caption = get_field('image_6_caption');
?>
<div class="album album_<?php echo $album_name ?>">
<div class="slider-wrapper theme-default">
<div class="slider" class="nivoSlider">
<!--<img src="<?php echo $image_1['url']; ?>" alt="<?php echo $image_1['alt']; ?>" title="<?php echo $image_1_caption; ?>" />
<img src="<?php echo $image_2['url']; ?>" alt="<?php echo $image_2['alt']; ?>" title="<?php echo $image_2_caption; ?>" />
<img src="<?php echo $image_3['url']; ?>" alt="<?php echo $image_3['alt']; ?>" title="<?php echo $image_3_caption; ?>" />
<img src="<?php echo $image_4['url']; ?>" alt="<?php echo $image_4['alt']; ?>" title="<?php echo $image_4_caption; ?>" />
<img src="<?php echo $image_5['url']; ?>" alt="<?php echo $image_5['alt']; ?>" title="<?php echo $image_5_caption; ?>" />
<img src="<?php echo $image_6['url']; ?>" alt="<?php echo $image_6['alt']; ?>" title="<?php echo $image_6_caption; ?>" />-->
<?php
$images = array("$image_1_url","$image_2_url","$image_3_url","$image_4_url", "$image_5_url", "$image_6_url");
foreach ($images as $image) {
if ($image != "") {
echo "<img src='";
echo $image;
echo "' ";
echo "title='caption'";
echo "/>";
}
};
?>
</div>
</div>
</div>
<?php endwhile; wp_reset_query(); ?>
I need to add the image caption, and probably a link into the for each and if statements, little out of my depth being a designer.
Thanks for any help.
This is all you need
<div class = "slider-wrapper theme-default">
<div class = "slider" class = "nivoSlider">
<?php
$images = Array();
for($i = 1; $i <= 6; $i++) {
$image = get_field("image_{$i}");
if(!$image || !$image['url']) {
break;
}
$caption = get_field("image_{$i}_caption");
?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" title="<?php echo $caption; ?>" />
<?php
}
?>