I'm trying to make use of twitter bootstrap carosel in OpenCart. I only want the first banner to have the div class "active." How would I go about this?
<div id="homepage" class="carousel slide">
<div class="carousel-inner">
<?php foreach ($banners as $banner) { ?>
<div class="item active">
<?php if ($banner['link']) { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" />
</div>
<?php } else { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" />
</div>
<?php } ?>
<?php } ?>
</div>
Thanks in advance
For example, use additional variable $flag
<div id="homepage" class="carousel slide">
<div class="carousel-inner">
<?php
$flag = 0;
foreach ($banners as $banner) { ?>
<div class="item <?php echo ($flag==0?"active":"");?>">
<?php if ($banner['link']) { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" />
</div>
<?php } else { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" />
</div>
<?php } ?>
<?php
$flag=1;
} ?>
</div>
You can also uses the array's key, than you can choose the first or the second etc...
<div id="homepage" class="carousel slide">
<div class="carousel-inner">
<?php
$flag = 0;
foreach ($banners as $key => $banner) { ?>
<div class="item <?php echo ($key == 0?"active":"");?>">
<?php if ($banner['link']) { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" />
</div>
<?php } else { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" />
</div>
<?php } ?>
<?php
$flag=1;
} ?>
</div>
Related
The images are not showing in front-end. ACF settings screenshot
<?php
if( have_rows('how_it_works_functions') ):
$counter = 0;
while( have_rows('how_it_works_functions') ) : the_row();
$counter++;
?>
<div class="step<?php echo $counter; ?>">
<div class="row section-content">
<?php if($counter == 2) { ?>
<div class="col-md-8 image">
<img class="skip-lazy" src="<?php get_sub_field('how_it_works_functions_image')['url']; ?>" alt="<?php get_sub_field('how_it_works_functions_image')['alt']; ?>">
</div>
<div class="col-md-4 text">
<h3 data-aos="fade-left" data-aos-offset="300" data-aos-duration="1000"><?php the_sub_field('how_it_works_functions_name'); ?></h3>
<p data-aos="fade-up" data-aos-offset="100" data-aos-duration="1000"><?php the_sub_field('how_it_works_functions_description'); ?></p>
</div>
<?php } else { ?>
<div class="col-md-4 text">
<h3 data-aos="fade-right" data-aos-offset="300" data-aos-duration="1000"><?php the_sub_field('how_it_works_functions_name'); ?></h3>
<p data-aos="fade-up" data-aos-offset="100" data-aos-duration="1000"><?php the_sub_field('how_it_works_functions_description'); ?></p>
</div>
<div class="col-md-8 image">
<img class="skip-lazy" src="<?php get_sub_field('how_it_works_functions_image')['url']; ?>" alt="<?php get_sub_field('how_it_works_functions_image')['alt']; ?>">
</div>
<?php } ?>
</div>
</div>
<?php
endwhile;
endif;
?>
I already check the var_dump and it is getting the correct url but I still have broken image in front-end.
You need to echo that field.
Like this based on your code:
<img class="skip-lazy" src="<?php echo get_sub_field( 'how_it_works_functions_image' )['url']; ?>" alt="<?php echo get_sub_field( 'how_it_works_functions_image' )['alt']; ?>">
Alternative effective way:
<?php
$image = get_sub_field( 'how_it_works_functions_image' );
?>
<img class="skip-lazy" src="<?php echo esc_attr( $image['url'] ); ?>" alt="<?php echo esc_attr( $image['alt'] ); ?>">
Try out the above solution and let me know if it works or not.
We have already added the code,but only thumb images are displaying.we want natural image path.
I have attached image reference,Please go through this
<div class="<?php echo $class; ?>">
<?php if ($thumb || $images) { ?>
<ul class="thumbnails" id="lightgallery" >
<?php if ($thumb) { ?>
<li class="col-xs-6 col-sm-4 col-md-3 prdbimgImg img-responsive" data-responsive="<?php echo $thumb; ?>" data-src="<?php echo $thumb; ?>" >
<a href="" id="zoom_01">
<img class="img-responsive" src="<?php echo $thumb; ?>" data-zoom-image="<?php echo $popup; ?>">
</a>
</li>
<?php } ?>
<?php if ($images) { ?>
<?php foreach ($images as $image) { ?>
<li class="image-additional img-responsive" data-responsive="<?php echo $image['thumb']; ?>" data-src="<?php echo $image['thumb']; ?>" >
<a href="" data-id="zoom_01">
<img class="img-responsive" src="<?php echo $image['thumb']; ?>" data-zoom-image="<?php echo $popup; ?>">
</a>
</li>
<?php } ?>
<?php } ?>
</ul>
<?php } ?>
</div>
That's because you're setting your thumbnail to data-src:
data-src="<?php echo $image['thumb']; ?>"
According to the docs, data-src should contain the full image.
If the images are stored in $images and thumbnails in $thumb as you say, then this should do the trick:
<ul id="lightGallery" >
<?php for ($i = 0; $i < count($images); $i++) { ?>
<li data-src="<?php echo $images[$i]; ?>" >
<img src="<?php echo $thumb[$i]; ?>" />
</li>
<?php } ?>
</ul>
I've made a shortcode function that returns some Advanced Custom Fields depending on which repeater field is chosen. It displays correctly and in the right order however any content typed underneath the shortcode is moved outside of its <article> container element.
Here is the code:
function boxes_shortcode($atts, $content = null) {
ob_start(); ?>
<div id="boxes">
<div class="box-gutter"></div>
<div class="box-sizer"></div>
<?php while( have_rows('box_repeater') ): the_row();
$image_id = get_sub_field('link_image');
$image_size = 'box-thumbnail';
$image_array = wp_get_attachment_image_src($image_id, $image_size);
$linkImage = $image_array[0]; ?>
<?php if(get_sub_field('box_type') == "box-link"): ?>
<div class="box">
<div class="link-box">
<img src="<?php echo $linkImage; ?>" alt="<?php echo $linkImage['alt']; ?>" />
<a class="caption-wrapper" href="http://www.google.com">
<span id="link-box-content" style="background:<?php the_sub_field('link_background_colour'); ?>">
<h6 style="color:<?php the_sub_field('link_title_colour'); ?>"><?php the_sub_field('link_title'); ?></h6>
<h4 style="color:<?php the_sub_field('link_text_colour'); ?>"><?php the_sub_field('link_text'); ?></h4>
<p style="color:<?php the_sub_field('link_text_colour'); ?>" href="<?php the_sub_field('link_url'); ?>"><?php the_sub_field('link_url_text'); ?> ></p>
</span>
</a>
</div>
</div>
<?php endif;
if(get_sub_field('box_type') == "box-quote"): ?>
<div class="box">
<div class="quote-box">
<div class="quotation-mark"></div>
<h4><?php the_sub_field('quote'); ?></h2>
<p><?php the_sub_field('quote_source'); ?></p>
<?php the_sub_field('quote_link_text'); ?> >
</div>
</div>
<?php endif;
if(get_sub_field('box_type') == "box-twitter"): ?>
<div class="box">
<div class="twitter">
<a class="twitter-timeline" href="<?php the_sub_field('twitter_url'); ?>" data-widget-id="<?php the_sub_field('twitter_widget_id'); ?>" data-chrome="noheader noscrollbar nofooter noborders transparent" data-tweet-limit="<?php the_sub_field('number_of_tweets'); ?>"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<a class="twitter-badge" href="<?php the_sub_field('twitter_url'); ?>"></a>
<div class="twitter-bottom">See more ></div>
</div>
</div>
<?php endif;
endwhile;?>
</div>
</div>
</div>
<?php
/* Get the buffered content into a var */
$sc = ob_get_contents();
ob_end_clean();
return $sc;
}
add_shortcode('boxes', 'boxes_shortcode');
Can anyone help solve this mystery? Many thanks.
You have two extra closing <div>'s in your code.
Try this:
function boxes_shortcode($atts, $content = null) {
ob_start(); ?>
<div id="boxes">
<div class="box-gutter"></div>
<div class="box-sizer"></div>
<?php while( have_rows('box_repeater') ): the_row();
$image_id = get_sub_field('link_image');
$image_size = 'box-thumbnail';
$image_array = wp_get_attachment_image_src($image_id, $image_size);
$linkImage = $image_array[0]; ?>
<?php if(get_sub_field('box_type') == "box-link"): ?>
<div class="box">
<div class="link-box">
<img src="<?php echo $linkImage; ?>" alt="<?php echo $linkImage['alt']; ?>" />
<a class="caption-wrapper" href="http://www.google.com">
<span id="link-box-content" style="background:<?php the_sub_field('link_background_colour'); ?>">
<h6 style="color:<?php the_sub_field('link_title_colour'); ?>"><?php the_sub_field('link_title'); ?></h6>
<h4 style="color:<?php the_sub_field('link_text_colour'); ?>"><?php the_sub_field('link_text'); ?></h4>
<p style="color:<?php the_sub_field('link_text_colour'); ?>" href="<?php the_sub_field('link_url'); ?>"><?php the_sub_field('link_url_text'); ?> ></p>
</span>
</a>
</div>
</div>
<?php endif;
if(get_sub_field('box_type') == "box-quote"): ?>
<div class="box">
<div class="quote-box">
<div class="quotation-mark"></div>
<h4><?php the_sub_field('quote'); ?></h2>
<p><?php the_sub_field('quote_source'); ?></p>
<?php the_sub_field('quote_link_text'); ?> >
</div>
</div>
<?php endif;
if(get_sub_field('box_type') == "box-twitter"): ?>
<div class="box">
<div class="twitter">
<a class="twitter-timeline" href="<?php the_sub_field('twitter_url'); ?>" data-widget-id="<?php the_sub_field('twitter_widget_id'); ?>" data-chrome="noheader noscrollbar nofooter noborders transparent" data-tweet-limit="<?php the_sub_field('number_of_tweets'); ?>"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<a class="twitter-badge" href="<?php the_sub_field('twitter_url'); ?>"></a>
<div class="twitter-bottom">See more ></div>
</div>
</div>
<?php endif;
endwhile;?>
</div>
<!--/div>
</div-->
<?php
/* Get the buffered content into a var */
$sc = ob_get_contents();
ob_end_clean();
return $sc;
}
add_shortcode('boxes', 'boxes_shortcode');
The last link here (https://soundcloud.com/waxworkfigurine2) is attached to my 'featured header text' header. Am I not closing the php tag properly?
<?php get_header(); ?>
<?php if(of_get_option('show_infoboxes') == true) { ?>
<div class="promo">
<section class=" block grid4">
<div class="col">
<?php if(of_get_option('infobox_image_1')) { ?> <a href='http://www.facebook.com/waxworkfigurine'><img src="<?php echo of_get_option('infobox_image_1') ?>"</a> <?php } ?>
<?php echo of_get_option('infobox_text_1') ?>
</div>
<div class="col">
<?php if(of_get_option('infobox_image_2')) { ?> <a href='https://twitter.com/waxworkfigurine'><img src="<?php echo of_get_option('infobox_image_2') ?>" alt=""</a> <?php } ?>
<?php echo of_get_option('infobox_text_2') ?>
</div>
<div class="col">
<?php if(of_get_option('infobox_image_3')) { ?> <a href='https://soundcloud.com/waxworkfigurine'><img src="<?php echo of_get_option('infobox_image_3') ?>" alt=""</a> <?php } ?>
<?php echo of_get_option('infobox_text_3') ?>
</div>
<div class="col">
<?php if(of_get_option('infobox_image_4')) { ?> <a href='https://soundcloud.com/waxworkfigurine2'><img src="<?php echo of_get_option('infobox_image_4') ?>" alt=""</a> <?php } ?>
<?php echo of_get_option('infobox_text_4') ?>
</div>
</section>
</div>
<?php } ?>
<section class="featured block grid2">
<h2><?php echo of_get_option('featured_header_text') ?></h2>
You need to properly close <img> tags:
<img src="<?php echo of_get_option('infobox_image_3') ?>" alt=""></a>
^-----
You are missing the closing tag for the img, add /> before </a>
<div class="col">
<?php if(of_get_option('infobox_image_4')) { ?>
<a href='https://soundcloud.com/waxworkfigurine2'>
<img src="<?php echo of_get_option('infobox_image_4') ?>" alt="" />
</a>
<?php } ?>
<?php echo of_get_option('infobox_text_4') ?>
</div>
Proper code spacing can save you lots of small erros like this, it takes a bit more space but is clearer and easier to read.
You should to terminate all of your lines with a semi-colon - e.g.
<h2><?php echo of_get_option('featured_header_text'); ?></h2>
Also I find it easier to go:
<?php if(of_get_option('infobox_image_4')) : ?> <a href='https://soundcloud.com/waxworkfigurine2'><img src="<?php echo of_get_option('infobox_image_4'); ?>" alt="" /></a> <?php endif; ?>
I want to get product code (module) into featured products module opencart
see this example of what I want
http://demo.pure-sol.com/fahmy/test.jpg
I did some code but there something wrong with the result
\catalog\controller\module\featured.php
$this->data['text_model'] = $this->language->get('text_model'); // line 10
$this->data['model'] = $product_info['model']; // line 54
catalog\language\english\module\featured.php
$_['text_model'] = 'Model';
catalog\view\theme\fashionfever\template\module\featured.tpl
<div class="feature">
<h2> <?php echo $heading_title; ?></h2>
<div class="box-content">
<div class="box-product">
<?php foreach ($products as $product) { ?>
<div>
<?php if ($product['thumb']) { ?>
<div class="image"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /></div>
<?php } ?>
<div class="name"><?php echo $product['name']; ?></div>
<?php if ($product['price']) { ?>
<div class="price">
<?php if (!$product['special']) { ?>
<?php echo $product['price']; ?>
<?php } else { ?>
<span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span>
<?php } ?>
</div>
<?php } ?>
<?php if ($product['rating']) { ?>
<div class="rating"><img src="catalog/view/theme/default/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" /></div>
<?php } ?>
<div class="cart"><input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" /></div>
</div>
<!-- additional code -->
<p><?php echo $text_model; ?>: <?php echo $model; ?></p>
<?php } ?>
</div>
</div>
</div>
remove the line
$this->data['model'] = $product_info['model']; // line 54
and in $this->data['products'][] = array(
add this line
'model' => $product_info['model'],
add this
<p><?php echo $text_model; ?>: <?php echo $product['model']; ?></p>
just after
<div class="cart"><input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" /></div>