First please look to the picture to know what different
Sample picture
my css & html is like this:
#media screen and (max-width: 360px) {
.bg-product {
background-image: url(../../assets/img/home/mobile/3.png);
position: absolute;
}
}
<div class="col-12 px-0">
<a href="<?php echo site_url($link_product) . $link ?>" class="link-default">
<h2 class="h5 product-background">
<?php echo $value->item_name; ?>
</h2>
<p class="my-0 product-background">
<?php
if ($value->item_discount != 0 ) {
?>
<strike class="text-discount product-background"><?php echo currency_display($value->$price); ?></strike>
<?php
if($value->item_discount >= 10) {
?>
<span class="text-nowrap product-background"><?php echo $value->item_discount . '% Off' ?></span>
<?php
}
?>
<?php
}
?>
</p>
<p class="price-product bg-product">
<?php
if ($value->item_discount != 0 ) {
echo currency_display($value->$price - ($value->$price * ($value->item_discount/100)));
}else {
echo currency_display($value->$price);
}
?>
</p>
</a>
</div>
its for mobile version, i have some problem why i have space like that in my view, where i call a function for discount price , the space is apear between the real price and discount prince
Please try using background-size: cover -
.bg-product {
background-image: url(../../assets/img/home/mobile/3.png);
position: absolute;
background-size: cover;
}
Related
I want to display certain URL links on a product page only for certain products and for certain countries. Initially, I retrieve the IP of the country then check, the product ID. If the product ID is in the array I display Link 1 if users are from Canada and Link 2 if they are from the US. The problem is that it is not showing anything. Nothing happens within the if statement that contains in_array and not sure what I am doing wrong.
<?php
if ($currentCountry =="CA" || $currentCountry =="US")
{
$p_id = $_product->getId();
$include_id = array(546, 125,135);
?>
<style>
.choose-local {
display: flex;
}
.data-section {
min-width: 33%;
}
.choose-local .data-section span {
float: left;
}
</style>
<?php
if (in_array($p_id,$include_id, TRUE))
{
?>
<div class='choose-local'>
<div class='data-section'>
<span style="">Available Locally from :</span>
</div>
<div class="data-section">
<?php
if ($currentCountry =="CA")
{
?>
<span>Link 1<a href='https://www.link1.com'>[Order from here]</a></span>
<?php
}
if ($currentCountry =="US")
{
?>
<span>Link 2<a href='https://www.link2.com'>[Order from here]</a></span>
<?php
}
?>
</div>
</div>
<?php
}
}
?>
check weather your $p_id is string or int
<?php
$currentCountry = "CA";
if ($currentCountry =="CA" || $currentCountry =="US")
{
$p_id = 125;
$include_id = array(546, 125,135);
?>
<style>
.choose-local {
display: flex;
}
.data-section {
min-width: 33%;
}
.choose-local .data-section span {
float: left;
}
</style>
<?php
if (in_array($p_id,$include_id, TRUE))
{
?>
<div class='choose-local'>
<div class='data-section'>
<span style="">Available Locally from :</span>
</div>
<div class="data-section">
<?php
if ($currentCountry =="CA")
{
?>
<span>Link 1<a href='https://www.link1.com'>[Order from here]</a></span>
<?php
}
if ($currentCountry =="US")
{
?>
<span>Link 2<a href='https://www.link2.com'>[Order from here]</a></span>
<?php
}
?>
</div>
</div>
<?php
}
}
?>
This question already has answers here:
Grid of responsive squares
(5 answers)
Closed 3 years ago.
I'm making a theme for my Omeka site in which I am calling an item and its various components using PHP. Each item is in its own div, and I have attempted to create a tile-like grid with Bootstrap. However, the divs only line up in a single vertical column. How do I make all divs line up in a row of three or four? I'm completely stumped. It works fine without the PHP (with multiple rows and manually added content) but won't work otherwise. This is what it looks like right now. And this is what I want the divs to look like:
Here is the html/php:
<?php foreach (loop('items') as $item): ?>
<div class="container">
<div class="item">
<div class="row">
<!-- attempt at square grid -->
<div class="col-md-3 col-sm-4 col-xs-6 item-item">
<div class="dummy"></div>
<div class="thumbnail purple">
Image: <?php $image = $item->Files; ?>
<?php if ($image) {
echo link_to_item('<div style="background-image: url(' . file_display_url($image[0], 'original') . ');" class="img"></div>');
} else {
echo link_to_item('<div style="background-image: url(' . img('defaultImage#2x.jpg') . ');" class="img"></div>');
}
?>
Title: <?php echo link_to_item(metadata('item', array('Dublin Core', 'Title')), array('class'=>'permalink')); ?><br>
Creator: <?php echo metadata('item', array('Dublin Core', 'Creator')); ?><br>
Subject: <?php echo metadata('item', array('Dublin Core', 'Subject')); ?><br>
Description: <?php echo metadata('item', array('Dublin Core', 'Description'), array('snippet'=>150)); ?><br>
<br>
</div>
</div>
</div>
</div><!-- end grid -->
And the CSS:
.dummy {
margin-top: 100%;
}
.thumbnail {
position: absolute;
top: 15px;
bottom: 0;
left: 15px;
right: 0;
text-align:center;
padding-top:calc(50% - 30px);
}
.item-item {
border: solid black 5px;
}
I'll give you a pseudo method of achieving this, harnessing array_chunk().
$chunks = array_chunk($array, 4);
foreach($chunks as $group): ?>
<div class="row">
<?php foreach($group as $element): ?>
<div class="col-md-3 col-sm-4 col-xs-6 item-item">
<?php // do your php stuff...?>
</div>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
Example
I'm retrieving data out of a database using PHP's PDO extension. I never had a problem with this and it always shows up in all browsers. BUT when I tested the website on a friends laptop, the foreach loop works but the content is not displayed. The content is present in the source code.
this is how I set up the code that should be displayed:
<?php
foreach($advertentiesManager->recenteAdvertenties() as $advertentie) {
$verkoperData = $usersManager->userData($advertentie->verkoper);
?>
<div class="col-md-4" style="margin:10px 0;">
<div class="advertentie">
<div class="overlay"></div>
<div class="img" style="background:url('images/categorie/<?php echo $advertentie->categorie; ?>.jpg') no-repeat center center;background-size:cover;"></div>
<div class="picture" style="background:url('<?php echo str_replace("../", "", $verkoperData->foto); ?>') no-repeat center center;background-size:cover;"></div>
<div class="prijs"><p class="h2"> <?php echo $advertentie->verkoopprijs; ?></p></div>
<div style="padding: 10px;padding-left:80px;margin-top:-40px;">
<a href="<?php echo $advertentie->type.'/'.strtolower(str_replace(" ", "-", $advertentie->titel)).'-'.$advertentie->id; ?>">
<?php echo $advertentie->titel; ?>
</a>
<br>
<p style="color:#777;font-size:.9em;">
<?php
$beschrijving = strip_tags($advertentie->omschrijving);
$max_length = 100;
if (strlen($beschrijving) > $max_length) {
$offset = ($max_length - 3) - strlen($beschrijving);
$beschrijving = substr($beschrijving, 0, strrpos($beschrijving, ' ', $offset)) . '... Meer';
} else {
$beschrijving = $advertentie->omschrijving;
}
echo $beschrijving;
?>
</p>
</div>
</div>
</div>
<?php
}
?>
You can view a live example at http://www.coupontrade.nl/ the content should be displayed under "Recente advertenties" and above the twitter part.
I'm using Drupal 7 and Field Slideshow plugin. I published my slide and working. It's have a pager and that's name 'Prev' and 'Next'
I don't want text, must image. How can i do it?
<div id="field-slideshow-<?php print $slideshow_id; ?>-controls" class="field-slideshow-controls">
<?php print t('Prev'); ?>
<?php if (!empty($controls_pause)) : ?>
<?php print t('Play'); ?>
<?php print t('Pause'); ?>
<?php endif; ?>
<?php print t('Next'); ?>
</div>
<div id="field-slideshow-<?php print $slideshow_id; ?>-controls" class="field-slideshow-controls">
<?php if (!empty($controls_pause)) : ?>
<?php print t('Play'); ?>
<?php print t('Pause'); ?>
<?php endif; ?>
</div>
And styles like this:
.prev {
display:inline-block;
width:20px;
height:20px;
background: transparent url('path/to/prev/image.png') no-repeat center center;
}
.next {
display:inline-block;
width:20px;
height:20px;
background: transparent url('path/to/next/image.png') no-repeat center center;
}
Or you can have something like this:
<div id="field-slideshow-<?php print $slideshow_id; ?>-controls" class="field-slideshow-controls">
<img scr="path/to/prev/image.png" alt="<?php print t('Prev'); ?>" />
<?php if (!empty($controls_pause)) : ?>
<?php print t('Play'); ?>
<?php print t('Pause'); ?>
<?php endif; ?>
<img scr="path/to/next/image.png" alt="<?php print t('Next'); ?>" />
</div>
This is what I am using:
<div class="banner">
<?php if(get_post_meta($post->ID, 'banner', true)) : ?>
<img src="<?php echo get_post_meta($post->ID, 'banner', true); ?>" />
<?php else : ?>
<?php the_title(); ?>
<?php endif; ?>
<div>`
and..
#banner {
clear:both;
width:980px;
overflow: hidden;
background: #F4F5F6;
padding:12px 0;
margin: 0 0 15px 0;
-moz-border-radius:15px;
-webkit-border-radius: 15px;
border-radius: 15px; /* future proofing */
-khtml-border-radius:15px; /* for old Konqueror browsers */
}
#banner img {display: block; margin:0 auto;}
I don't want a title displayed so that if/else is not necessary.
If there is no img / the custom field is not being used, can the div just not show? Right now if the custom field is not being used it is still showing an empty div.
SOLVED IT!!! Sorry for even posting here. Though it's not pretty, it works.
<div id="bannerHolder">
<?php if(get_post_meta($post->ID, 'banner', true)) : ?>
<div id="banner">
<img src="<?php echo get_post_meta($post->ID, 'banner', true); ?>" />
</div><!--banner-->
<?php else : ?>
<?php endif; ?>
</div><!--bannerholder-->
Put the if clause around the div, not inside:
<?php
if ($banner = get_post_meta($post->ID, 'banner', true))
{
echo '<div class="banner">', $banner, '</div>';
}
?>
Put the if clause encapsulating the div element and remove the else part of the php sentence.
Example:
<?php if(get_post_meta($post->ID, 'banner', true)) : ?>
<div class="banner">
<img src="<?php echo get_post_meta($post->ID, 'banner', true); ?>" />
<div>
<?php endif; ?>