I am starting out with PHP for a WordPress and have written some code to put some social network icons in the footer. The way I have done it works, I'm simply calling the content of social network URL stored in the DB and if there is something the icon/link in the footer. But looks very inefficient to me, here is the code, does anyone know how to make it more efficient.
<?php
$social1 = of_get_option('fab_social_twitter_url');
$social2 = of_get_option('fab_social_facebook_url');
$social3 = of_get_option('fab_social_linkedin_url');
?>
<!-- divs for right social network icons column -->
<div class="eight columns">
<div class="social">
<ul>
<?php
if(!empty($social1)) {
?>
<li><img src="<?php echo of_get_option('fab_social_twitter_icon'); ?>" alt="Follow us on Twitter"></li>
<?php
}
?>
<?php
if(!empty($social2)) {
?>
<li><img src="<?php echo of_get_option('fab_social_facebook_icon'); ?>" alt="Follow us on Facebook"></li>
<?php
}
?>
<?php
if(!empty($social3)) {
?>
<li><img src="<?php echo of_get_option('fab_social_linkedin_icon'); ?>" alt="Follow us on Linkedin"></li>
<?php
}
?>
</ul>
</div>
</div>
Maybe:
<!-- divs for right social network icons column -->
<div class="eight columns">
<div class="social">
<ul>
<?php
foreach (array("twitter","facebook","linkedin") as $option)
($tmp=of_get_option('fab_social_'.$option.'_url')) && (print('<li><img src="'.of_get_option('fab_social_'.$option.'_icon').'" alt="Follow us on '.ucfirst($option).'"></li>'));
?>
</ul>
</div>
</div>
From a performance point of view, I don't think that there is anything to optimize in here, three separate cases tested individually
<?php
$social1 = of_get_option('fab_social_twitter_url');
$social2 = of_get_option('fab_social_facebook_url');
$social3 = of_get_option('fab_social_linkedin_url');
$icon1 = of_get_option('fab_social_twitter_icon');
$icon2 = of_get_option('fab_social_facebook_icon');
$icon3 = of_get_option('fab_social_linkedin_icon');
?>
<!-- divs for right social network icons column -->
<div class="eight columns">
<div class="social">
<ul>
<?php if(!empty($social1)) { ?>
<li>
<a href="<?php echo $social1; ?>">
<img src="<?php echo $icon1; ?>" alt="Follow us on Twitter">
</a>
</li>
<?php } ?>
<?php if(!empty($social2)) { ?>
<li>
<a href="<?php echo $social2; ?>">
<img src="<?php echo $icon2; ?>" alt="Follow us on Facebook">
</a>
</li>
<?php } ?>
<?php if(!empty($social3)) { ?>
<li>
<a href="<?php echo $social3; ?>">
<img src="<?php echo $icon3; ?>" alt="Follow us on Linkedin">
</a>
</li>
<?php } ?>
</ul>
</div>
</div>
Related
I have a section named "Trending" I want to display both series and movies (two different tables that are not joined) but I want to order them based on who got more views. I've done 2 foreach loops but it shows movies first then series; the problem is when a serie for example has 1000 views and a movie has 800 it shows the movie first because the first iteration is for trending movies .Is there any logic to tackle this problem?
<div class="trending" id="trending">
<div class="trending-wrapper">
<?php foreach($trendingMovies as $trendingMovie) : ?>
<!-- Movie Start -->
<a href="<?= base_url('movies/movie/') . $trendingMovie->movie_id ?>" class="trending_item">
<div class="trending_item_poster">
<img src="<?= $trendingMovie->movie_poster_large ?>" alt="<?= $trendingMovie->movie_name ?>">
</div>
</a>
<!-- Movie End -->
<?php endforeach; ?>
<?php foreach($trendingSeries as $trendingSerie) : ?>
<!-- Serie Start -->
<a href="<?= base_url('series/serie/') . $trendingSerie->serie_id ?>" class="trending_tem">
<div class="trending_item_poster">
<img src="<?= $trendingSerie->serie_poster_large ?>" alt="<?= $trendingSerie->serie_name ?>">
</div>
</a>
<!-- Serie End -->
<?php endforeach; ?>
</div>
</div>
Use JQuery (;
<div class="trending" id="trending">
<div class="trending-wrapper">
<?php foreach($trendingMovies as $trendingMovie) : ?>
<div class="col-md-12 foot" data-position="<?= $trendingMovie->views?>">
<!-- Movie Start -->
<a href="<?= base_url('movies/movie/') . $trendingMovie->movie_id ?>" class="trending_item">
<div class="trending_item_poster">
<img src="<?= $trendingMovie->movie_poster_large ?>" alt="<?= $trendingMovie->movie_name ?>">
</div>
</a>
</div>
<!-- Movie End -->
<?php endforeach; ?>
<?php foreach($trendingSeries as $trendingSerie) : ?>
<div class="col-md-12 foot" data-position="<?= $trendingSerie->views?>">
<!-- Serie Start -->
<a href="<?= base_url('series/serie/') . $trendingSerie->serie_id ?>" class="trending_tem">
<div class="trending_item_poster">
<img src="<?= $trendingSerie->serie_poster_large ?>" alt="<?= $trendingSerie->serie_name ?>">
</div>
</a>
</div>
<!-- Serie End -->
<?php endforeach; ?>
</div>
</div>
<script>
$("#trending div.foot").sort(function(a, b) {
return $(a).data("position") - $(b).data("position");
}).appendTo("#trending");
</script>
Another sample for vanilla javascript
<ul id="list">
<li class="index" data-index="1">1 </li>
<li class="index" data-index="5">5</li>
<li class="index" data-index="2">2</li>
<li class="index" data-index="3">3</li>
<li class="index" data-index="4">4 </li>
</ul>
<script>
function comparator(a, b) {
if (a.dataset.index < b.dataset.index)
return -1;
if (a.dataset.index > b.dataset.index)
return 1;
return 0;
}
// Function to sort Data
var indexes = document.querySelectorAll("[data-index]");
var indexesArray = Array.from(indexes);
let sorted = indexesArray.sort(comparator);
sorted.forEach(e =>
document.querySelector("#list").appendChild(e));
</script>
Please have a look at the code of breadcrumbs.phtml:
<?php if($crumbs && is_array($crumbs)): ?>
<!-- SLIDER START HERE-->
<div class="container">
<div class="innerSlider relative">
<div class="innerSlidercontent">
<h2>“People with thyroid problems avoid eating millet on a daily basis
as it is believed to contain some”</h2>
</div>
<div class="insideSlidePic"> <img src="<?php echo $this-
> getSkinUrl('images/barnyard_millet_bisi_belle_bhaat_recipe.jpg'); ?>"
alt=""> </div>
</div>
<div class="clear"></div>
<ul class="routeMenu">
<?php foreach($crumbs as $_crumbName=>$_crumbInfo): ?>
<li class="<?php echo $_crumbName ?>">
<?php if($_crumbInfo['link']):
if($_crumbInfo['title']=="Home"){
$_crumbInfo['link']=Mage::getUrl();
}
?>
<a class="sc_hover" href="<?php echo $_crumbInfo['link'] ?>"
title="<?php echo $this->escapeHtml($_crumbInfo['title']) ?>"><?php echo
$this->escapeHtml($_crumbInfo['label']) ?></a>
<?php elseif($_crumbInfo['last']): ?>
<span><?php echo $this->escapeHtml($_crumbInfo['label']) ?>
</span>
<?php else: ?>
<?php echo $this->escapeHtml($_crumbInfo['label']) ?>
<?php endif; ?>
<?php if(!$_crumbInfo['last']): ?>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
</div>
<div class="clear"></div>
<!-- SLIDER END HERE-->
<?php endif; ?>
Help me to figure out why anchor links are not present in my bread crumb but the text is coming. Here I see the code some different than others bread crumbs is that code right.
Please check with default magento theme.I think breadcrumb will work. If breadcrumb is working your default theme then check your current custom theme by renaming your layout and theme files.
//Either replace below code and check or replace file with base file.
<?php if($crumbs && is_array($crumbs)): ?>
<!-- SLIDER START HERE-->
<div class="container">
<div class="innerSlider relative">
<div class="innerSlidercontent">
<h2>“People with thyroid problems avoid eating millet on a daily basis
as it is believed to contain some”</h2>
</div>
<div class="insideSlidePic"> <img src="<?php echo $this->getSkinUrl('images/barnyard_millet_bisi_belle_bhaat_recipe.jpg'); ?>"
alt=""> </div>
</div>
<div class="clear"></div>
<ul class="routeMenu">
<?php foreach($crumbs as $_crumbName=>$_crumbInfo): ?>
<li class="<?php echo $_crumbName ?>">
<?php if($_crumbInfo['link']):
if($_crumbInfo['title']=="Home"){
$_crumbInfo['link']=Mage::getUrl();
}
?>
<a class="sc_hover" href="<?php echo $_crumbInfo['link'] ?>"
title="<?php echo $this->escapeHtml($_crumbInfo['title']) ?>"><?php echo
$this->escapeHtml($_crumbInfo['label']) ?></a>
<?php elseif($_crumbInfo['last']): ?>
<span><?php echo $this->escapeHtml($_crumbInfo['label']) ?>
</span>
<?php else: ?>
<?php echo $this->escapeHtml($_crumbInfo['label']) ?>
<?php endif; ?>
<?php if(!$_crumbInfo['last']): ?>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
</div>
<div class="clear"></div>
</div>
<!-- SLIDER END HERE-->
<?php endif; ?>
Alternate solution copy base file to your custon design path are as follow.
app/design/frontend/base/default/template/page/html/breadcrumbs.phtml
copy from base to your custom design path.
app/design/frontend/your-package/your-theme/template/page/html/breadcrumbs.phtml
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'm using bxslider to show images from the database, it works but the thumbnails of the caroussels isn't clickable.
This is the code what I use;
<?php if ($object->fotos->has()): ?>
<ul class="bxslider">
<?php foreach ($object->fotos as $foto): ?>
<?php $photo = wp_get_attachment_image_src($foto->ID, 'large'); ?>
<li><img src="<?= $photo[0] ?>"></li>
<?php endforeach; ?>
</ul>
<div id="bx-pager">
<?php foreach ($object->fotos as $foto): ?>
<?php $photo = wp_get_attachment_image_src($foto->ID, 'thumbnail'); ?>
<a data-slide-index="0" href=""><img src="<?= $photo[0] ?>" /></a>
<?php endforeach; ?>
</div>
<?php endif; ?>
I tried:
<div id="bx-pager">
<?php foreach ($object->fotos as $foto): ?>
<?php $photo = wp_get_attachment_image_src($foto->ID, 'thumbnail'); ?>
<a data-slide-index="0" href=""><img src="<?= $photo[0] ?>" /></a>
<a data-slide-index="1" href=""><img src="<?= $photo[1] ?>" /></a>
<a data-slide-index="2" href=""><img src="<?= $photo[2] ?>" /></a>
<?php endforeach; ?>
</div>
This is clickable but it doesn't show the image. How can I make the thumbnail images clickable?
Check This
http://jsfiddle.net/L5S2B/2/
I think it should be work, If its not than feel to get back
Below is the HTML and grab Javascript from Fiddle
<!-- slider 1 -->
<ul class="bxslider">
</ul>
<!-- custom controls -->
<div class="bxslider-controls">
<a class="pull-left" href="#">PREV</a>
<a class="pull-right" href="#">NEXT</a>
</div>
I am using this slider gallery. i have problem while showing thumbs of images.
i used while loop only on UL and li tags, when i end while loop after thumbs. it will show all images in main image box.. can any one tell me how i can use this gallery in my php code
<div class="image-gallery">
<?php if($pic_count > 0){ ?>
<div id="wowslider-container1">
<div class="ws_images">
<?php while(!$rs_img_gallery->EOF) { ?>
<ul>
<li><img src="<?php echo MYSURL;?>img.gallery/<?php echo $rs_img_gallery->fields['image'] ?>" alt="" id="wows1_0"/></li>
</ul>
<?php $rs_img_gallery->MoveNext();
} // end while(!$rs_dc_gallery->EOF) ?>
</div>
<div class="ws_thumbs">
<div>
<img src="<?php echo MYSURL;?>img.gallery/<?php echo $rs_img_gallery->fields['image'] ?>" alt="" width="120" height="90"/>
</div>
</div>
</div>
<?php }else{
echo "<div class='notification information png_bg' style='width:90%;'>
<div>
".$infomsg['msg164']."
</div>
</div>";
}?>
</div>
You should take the <UL> out of the while loop
<div class="ws_images">
<ul>
<?php while(!$rs_img_gallery->EOF) { ?>
<li>
<img src="<?php echo MYSURL;?>img.gallery/<?php echo $rs_img_gallery->fields['image'] ?>" alt="" id="wows1_0"/>
</li>
<?php
$rs_img_gallery->MoveNext();
} // end while(!$rs_dc_gallery->EOF)
?>
</ul>
</div>