Ignore the horrible code and formating, it's what I have to work with.
<div class="stories-pictures"><div class="inside">
<?php for ($j=0; $j<2; $j++) foreach ($stories as $post) { /* can be empty field as well*/
setup_postdata($post);
if ($post->ID==$mainID && $j==0) {
$link = get_permalink($productID);
$title = "Back to <br/>".get_the_title($productID);
$img = "<img class='backbg' width='316' height='234' src=".get_template_directory_uri()."/images/bg.png";
} else if ($post->ID!=$mainID && $j==1) {
$link = get_the_permalink()."?e=$productID";
$title = get_the_title();
$img = get_the_post_thumbnail(null,'story-thumb');
} else continue;
?>
<a href="<?php echo $link; ?>" class="storiespicture">
<span>
<span><em> <span class="title"><?php echo $title; ?></span></em></span>
</span>
<?php echo $img; ?>
<div class="storieoverlay">
</div> <!-- .storieoverlay -->
</a> <?php } ?>
</div></div>
Here's what's outputted:
<a href="http://hidden/" class="storiespicture">
<span>
<span> <em> <span class="title" style="background-color: rgba(144, 137, 213, 0.901961);">hidden</span></em> </span>
</span>
<img width="316" height="234" src="http://hidden/hidden.jpg" class="attachment-story-thumb wp-post-image" alt="hidden"> </a>
I'm trying to get the .storieoverlay class to be under the img.
I removed some possibly sensitive content, hence where hidden is shown.
It's because you don't close your image tag:
$img = "<img class='backbg' width='316' height='234' src=".get_template_directory_uri()."/images/bg.png";
Should be
$img = "<img class='backbg' width='316' height='234' src='".get_template_directory_uri()."/images/bg.png'>";
I've fixed the issue now.
It was a plugin outputting the mark up on this certain page, everything said here has been useful though, so thanks.
Related
I want to display an RSS feed on a web page. Currently I'm only getting the title and description but I want to get images also.
<?php
$html = "";
$url = "http://rss.cnn.com/rss/edition.rss";
$xml = simplexml_load_file($url);
foreach ($xml->channel->item as $itm) {
$title=$itm->title;
$link=$itm->link;
$pubDate=$itm->pubDate;
$description=$itm->description;
$img=$itm->media;
}
?>
<div class="container">
<div class="row">
<div class="col-md-6">
<?php echo $title; ?><br>
<span class="text text-info"><?php echo $pubDate; ?></span><br>
<p align="right" class="text text-info"><?php echo $description; ?></p>
<img src="<?php echo $img; ?>"></img>
</div>
</div>
</div>
<?php } ?>
You've finished your foreach loop twice. That's almost certainly not what you want to happen, or you wouldn't have used the foreach loop.
Try removing the first } (before the bulk of the HTML) and also replacing <img src="<?php echo $img; ?>"></img> with <img src="<?php echo $img; ?>" />.
I have the following code.
while ($slideNews = mysqli_fetch_array($slideImage )) {
$cutNews = LimitarCaracteres($slideNews['textNews'], $maxCaracteres = 300);
?>
<li>
<a href="<?php echo ROOT;?>/News/<?php print $slideNews["id"].'/'.$slideNews["friendlyURL"];?>">
<span>
<?php echo $cutNews; ?>
</span>
<h2 class="nomeGame"><?php print $slideNews["game"];?></h2>
<img src=" <?php echo $slideNews['secondImage']; ?> ">
</a>
</li
<?php } ?>
I need to do that in this part of the code:
<h2 class="nomeGame"><?php print $slideNews["game"];?></h2>
html does not run, I just need the part of the text
I want to add a script after showing 10 videos in my website. But I don't understand how to use an if condition for this. This is my php code which displays all the videos from my database. I want that after displaying 10 videos it display this script.
<script>
This may contain the code of chitika code.
<script>
This is PHP code.
<section class="videos">
<?php while ($res=$stmt_today->fetch()) { ?>
<?php if ($res === NULL) { ?>
<section class="box">
<a href="" class="video-box">
<img src="" width="190" height="90" alt="">
</a>
<strong class="title">Coming Soon</strong>
</section>
<?php } else {
$immg = basename($images);
$imagee = "img"."/".$immg; ?>
<section class="box" style="width:100%; padding-top:2px;">
<?php if($images!=''){?>
<a href="video.php?vid=<?php echo $video_id ?>" class="video-box">
<img src="<?php echo $imagee; ?>" width="190" height="90" alt="">
</a>
<?php } else {?>
<a style="margin-left:5px;"href="video.php?vid=<?php echo $video_id ?>" class="video-box">
<img src="http://img.youtube.com/vi/<?php echo $video_thumbnail; ?>/mqdefault.jpg" width="190" height="90" alt="">
</a>
<?php } ?>
</section> <hr>
<?php } ?>
<?php } ?>
</section>
Inside your loop you just need a simple condition and a counter.
Here's an example. This is a loop that runs 12 times using a while loop like your code.
$i is an incrementing variable ($i++ increments it's value at the end of each loop cycle). The if statement says if $i is equal to 10 then do something. In this case it echos "10 records reached".
Make sure that when you define your counter first ($i = 1) it is before the while loop starts.
<?php
$i = 1;
while ($i <= 12) {
echo "record $i<br/>";
if ($i == 10) {
echo "10 records reached<br/>";
}
$i++;
}
?>
So adapting that thought process to your code would look like this:
<section class="videos">
<?php $i = 1; // This is where the counter is defined ?>
<?php while ($res=$stmt_today->fetch()) { ?>
<?php if ($res === NULL) { ?>
<section class="box">
<a href="" class="video-box">
<img src="" width="190" height="90" alt="">
</a>
<strong class="title">Coming Soon</strong>
</section>
<?php } else {
$immg = basename($images);
$imagee = "img"."/".$immg; ?>
<section class="box" style="width:100%; padding-top:2px;">
<?php if($images!=''){?>
<a href="video.php?vid=<?php echo $video_id ?>" class="video-box">
<img src="<?php echo $imagee; ?>" width="190" height="90" alt="">
</a>
<?php } else {?>
<a style="margin-left:5px;"href="video.php?vid=<?php echo $video_id ?>" class="video-box">
<img src="http://img.youtube.com/vi/<?php echo $video_thumbnail; ?>/mqdefault.jpg" width="190" height="90" alt="">
</a>
<?php } ?>
</section><hr>
<?php } ?>
<?php if ($i == 10) { // This is the new condition ?>
<script>
This may contain the code of chitika code.
<script>
<?php } // condition ends here ?>
<?php $i++ // increment the counter ?>
<?php } ?>
</section>
If you don't want to include your null values in the count (your 'coming soon' videos), you can simply move the counter increment $i++ up into the else { ... } portion of your condition.
<?php if (res === NULL) {
...
} else {
...
$i++;
} ?>
I currently have a carousel on my page inside a Wordpress loop. So as it loops through it changes the background image according to which post I am currently on in the loop. However, I want to use media queries to load smaller images if for instance I the screen size is smaller.
This is what I currently have:
while( $loop->have_posts() ) : $loop->the_post();
$class = '';
// Custom Posts
$carousel_image_1 = get_field('carousel_image_1');
$image_1_title = get_field('image_1_title');
if( $slide_counter == 0 ) { $class .= ' active'; }
?>
<div class="item <?php echo $class ?> <?php echo "slide_" . $slide_counter ?>">
<!-- Set the first background image using inline CSS below. -->
<a href="<?php echo get_post_permalink(); ?>" target="_blank">
<div class="fill" style="background-image:url(<?php echo $carousel_image_1['url']; ?>); background-size:cover;" alt="<?php echo $carousel_image_1['alt']; ?>"> </div>
<div class="carousel-caption">
<h2><?php echo $image_1_title; ?></h2>
<img width="80" class="book" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/book.png" alt="">
</div>
</a>
</div>
<?php $slide_counter++; ?>
<?php endwhile; wp_reset_query(); ?>
You can't use media queries inline, and you won't be able to have the dynamic flexibility of your variables in CSS, because PHP is server-side.
But, you could do this with JavaScript as long as the JS is able to get the PHP variables (my example uses jQuery):
<?php
while( $loop->have_posts() ) : $loop->the_post();
$class = '';
// Custom Posts
$carousel_image_1 = get_field('carousel_image_1');
$carousel_image_2 = get_field('carousel_image_2'); // added this, for different size image
$image_1_title = get_field('image_1_title');
if( $slide_counter == 0 ) { $class .= ' active'; }
?>
<div class="item <?php echo $class ?> <?php echo "slide_" . $slide_counter ?>">
<a href="<?php echo get_post_permalink(); ?>" target="_blank">
<div class="fill" style="background-size:cover;" alt="<?php echo $carousel_image_1['alt']; ?>"> </div>
<div class="carousel-caption">
<h2><?php echo $image_1_title; ?></h2>
<img width="80" class="book" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/book.png" alt="">
</div>
</a>
</div>
<script>
var resizeTimer;
function resizer() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
var windowWidth = $(window).width();
if (windowWidth >= 992) { // for width 992 pixels and up
$('.fill').css({
'background-image': 'url(<?php echo $carousel_image_1["url"]; ?>)';
});
} else { // smaller sizes
$('.fill').css({
'background-image': 'url(<?php echo $carousel_image_2["url"]; ?>)';
});
}
}, 200);
}
resizer();
$(window).on('resize', resizer);
</script>
<?php $slide_counter++; ?>
<?php endwhile; wp_reset_query(); ?>
I haven't tested it but I think it should work. You can also adjust the timeout to your preference (right now it's 200ms).
Or if you wanted to not make it truly responsive, and just set the background on page load, you could just write:
<script>
if (windowWidth >= 992) { // for medium size width and up
$('.fill').css({
'background-image': 'url(<?php echo $carousel_image_1["url"]; ?>)';
});
} else { // smaller sizes
$('.fill').css({
'background-image': 'url(<?php echo $carousel_image_2["url"]; ?>)';
});
}
</script>
The following Html CSS will show image in mobile view only
Html:
foreach($data as $item):
echo "
<div class='col-lg-4'>
<div class='panel panel-primary backImg' style='background-image:url({$item['imageLink']}); background-size:100% 100%;'>
Some Text
</div>
</div>";
endforeach;
Css:
#media(min-width: 480px){
.backImg{
background-image:none !important;
}
}
//In PHP fetch content and truncate the string or variable, till 3rd breakline then display
//when i use this method the entire div deallocated and the its not displaying properly...hope the fetch content contain some image tags too // ...
<div class="mid-blks-cont">
<!-- Block1 -->
<div class="mid-block-1 boxgrid caption">
<?php
foreach ($querypost as $row) {
$content = $row->post_content;
$pcontent_overview = (strlen($content) > 300) ? substr($content,0,300).'... Read More' : $content;
if($img == "No Image Uploaded" ) {
?>
<img alt="" src="<?php echo base_url(); ?>assets/img/samples/sample1.jpg"style="width: 391px; height:231px"/>
<?php } else { ?>
<img alt="" src="<?php echo base_url(); ?>uploads/<?php echo $row->post_media ;?>" style="width: 391px; height:231px" />
<?php }?>
<h4 class="cat-label cat-label2"><?php echo $row->category;?></h4>
<div class="cover boxcaption">
<h3><?php echo $row->post_title;?><span class="topic-icn"><?php echo $row->comment_count;?></span></h3>
<p> <?php echo $pcontent_overview;?>....</p>
MORE <i class="fa fa-angle-double-right"></i>
</div>
<?php } ?>
</div>
</div>