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">
Related
<?php $section1 = get_field('section1'); ?>
<div class="section1" id="section1">
<div class="container">
<h2><?php echo $section1['title']; ?></h2>
<div class="quote-triangle">
<p>
<?php echo $section1['quote']; ?>
</p>
<div class="quote__moving-border"></div>
</div>
<div class="bottom">
<div data-aos="fade-down">
<div class="leftside">
<h3>
<?php echo $section1['title_image']; ?>
</h3>
<div class="caption"><?php echo $section1['caption_image']; ?></div>
<div class="desc">
<p>
<?php echo $section1['desc_image']; ?>
</p>
</div>
</div>
</div>
<div data-aos="fade-down">
<div class="rightside">
<img src="<?php echo esc_url( $secttion1['image']['url'] ); ?>" alt="" class="rightside__img">
</div>
</div>
</div>
</div>
</div>
<?php endif; ?>
I had followed literally the ACF documentation for the GROUP type but when I put the if in the PHP tag the whole section disappears and when I remove if the section back but The Group type still not worked.
I have a CodeIgniter project which gets multiple data from server & display on webpage.
I wanna built something like that for all items
I have 100+ multiple items stored in database.
I wanna see first and second image when I enter website and then when I scroll page I wanna see third and fourth image and so on.
My Model:
public function getContent()
{
$query=$this->db->get('my_database');
return $query->result();
}
public function getCount(){
return $this->db->count_all('my_database');
}
My Controller:
function __construct()
{
parent::__construct();
$this->load->helper('url');
$this->load->database();
$this->load->library('session');
$this->load->model('My_Model');
}
public function index()
{
$contents['content']=$this->My_Model->getContent();
$contents['count']=$this->My_Model->getCount();
$this->load->view('_header');
$this->load->view('myview',$contents);
$this->load->view('_footer');
}
My View:
<?php for ( $i=0 ; $i < $count/2 ; $i++ ){ ?>
<div class="page-wrap">
<?php foreach($content as $cont){
if ($cont->item_id %2 == 1): ?>
<div class="item-left">
<a href="#">
<div class="text-part">
<h2><?php echo $cont->item_name ?></h2>
<p><?php echo $cont->item_text?></p>
</div>
<div class="image-part">
<img src="<?=base_url() ?><?php
echo $cont->item_url?>" width="500" height="275" alt="" />
</div>
</a>
</div>
<?php else: ?>
<div class="item-right">
<a href="#">
<div class="text-part">
<h2><?php echo $cont->item_name ?></h2>
<p><?php echo $cont->item_text?></p>
</div>
<div class="image-part">
<img src="<?=base_url() ?><?php
echo $cont->item_url?>" width="500" height="275" alt="" />
</div>
</a>
</div>
<?php endif; } ?>
</div> <?php } ?>
Actually these codes working perfectly when I have only 2 items.
But I have more than 100 items and my view is becoming like that
I wanna continue left, right after left, right again. But my codes are working like left, left after right, right.
I really need your help. I've tried multiple if, for loops but I couldn't make it right. There is some logic error in my view php codes but I can't find it.
I wonder what if I can get 2 items from database instead of 1 image at same time. But I couldn't get only 2 image at same time.
Just Replace this:
<?php else: ?>
<div class="item-left">
<a href="#">
<div class="text-part">
<h2><?php echo $cont->item_name ?></h2>
<p><?php echo $cont->item_text?></p>
</div>
<div class="image-part">
<img src="<?=base_url() ?><?php
echo $cont->item_url?>" width="500" height="275" alt="" />
</div>
</a>
</div>
with this:
<?php else: ?>
<div class="item-left">
<a href="#">
<div class="image-part">
<img src="<?=base_url() ?><?php
echo $cont->item_url?>" width="500" height="275" alt="" />
</div>
<div class="text-part">
<h2><?php echo $cont->item_name ?></h2>
<p><?php echo $cont->item_text?></p>
</div>
</a>
</div>
Updated Answer:
Replace your posted view code with this:
<?php $first = false; ?>
<?php foreach($content as $cont): ?>
<?php if ($cont->item_id % 2 == 1): ?>
<div class="page-wrap">
<div class="item-left">
<a href="#">
<div class="text-part">
<h2><?php echo $cont->item_name; ?></h2>
<p><?php echo $cont->item_text; ?></p>
</div>
<div class="image-part">
<img src="<?php echo base_url() . $cont->item_url;?>" width="500" height="275" alt="" />
</div>
</a>
</div>
<?php $first = true;?>
<?php else: ?>
<div class="item-right">
<a href="#">
<div class="image-part">
<img src="<?php echo base_url() . $cont->item_url;?>" width="500" height="275" alt="" />
</div>
<div class="text-part">
<h2><?php echo $cont->item_name; ?></h2>
<p><?php echo $cont->item_text; ?></p>
</div>
</a>
</div>
</div>
<?php $first = false;?>
<?php endif; ?>
<?php endforeach; ?>
<?php if($first): ?>
</div>
<?php endif;?>
i have a website live at the moment and the images desplay in sequence i want to add a little dynamics with the slider and make it so it randomly displays the images instead this is the basic code:
<div class="container slideshowContainer" style="width: 100%;">
<!-- BEGIN REVOLUTION SLIDER -->
<div class="fullwidthbanner-container slider-main margin-bottom-10">
<div class="fullwidthabnner">
<ul id="revolutionul" style="display:none;">
<!-- OUTPUT THE SLIDES -->
<?php
foreach($slides as $d){
?>
<li data-transition="fade" data-slotamount="8" data-masterspeed="700" data-delay="9400" data-thumb="assets/img/sliders/revolution/thumbs/thumb2.jpg">
<?php if($d['slideshow_image_sub_title_4'] != ""){ ?>
<a href="<?php echo $d['slideshow_image_sub_title_4']; ?>">
<img src="uploads/images/<?php echo $d['slideshow_image_file']; ?>" title="<?php echo $d['slideshow_image_title']; ?>" style="width: 100%;" />
</a>
<?php } else { ?>
<img src="uploads/images/<?php echo $d['slideshow_image_file']; ?>" title="<?php echo $d['slideshow_image_title']; ?>" style="width: 100%;" />
<?php } ?>
</li>
<?php
}
?>
</ul>
<div class="tp-bannertimer tp-bottom"></div>
</div>
</div>
<!-- END REVOLUTION SLIDER -->
</div>
how can i modify this to help randomly display images
please ask if i need to provide more info
Thanks in advance
Try this:
div class="container slideshowContainer" style="width: 100%;">
<!-- BEGIN REVOLUTION SLIDER -->
<div class="fullwidthbanner-container slider-main margin-bottom-10">
<div class="fullwidthabnner">
<ul id="revolutionul" style="display:none;">
<!-- OUTPUT THE SLIDES -->
<?php
shuffle($slides);
foreach($slides as $d){
?>
<li data-transition="fade" data-slotamount="8" data-masterspeed="700" data-delay="9400" data-thumb="assets/img/sliders/revolution/thumbs/thumb2.jpg">
<?php if($d['slideshow_image_sub_title_4'] != ""){ ?>
<a href="<?php echo $d['slideshow_image_sub_title_4']; ?>">
<img src="uploads/images/<?php echo $d['slideshow_image_file']; ?>" title="<?php echo $d['slideshow_image_title']; ?>" style="width: 100%;" />
</a>
<?php } else { ?>
<img src="uploads/images/<?php echo $d['slideshow_image_file']; ?>" title="<?php echo $d['slideshow_image_title']; ?>" style="width: 100%;" />
<?php } ?>
</li>
<?php
}
?>
</ul>
<div class="tp-bannertimer tp-bottom"></div>
</div>
</div>
<!-- END REVOLUTION SLIDER -->
</div>
http://php.net/manual/de/function.shuffle.php
I'm pretty sure there is a better answer than this, but the way I accomplish this is by naming the pictures using numbers, and using the following code to load them:
<img src="uploads/images/<?php.rand(1,9).".jpg";?>">
I hope this helps.
I have a chunk of content in a textarea that I can call dynamically to the front by using <php the_content ?> See full code below.
The problem is, I dont have an assigned area for the image. (I'm open to options to create one but I think it will be too much effort), anyway, is there anything I can do (JQuery / JS is fine) that I can call the image to fill the: <?php echo $the_content['image'] ?> that you see in my code, which obviously does not work? Meanwhile leaving the actual text part or rest of the content separate.
I am attaching an illustration for a more visual idea of what I am looking for
Here is the entire code for that section
<section class="box classes-box" id="classes_box"><!-- Section Events -->
<div class="container light-grey-background">
<div class="row">
<div class="col-md-6 no-padding">
<div class="boxing-classes" style="background-image: url('<?php echo $the_content['image'] ?>')">
<div class="classes">
<nav class="classes-nav">
<ul class="clean-list toggle-list clearfix">
<?php foreach($slides as $i => $slide): ?>
<li class="classes-menu-item ">
<input type="radio" id="toggle-<?php echo $slide['post']->ID; ?>" name="toggle-helper" autocomplete="off">
<label for="toggle-<?php echo $slide['post']->ID; ?>"><?php echo get_the_title( $slide['post']->ID ) ?></label>
</li>
<?php endforeach; ?>
</ul>
</nav>
</div>
</div>
</div>
<div class="col-md-6 no-padding ">
<?php foreach($slides as $i => $slide): ?>
<div class="classes-content-block" id="classes_content_<?php echo $slide['post']->ID ?>" style="display:none;">
<header class="padding white-background">
<h2 class="entry-header black-background"><?php echo get_the_title( $slide['post']->ID ) ?></h2>
</header>
<div class="entry-content padding">
<?php echo apply_filters('the_content', $slide['post']->post_content); ?>
<?php if ( !empty( $slide['options']['button'] )): ?>
<div class="white-background">
<a class="read-more text-center red-black-hover" href="<?php echo $slide['options']['button']['link'] ? $slide['options']['button']['link'] : '#'; ?>"><?php echo $slide['options']['button']['link_text'] ? $slide['options']['button']['link_text'] : 'View Timeline' ; ?></a>
</div>
<?php endif; ?>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
Normally, what people do is to create a Shortcode that will produce the desired HTML, something like:
[image-block src="apple-touch-icon.png" class="all-imgs" id="my-img"]The content[/image-block]
This would be the shortcode:
add_shortcode( 'image-block', function( $atts, $content) {
return sprintf(
'<div class="left"><img src="%1$s" class="%2$s" id="%3$s"></div><div class="right">%4$s</div>',
$atts['src'],
$atts['class'],
$atts['id'],
$content
);
});
And this the output:
See CSS property FLOAT : left|right
<div id=container class="clearfix">
<div class="image-wrapper" style="float:left;max-width:50%;padding:0;margin:0">
<img src="images/mypicture.jpg" alt="" class="rwd-image" id="mymage">
</div>
<div class="content-wrapper" style="float:left;max-width:50%;padding:0;margin:0">
<p>Lorem Ipsum</p>
</div>
</div>
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; ?>