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>';
Related
I want to change the layout of a grid of videos on a site. It's Wordpress.
Currently the PHP displays the grid in a 3/2 layout over two rows and then duplicates it depending on how many videos you choose to display.
I understand the code enough to know that we are setting 5, and splitting into 3/2. And i can set it to 6 and split into 3/3 or 4/2.....and so on
But I need to change the layout so we have a row of 3, then 3 but with the first two of the second row stacked on top of each other 1/3rd width and the third 2/3rd width. like below.
new layout to be acheived
Current PHP that does the layout: ( I understand that CSS might have to be changed but I can do that)
<article class="col-1-<?php if(($i%5==0)||(($i+1)%5==0)){ echo "2"; } else { echo "3"; } ?>" id="post-<?php echo $page->ID; ?>">
Full block:
<article class="col-1-<?php if(($i%5==0)||(($i+1)%5==0)){ echo "2"; } else { echo "3"; } ?>" id="post-<?php echo $page->ID; ?>">
<a href="<?php echo get_page_link($page->ID); ?>">
<?php if ( $detect->isMobile() ) {
if (has_post_thumbnail( $page->ID ) ){ ?>
<img src="<?php echo $image[0]; ?>" alt="<?php echo $title; ?>" width="160" height="90">
<?php } ?>
<?php } else { ?>
<?php if(get_field('looping_thumb_preview', $page->ID)){ ?>
<video playinline preload="auto" loop="yes">
<source src="<?php echo get_field('looping_thumb_preview', $page->ID); ?>" type="video/mp4">
Your browser does not support the video tag.
</video>
<?php } else if(get_field('looping_thumb', $page->ID)){ ?>
<video playinline preload="auto" loop="yes">
<source src="<?php echo get_field('looping_thumb', $page->ID); ?>" type="video/mp4">Your browser does not support the video tag.</video>
<?php } else if (has_post_thumbnail( $page->ID ) ){ ?>
<img src="<?php echo $image[0]; ?>" alt="<?php echo $title; ?>">
<?php } else { ?>
<img src="<?php bloginfo( 'template_url' ); ?>/images/blank.png" alt="<?php echo $title; ?>">
<?php } ?>
<?php } ?>
<div class="center-content">
<h1<?php if(get_field('subtitle', $page->ID)){ echo ' class="hassubtitle"';} else { echo ' class="nosubtitle"'; }?>><?php echo $title;?></h1>
<div class="underline"></div>
<?php if(get_field('subtitle', $page->ID)) { echo "<h2>" . get_field('subtitle', $page->ID) . "</h2>"; }
?>
</div>
</a>
</article>
Thanks in advance for any help
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'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++;
}
}
I am creating a property website from a database with PHP. On the description of each property listed has a slider of up to 10 images/slides. However, if there are only 6 images/slides for example; i would like to hide the remaining 6 images/slides from showing.
Here is what i have so far;
$sql = DB::getInstance()->query('SELECT * FROM listings WHERE id =' . Input::get('id'));
foreach($sql->results() as $row) {
<div id="property-slider">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<figure>
<img src="admin/<?php echo $row->img_set_1 ?>" alt="<?php echo $row->alt ?>">
</figure>
</li>
<li>
<figure>
<img src="admin/<?php echo $row->img_set_2 ?>" alt="<?php echo $row->alt ?>">
</figure>
</li>
<li>
<figure>
<img src="admin/<?php echo $row->img_set_3 ?>" alt="<?php echo $row->alt ?>">
</figure>
</li>
<li>
<figure>
<img src="admin/<?php echo $row->img_set_5 ?>" alt="<?php echo $row->alt ?>">
</figure>
</li>
<li>
<figure>
<img src="admin/<?php echo $row->img_set_6 ?>" alt="<?php echo $row->alt ?>">
</figure>
</li>
<li>
<figure>
<img src="admin/<?php echo $row->img_set_7 ?>" alt="<?php echo $row->alt ?>">
</figure>
</li>
<li>
<figure>
<img src="admin/<?php echo $row->img_set_8 ?>" alt="<?php echo $row->alt ?>">
</figure>
</li>
<li>
<figure>
<img src="admin/<?php echo $row->img_set_9 ?>" alt="<?php echo $row->alt ?>">
</figure>
</li>
<li>
<figure>
<img src="admin/<?php echo $row->img_set_10 ?>" alt="<?php echo $row->alt ?>">
</figure>
</li>
</ul>
</div>
</section>
</div>
}
I am trying to get a result simular to this, but think repeating this 10 time etc etc, just think there is a better way
<?php
if(empty($row->img_set_1)) {
echo "";
} else {
echo "<li>";
echo "<figure>";
echo "<a href='#'><img src='{admin/$row->img_set_1}'></a>";
echo "</figure>";
echo "</li>";
}
?>
this is the function for the query
public function query($sql, $params = array()) {
$this->_error = false;
if($this->_query = $this->_pdo->prepare($sql)) {
$x = 1;
if(count($params)) {
foreach($params as $param) {
$this->_query->bindValue($x, $param);
$x++;
}
}
if($this->_query->execute()) {
$this->_results = $this->_query->fetchAll(PDO::FETCH_OBJ);
$this->_count = $this->_query->rowCount();
} else {
$this->_error = true;
}
}
return $this;
}
THIS IS AN UPDATE OF THE WORKING SLIDER---NOT IDEAL BUT IT WORKS
<?php
if(empty($row->img_set_1)) {
echo "";
} else {
echo "<li>";
echo "<figure>";
echo "<a href='#'><img src='admin/{$row->img_set_1}'></a>";
echo "</figure>";
echo "</li>";
}
if(empty($row->img_set_2)) {
echo "";
} else {
echo "<li>";
echo "<figure>";
echo "<a href='#'><img src='admin/{$row->img_set_2}'></a>";
echo "</figure>";
echo "</li>";
}
//This repeats etc etc
?>
You could do something like this:
$x = 1;
while($x<=10) {
if(!empty($row["img_set_$x"])) {
echo "<li>";
echo "<figure>";
echo "<a href='#'><img src=".'{admin/'.$row["img_set_$x"].'}'."</a>";
echo "</figure>";
echo "</li>";
}
$x++;
}
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
}
?>