I trying to produce a dynamic carousel banner to update the image, headers, text, links & alts based on the content page being viewed.
The site is being coded in .php & using the bootstrap CSS framework. I've broken the site into three main parts... Header, "Content" and Footer.
I'm calling the function img-banner as part of the header.php but wish to use variables stored in the "content" pages which will determine the images etc being viewed.
Calling the function:
<div class="img-banner">
<?php include ("functions/img-banner.php"); ?>
<!-- closing img-banner -->
</div>
The function:
<?php
function img_banner()
{
?>
<div class="carousel-inner">
<div class="item active"> <img src="<?php echo $img1;?>" alt="<?php echo $alt1;?>">
<div class="container">
<div class="carousel-caption">
<h1><?php echo $head1;?></h1>
<p><?php echo $text1;?></p>
<p><a class="btn btn-lg btn-primary" href="<?php echo $link1;?>" role="button">Learn More<i class="fa fa-chevron-details"></i></a></p>
</div>
</div>
</div>
<div class="item"> <img src="<?php echo $img2;?>" alt="<?php echo $alt2;?>">
<div class="container">
<div class="carousel-caption">
<h1><?php echo $head2;?></h1>
<p><?php echo $text2;?></p>
<p><a class="btn btn-lg btn-primary" href="<?php echo $link2;?>" role="button">Learn More<i class="fa fa-chevron-right"></i></a></p>
</div>
</div>
</div>
<div class="item"> <img src="<?php echo $img3;?>" alt="<?php echo $alt3;?>">
<div class="container">
<div class="carousel-caption">
<h1><?php echo $head3;?></h1>
<p><?php echo $text3;?></p>
<p><a class="btn btn-lg btn-primary" href="<?php echo $link3;?>" role="button">Learn More<i class="fa fa-chevron-right"></i></a></p>
</div>
</div>
</div>
</div>
<?php
}
?>
I'm a little stumped and have tried (obviously unsuccessfully lol) global and SESSION variables but cant get them to work correctly.
I'd appreciate confirmation on the best method to implement the above so I can read up and figure this out. My main goal is to have a cms style admin panel to update the images.
Thanks!
First of all, the function does not have access to the $img1-$img3 variables as you're not passing them to the function.
Secondly, you really do not require a function to do this simple task.
Last but not least, you are not even calling the function, only including it's file.
Here's how you should do this:
<div class="img-banner">
<?php include ("img-banner.php"); ?>
<!-- closing img-banner -->
</div>
And the img-banner.php:
<div class="carousel-inner">
<div class="item active"> <img src="<?php echo $img1;?>" alt="<?php echo $alt1;?>">
<div class="container">
<div class="carousel-caption">
<h1><?php echo $head1;?></h1>
<p><?php echo $text1;?></p>
<p><a class="btn btn-lg btn-primary" href="<?php echo $link1;?>" role="button">Learn More<i class="fa fa-chevron-details"></i></a></p>
</div>
</div>
</div>
<div class="item"> <img src="<?php echo $img2;?>" alt="<?php echo $alt2;?>">
<div class="container">
<div class="carousel-caption">
<h1><?php echo $head2;?></h1>
<p><?php echo $text2;?></p>
<p><a class="btn btn-lg btn-primary" href="<?php echo $link2;?>" role="button">Learn More<i class="fa fa-chevron-right"></i></a></p>
</div>
</div>
</div>
<div class="item"> <img src="<?php echo $img3;?>" alt="<?php echo $alt3;?>">
<div class="container">
<div class="carousel-caption">
<h1><?php echo $head3;?></h1>
<p><?php echo $text3;?></p>
<p><a class="btn btn-lg btn-primary" href="<?php echo $link3;?>" role="button">Learn More<i class="fa fa-chevron-right"></i></a></p>
</div>
</div>
</div>
</div>
Related
Can you please advise which is the most appropriate way to append classes dynamically to the 's below based on the ID of the post?
The goal is to add a class to some of the div's depending on the ID of the post being even or odd.
<div class="service__preview">
<div class="row mb-5">
<div class="col-4">
<div class="row">
<div class="col-5 // here I want to dynamically add order-2 if get_the_ID() is even">
<div class="service__preview service__preview-id">
<?php echo get_the_ID() + 1;?>
</div>
</div>
<div class="col-7 // here I want to dynamically add order-1 if get_the_ID() is even">
<div class="service__preview service__preview-icon">
<div class="icon__container icon__container-3x">
<div class="icon__container icon__container-2x">
<div class="icon__container icon__container-1x">
<i class="<?php echo get_post_meta($post->ID, 'service_icon', true); ?> fa-2x"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-1">
</div>
<div class="col-6">
<a class="service__preview service__preview-title" href="<?php the_permalink(); ?>"><h3><?php the_title(); ?></h3></a>
<p class="service__preview service__preview-description"><?php the_content(); ?></p>
<a class="service__preview service__preview-link" href=" <?php the_permalink(); ?>"><p>Learn more</p></a>
</div>
</div>
Looking forward to your suggestions.
FYI: the project is a WordPress template.
I pull a post from a website then i display it on my website. I want when a user clicks on it i want her to be redirected to the source url but when i share it i want the url to have my url like www.mywebsite.com/post url. Am trying this code below
<div class="post-item mb-3 shadow-sm bg-white">
<div class="d-flex justify-content-between flex-wrap p-1">
<div class="post-feat-image pr-2 d-flex align-items-center"><a href="<?= e_attr(post_url($t['loop'])); ?>" class="post-img-link" <?= post_attrs($t['loop']); ?>>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQYV2N8+vTpfwYGBgZGGAMAUNMHXwvOkQUAAAAASUVORK5CYII=" data-src="<?= e_attr(feat_img_url($t['loop.post_featured_image'])); ?>" alt="<?= e_attr($t['loop.post_title']); ?>" class="post-feat-img img-zoom"></a>
</div>
<div class="post-info px-2 py-1"><a href="<?= e_attr(post_url($t['loop'])); ?>" <?= post_attrs($t['loop']); ?>>
<h3 class="post-title" title="<?= e_attr($t['loop.post_title']); ?>">
<?= e(limit_string($t['loop.post_title'], 70), false); ?>
</h3></a>
<div class="post-feed-logo mb-1">
<img src="<?= feed_logo_url($t['loop.feed_logo_url']); ?>" class="feed-logo-img">
</div>
<div class="post-time text-muted py-1">
<?= svg_icon('time', 'text-success'); ?>
<?= time_ago($t['loop.post_pubdate'], _T); ?>
<?= svg_icon('eye-outline', 'text-primary'); ?>
<?= localize_numbers($t['loop.post_hits'], _T); ?>
<a href="https://facebook.com/sharer/sharer.php?u=<?= e_attr(post_url($t['loop'])); ?>" class="btn btn-facebook rounded-0 btn-share" data-toggle="tooltip" title="<?= e_attr(__('Share on Facebook', _T)); ?>" target="_blank" rel="noopener">
<?= svg_icon('facebook'); ?>
</a>
<a href="http://twitter.com/share?text=<?= e_attr($t['post.post_title']); ?>&url=<?= e_attr(post_url($t['loop'])); ?>" class="btn btn-twitter rounded-0 btn-share" data-toggle="tooltip" title="<?= e_attr(__('Share on Twitter', _T)); ?>" target="_blank" rel="noopener">
<?= svg_icon('twitter'); ?>
</a>
</div>
</div>
</div>
</div>
just enclose the whole code in <a></a> tag and in CSS just remove all the text decoration.
Here's my HTML and PHP code but videos shown in vertical line, i use inline-block in CSS code but it doesn't work.
Please help me i am new to this.
HTML Code:
<div class="wrap">
<div class="grid">
<div class="preview">
<a title="<?php echo $video_title; ?>
"href="watch.php?videoid=<?php echo $video_id;?>">
<img src="videos/thumbnails/<?php echo $thumbnail;?> " />
</a>
<div class="time">00.00</div>
</div>
<div class="data">
<h3><a href="watch.php?videoid=<?php echo $video_id;?>">
<?php echo substr( $video_title,0,19);?>
<?php echo substr( $video_title,19,20);?>
</a>
</h3>
<div class="video-watch">
Watch Now
</div>
<div class="clear"> </div>
<div class="lables">
<p>Uploaded by:<a <?php if (isset($_SESSION['usr_name']))?>>
<?php echo $_SESSION['usr_name'] ;?>
</a>
</p>
</div>
<?php } }?>
</div>
</div>
Use an IFrame.
Here's an example of what it looks like:
<iframe width="420" height="315" src="https://www.youtube.com/embed/XGSy3_Czz8k">
Upon doing this I am gating the data in an un alligned manner. I am getting 2 datas but the third data is coming under second data and 4th below first data but 3rd and forth are not in a single row there placed one after the other.
My View
<div class="container col-md-9">
<?php
foreach($unidet as $tempuni)
{
?>
<div class="service-items col-md-6">
<h4 class="title-normal"><img class="img-responsive thumb" src="images/service/service-icon1.png" alt=""><strong><?php echo $tempuni['name'] ?></strong></h4>
<div class="row">
<div class="col-sm-6 service-item-img">
<img class="img-responsive thumbnail" src="admin/<?php echo $tempuni['image'];?>" alt="">
</div>
<div class="col-sm-6 service-item-content">
<p><?php echo $tempuni['description'];?></p>
<button type="button" class="btn btn-warning btn-sm" onclick="more(<?php echo $tempuni['id'];?>)">Read More</button>
</div>
</div>
</div>
<?php
}
?>
</div>
This is what I am getting
Nice solution would be to use array_chunk()
<?php foreach (array_chunk($unidet, 2) as $row): ?>
<div class="row">
<?php foreach ($row as $tempuni): ?>
<div class="service-items col-md-6">
<h4 class="title-normal"><img class="img-responsive thumb" src="images/service/service-icon1.png" alt=""><strong><?php echo $tempuni['name'] ?></strong></h4>
<div class="row">
<div class="col-sm-6 service-item-img">
<img class="img-responsive thumbnail" src="admin/<?php echo $tempuni['image'];?>" alt="">
</div>
<div class="col-sm-6 service-item-content">
<p><?php echo $tempuni['description'];?></p>
<button type="button" class="btn btn-warning btn-sm" onclick="more(<?php echo $tempuni['id'];?>)">Read More</button>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have the following PHP code, which dynamically generates content:
<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<?php foreach ($this->getItems() as $_item): ?>
<div class="col-sm-3">
<a class="product-image" href="<?php echo $_item->getProductUrl() ?>" title="<?php echo $this->escapeHtml($_item->getName()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->resize(75); ?>" width="75" height="75" alt="<?php echo $this->escapeHtml($_item->getName()) ?>" /></a>
<div class="product-details">
<h3 class="product-name"><?php echo $this->escapeHtml($_item->getName()) ?></h3>
<?php echo $this->getPriceHtml($_item, true) ?>
<button type="button" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Add to Cart')) ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_item) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
<ul class="add-to-links">
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<li><?php echo $this->__('Add to Wishlist') ?></li>
<?php endif; ?>
<?php if($_compareUrl=$this->getAddToCompareUrl($_item)): ?>
<li><span class="separator">|</span> <?php echo $this->__('Add to Compare') ?></li>
<?php endif; ?>
</ul>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
The above code outputs the following structure:
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-3">product1</div>
<div class="col-sm-3">product2</div>
<div class="col-sm-3">product3</div>
<div class="col-sm-3">product4</div>
<div class="col-sm-3">product5</div>
<div class="col-sm-3">product6</div>
.
.
.
etc..
</div>
</div>
</div>
I want to create this structure:
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-3">product1</div>
<div class="col-sm-3">product2</div>
<div class="col-sm-3">product3</div>
<div class="col-sm-3">product4</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-3">product1</div>
<div class="col-sm-3">product2</div>
<div class="col-sm-3">product3</div>
<div class="col-sm-3">product4</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-3">product1</div>
<div class="col-sm-3">product2</div>
<div class="col-sm-3">product3</div>
<div class="col-sm-3">product4</div>
</div>
</div>
.
.
.
etc...
</div>
How do I change the dynamic structure so they get what they want?
Thanks in advance!
In order to create the structure you want:
You need to put <div class="item active"> in the foreach loop as well, because in order to have many items, you want that to be repeated many times too.
You have to remove active from <div class="item active"> as it will be added to every item, while we only want it to be in the first one.
You have to create a checking variable, so that the class active is added to the first item only.
Your final code should look like:
<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
<div class="carousel-inner">
<?php
$i = 0; /* This is the checking variable */
$active; /* This is the variable containing the class 'active' */
foreach ($this->getItems() as $_item):
$i++; /* We increment the checking variable in each loop */
$active = ($i === 1) ? "active" : ""; /* We make the check */
?>
<div class="item <?php echo $active;?>">
<!-- The rest of your code as it is -->
</div>
<?php
endforeach;
?>
</div>
</div>
[EDIT]:
Considering your comment, in the case of wanting four products in each item, you would need to use another loop inside <div class = "row">.
The key part you are doing wrong in your code, however, that doesn't change, is that you don't loop the <div class = "item"> and that's way you have only one.
A preview of how your code inside <div class="item"> should be:
<div class="item <?php echo $active;?>">
<div class="row">
<?php
for ($i = 0; $i <= 4; ++$i):
?>
<div class="col-sm-3"><!-- The rest of the code --></div>
<?php
endfor;
?>
</div>
</div>
Try this:
<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<?php foreach ($this->getItems() as $key=>$_item): // add $key in for loop
if($key != 0 && $key % 4 == 0) { // just add this code - it will check if 4 records has been displayed re create row div...
echo '</div><div class="row">';
}
?>
<div class="col-sm-3">
<a class="product-image" href="<?php echo $_item->getProductUrl() ?>" title="<?php echo $this->escapeHtml($_item->getName()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->resize(75); ?>" width="75" height="75" alt="<?php echo $this->escapeHtml($_item->getName()) ?>" /></a>
<div class="product-details">
<h3 class="product-name"><?php echo $this->escapeHtml($_item->getName()) ?></h3>
<?php echo $this->getPriceHtml($_item, true) ?>
<button type="button" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Add to Cart')) ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_item) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
<ul class="add-to-links">
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<li><?php echo $this->__('Add to Wishlist') ?></li>
<?php endif; ?>
<?php if($_compareUrl=$this->getAddToCompareUrl($_item)): ?>
<li><span class="separator">|</span> <?php echo $this->__('Add to Compare') ?></li>
<?php endif; ?>
</ul>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>