I have a code that is for a gallery. The images in this gallery opens in a fancybox. I don't want to link this images to a fancybox but i want link this images to one specific page. This is the code that must be customized:
<?php
global $sr_prefix;
$gallery = get_post_meta($post->ID, $sr_prefix.'_medias', true);
$postid = $post->ID;
$maintitle = 'h2'; $subtitle = 'h5';
if (get_option($sr_prefix.'_blogentrieslayout') == 'masonry' || get_option($sr_prefix.'_blogentrieslayout') == 'bloglist') { $maintitle = 'h4'; $subtitle = 'h6'; }
if( empty($gallery) || get_option($sr_prefix.'_blogentriesdisplay') == 'featuredimage' || get_option($sr_prefix.'_blogpostgallerydisplay') == "list" ) {
?>
<?php if(has_post_thumbnail()) { ?>
<div class="entry-thumb entry-media blog-media">
<div class="imgoverlay">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('single-blog-image'); ?>
<div class="overlay"><span class="overlaycolor"></span><span class="overlayinfo">
<?php echo '<'.$maintitle.'>'; ?><strong><?php the_title(); ?></strong><?php echo '</'.$maintitle.'>'; ?>
<?php if (!get_option($sr_prefix.'_blogpostsdisabledate')) { ?>
<?php echo '<'.$subtitle.'>'; ?><?php the_time(get_option('date_format')); ?><?php echo '</'.$subtitle.'>'; ?>
<?php } ?>
</span></div>
</a>
</div>
</div> <!-- END .entry-media -->
<?php } ?>
<?php
} else {
$medias = explode('|||', $gallery);
$output_medias = '';
foreach ($medias as $media) {
$object = explode('~~', $media);
$type = $object[0];
$val = $object[1];
$output_medias .= "<li>";
if ($type == 'image') {
$image = wp_get_attachment_image_src($val, 'single-blog-image'); $image = $image[0];
$fancyimage = wp_get_attachment_image_src($val, 'full'); $fancyimage = $fancyimage[0];
$thisimage = '<img src="'.$image.'" alt="'.get_the_title($image[1]).'"/>';
if(get_option($sr_prefix.'_blogpostsdisablefancybox') !== "on") {
$output_medias .= '<div class="imgoverlay">'.$thisimage.'<div class="overlay"><span class="overlaycolor"></span></div></div>';
} else {
$output_medias .= $thisimage;
}
} else {
$output_medias .= '<div class="embeddedvideo">'.$val.'</div>';
}
$output_medias .= "</li>";
}
?>
<?php if(get_option($sr_prefix.'_blogpostgallerydisplay') !== "list" ) { ?>
<div class="entry-media blog-media">
<div id="slider-<?php echo $postid; ?>" class="flexslider-container post-slider">
<div class="flexslider">
<ul class="slides">
<?php echo $output_medias; ?>
</ul>
</div>
</div>
</div> <!-- END .entry-media -->
<?php } else { ?>
<div class="entry-media blog-media">
<?php the_post_thumbnail('single-blog-image'); ?>
</div> <!-- END .entry-media -->
<?php } ?>
<?php } ?>
Seems like you are using Wordpress.
First of all you have to look at this part
if ($type == 'image') {
$image = wp_get_attachment_image_src($val, 'single-blog-image'); $image = $image[0];
$fancyimage = wp_get_attachment_image_src($val, 'full'); $fancyimage = $fancyimage[0];
$thisimage = '<img src="'.$image.'" alt="'.get_the_title($image[1]).'"/>';
if(get_option($sr_prefix.'_blogpostsdisablefancybox') !== "on") {
$output_medias .= '<div class="imgoverlay">'.$thisimage.'<div class="overlay"><span class="overlaycolor"></span></div></div>';
You have if(get_option($sr_prefix.'_blogpostsdisablefancybox') !== "on") option, which i suppose can disable fancybox, maybe it's somewhere in WP admin panel.
Anyway, if I remember correctly, fancybox links it's events to particular class, in this case it's openfancybox class. You can remove this class and disable fancybox.
$output_medias .=
'<div class="imgoverlay">
<a href="'.$fancyimage.'" class="openfancybox" rel="gallery'.get_the_ID().'" title="'.get_the_title($image[1]).'">'.$thisimage.'
<div class="overlay"><span class="overlaycolor">
</span>
</div>
</a>
</div>';
Then you can just change $fancyimage variable to you desired URL.
Related
I am new in php, so I like to get some help.
My clients want the next and previous button to be looped in the single page portfolio. Well this is the code I am using.
<?php
$prev_post = get_previous_post();
$next_post = get_next_post();
$prev_post_link = !empty($prev_post) ? get_permalink($prev_post->ID) : true;
$next_post_link = !empty($next_post) ? get_permalink($next_post->ID) : true;
if(!empty($prev_post) && empty($prev_post_thumb)) $prev_post_thumb = prev_next_post_format_icon($prev_post->ID);
if(!empty($next_post) && empty($next_post_thumb)) $next_post_thumb = prev_next_post_format_icon($next_post->ID);
?>
When I use True, for both the Previous & Next Links, Its appearing in the first and last portfolio, but the hyperlink is showing as http://1 and not the next portfolio. Thanks in Advance
This my html code:
<div class="dfd-controls mobile-hide">
<?php if(!empty($prev_post_link)) : ?>
<a href="<?php echo esc_url($prev_post_link); ?>" class="page-inner-nav nav-prev">
<div class="dfd-controler prev">
<div style="margin-top:7px; color:#fff;">Previous</div>
<!-- <div class="thumb prev">
<?php echo $prev_post_thumb; ?>
</div> -->
</div>
<!--<div class="pagination-title">Previous Project</div> -->
</a>
<?php endif; ?>
<?php if(!empty($next_post_link)) : ?>
<a href="<?php echo esc_url($next_post_link); ?>" class="page-inner-nav nav-next">
<div class="dfd-controler next">
<div style="margin-top:7px; color:#fff;">Next</div>
<!-- <div class="thumb next">
<?php echo $next_post_thumb; ?>
</div>-->
</div>
<!--<div class="pagination-title">Next Project</div>-->
</a>
<?php endif; ?>
change the value from true to false. Setting a variable to true will give empty a false value see here.
Now 'next' will only show if there is a next post
your PHP should be:
$prev_post = get_previous_post();
$next_post = get_next_post();
$prev_post_link = !empty($prev_post) ? get_permalink($prev_post->ID) : false;
$next_post_link = !empty($next_post) ? get_permalink($next_post->ID) : false;
if(!empty($prev_post) && empty($prev_post_thumb)) $prev_post_thumb = prev_next_post_format_icon($prev_post->ID);
if(!empty($next_post) && empty($next_post_thumb)) $next_post_thumb = prev_next_post_format_icon($next_post->ID);
UPDATE: To have the posts loop:
if( get_adjacent_post(false, '', true) ) {
previous_post_link('%link', '<div class="dfd-controler prev"><div style="margin-top:7px; color:#fff;">Previous</div></div>');
} else {
$first = new WP_Query('posts_per_page=1&order=DESC'); $first->the_post();
echo '<div class="dfd-controler prev"><div style="margin-top:7px; color:#fff;">Previous</div></div>';
wp_reset_query();
};
if( get_adjacent_post(false, '', false) ) {
next_post_link('%link', '<div class="dfd-controler next"><div style="margin-top:7px; color:#fff;">Next</div></div>');
} else {
$last = new WP_Query('posts_per_page=1&order=ASC'); $last->the_post();
echo '<a href="' . get_permalink() . '"><div class="dfd-controler next"><div style="margin-top:7px; color:#fff;">Next</div></div>';
wp_reset_query();
};
Loop Portfolio Next/Previous Button in Wordpress
<div class='next_post_link_align'>
<?php next_post_link('<span class="previous_post_link">← %link </span> <span class="post_link_text">'.__('(previous entry)','avia_framework'))."</span>";?>
</div>
<div class='previous_post_link_align'>
<?php previous_post_link('<span class="next_post_link"><span class="post_link_text">'.__('(next entry)','avia_framework').'</span> %link →</span>'); ?>
</div>
I have a Jomi installation and I see that social icons are inserted at the bottom of my article while I would display them after the head section. What should I look for to modify this since the template settings just allow me to turn on/off the social bar? Should I look inside layouts or styles folder?
On feeling I looked into layouts/com_content/article and there is a default.php that looks something like a template for my articles, but I cannot find anything about social bar, here is its content:
<?php
/**
* #package Warp Theme Framework
* #author YOOtheme http://www.yootheme.com
* #copyright Copyright (C) YOOtheme GmbH
* #license http://www.gnu.org/licenses/gpl.html GNU/GPL
*/
// no direct access
defined('_JEXEC') or die;
// get view
$menu = JSite::getMenu()->getActive();
$view = is_object($menu) && isset($menu->query['view']) ? $menu->query['view'] : null;
JHtml::addIncludePath(JPATH_COMPONENT . '/helpers');
// Create shortcuts to some parameters.
$params = $this->item->params;
$images = json_decode($this->item->images);
$urls = json_decode($this->item->urls);
$canEdit = $this->item->params->get('access-edit');
$user = JFactory::getUser();
?>
<div id="system">
<?php if ($this->params->get('show_page_heading', 1)) : ?>
<h1 class="title"><?php echo $this->escape($this->params->get('page_heading')); ?></h1>
<?php endif; ?>
<article class="item"<?php if ($view != 'article') printf(' data-permalink="%s"', JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catslug), true, -1)); ?>>
<?php if ($params->get('show_title')) : ?>
<header>
<?php if (!$this->print) : ?>
<?php if ($params->get('show_email_icon')) : ?>
<div class="icon email"><?php echo JHtml::_('icon.email', $this->item, $params); ?></div>
<?php endif; ?>
<?php if ($params->get('show_print_icon')) : ?>
<div class="icon print"><?php echo JHtml::_('icon.print_popup', $this->item, $params); ?></div>
<?php endif; ?>
<?php else : ?>
<div class="icon printscreen"><?php echo JHtml::_('icon.print_screen', $this->item, $params); ?></div>
<?php endif; ?>
<?php if ($params->get('show_create_date')) : ?>
<header class="clearfix">
<time datetime="<?php echo substr($this->item->created, 0,10); ?>" pubdate>
<span class="day"><?php echo JHTML::_('date',$this->item->created, JText::_('d')); ?></span>
<span class="month"><?php echo JHTML::_('date',$this->item->created, JText::_('M')); ?></span>
<span class="year"><?php echo JHTML::_('date',$this->item->created, JText::_('Y')); ?></span>
</time>
<?php endif; ?>
<h1 class="title"><?php echo $this->escape($this->item->title); ?></h1>
<?php if (($params->get('show_author') && !empty($this->item->author)) || $params->get('show_category')) : ?>
<p class="meta">
<?php
if ($params->get('show_author') && !empty($this->item->author )) {
$author = $this->item->created_by_alias ? $this->item->created_by_alias : $this->item->author;
if (!empty($this->item->contactid) && $params->get('link_author') == true) {
$needle = 'index.php?option=com_contact&view=contact&id=' . $this->item->contactid;
$menu = JFactory::getApplication()->getMenu();
$item = $menu->getItems('link', $needle, true);
$cntlink = !empty($item) ? $needle . '&Itemid=' . $item->id : $needle;
echo JText::sprintf('<i class="icon-user"></i>');
echo JText::sprintf('COM_CONTENT_WRITTEN_BY', JHtml::_('link', JRoute::_($cntlink), $author));
} else {
echo JText::sprintf('<i class="icon-user"></i>');
echo JText::sprintf('COM_CONTENT_WRITTEN_BY', $author);
}
}
if ($params->get('show_author') && !empty($this->item->author )) {
echo '. ';
}
if ($params->get('show_category')) {
echo JText::_('<i class="icon-folder-open-alt"></i>').' ';
echo JText::_('TPL_WARP_POSTED_IN').' ';
$title = $this->escape($this->item->category_title);
$url = ''.$title.'';
if ($params->get('link_category') AND $this->item->catslug) {
echo $url;
} else {
echo $title;
}
}
?>
</p>
<?php endif; ?>
</header>
<?php endif; ?>
<?php
if (!$params->get('show_intro')) {
echo $this->item->event->afterDisplayTitle;
}
echo $this->item->event->beforeDisplayContent;
if (isset ($this->item->toc)) {
echo $this->item->toc;
}
?>
<div class="content clearfix">
<?php
if ($params->get('access-view')) {
if (isset($urls) AND ((!empty($urls->urls_position) AND ($urls->urls_position=='0')) OR ($params->get('urls_position')=='0' AND empty($urls->urls_position) ))
OR (empty($urls->urls_position) AND (!$params->get('urls_position')))) {
echo $this->loadTemplate('links');
}
if (isset($images->image_fulltext) and !empty($images->image_fulltext)) {
$imgfloat = (empty($images->float_fulltext)) ? $params->get('float_fulltext') : $images->float_fulltext;
$class = (htmlspecialchars($imgfloat) != 'none') ? ' class="size-auto align-'.htmlspecialchars($imgfloat).'"' : ' class="size-auto"';
$title = ($images->image_fulltext_caption) ? ' title="'.htmlspecialchars($images->image_fulltext_caption).'"' : '';
echo '<img'.$class.$title.' src="'.htmlspecialchars($images->image_fulltext).'" alt="'.htmlspecialchars($images->image_fulltext_alt).'" />';
}
echo $this->item->text;
if (isset($urls) AND ((!empty($urls->urls_position) AND ($urls->urls_position=='1')) OR ( $params->get('urls_position')=='1') )) {
echo $this->loadTemplate('links');
}
// optional teaser intro text for guests
} elseif ($params->get('show_noauth') == true AND $user->get('guest')) {
echo $this->item->introtext;
// optional link to let them register to see the whole article.
if ($params->get('show_readmore') && $this->item->fulltext != null) {
$link1 = JRoute::_('index.php?option=com_users&view=login');
$link = new JURI($link1);
echo '<p class="links">';
echo '<a href="'.$link.'">';
$attribs = json_decode($this->item->attribs);
if ($attribs->alternative_readmore == null) {
echo JText::_('COM_CONTENT_REGISTER_TO_READ_MORE');
} elseif ($readmore = $this->item->alternative_readmore) {
echo $readmore;
if ($params->get('show_readmore_title', 0) != 0) {
echo JHtml::_('string.truncate', ($this->item->title), $params->get('readmore_limit'));
}
} elseif ($params->get('show_readmore_title', 0) == 0) {
echo JText::sprintf('COM_CONTENT_READ_MORE_TITLE');
} else {
echo JText::_('COM_CONTENT_READ_MORE');
echo JHtml::_('string.truncate', ($this->item->title), $params->get('readmore_limit'));
}
echo '</a></p>';
}
}
?>
</div>
<?php if ($canEdit) : ?>
<p class="edit"><?php echo JHtml::_('icon.edit', $this->item, $params); ?> <?php echo JText::_('TPL_WARP_EDIT_ARTICLE'); ?></p>
<?php endif; ?>
<?php echo $this->item->event->afterDisplayContent; ?>
</article>
</div>
The only point that could reasonable be the social bar is this line:
<?php echo $this->item->event->afterDisplayContent; ?>
However it looks like a ore wider concept, since afterDisplayContent probably handles many things, and here is where I stop, I have no idea where to look for afterDisplayContent event definition, I guess that I should find an entry for social bar and copy/paste in the position that I want in my module.
I've seen lots of questions and answers around how to do this but I am very stuck how I implement this into my webpage. I have a div named "banner" that contains an image drawn from a custom field that is on all my artist pages as a banner for each page. I would like to be able to drag this image inside the div and to save it's position. (I only want this function for myself, not visitors to the website) AKA Facebook page cover image.. This would allow me to add an image that is bigger than the div container to my custom field and for me to edit how this is showing inside the div.
This demonstates what I want to do- http://w3lessons.info/2014/08/31/facebook-style-cover-image-reposition-using-jquery-php/
but i don't understand where i put these codes in my wordpress files and how to make this work for me.. I only want this on my artist pages, and therefore using my single-artists.php template..
Here is my php code-
<?php
// artist download start
// if ( isset($_GET['download']) ) {
// header('Content-type: application/mp3');
// header('Content-Disposition: attachment; filename='.basename($_GET['download']));
// readfile( $_GET['download'] );
// }
// artist download end
get_header();
global $cs_transwitch,$prettyphoto_flag;
$prettyphoto_flag = "true";
$cs_artist = get_post_meta($post->ID, "cs_artist", true);
if ( $cs_artist <> "" ) {
$xmlObject = new SimpleXMLElement($cs_artist);
$cs_layout = $xmlObject->cs_layout;
$cs_sidebar_left = $xmlObject->cs_sidebar_left;
$cs_sidebar_right = $xmlObject->cs_sidebar_right;
}
if ( $cs_layout == "left" ) {
$cs_layout = "two-thirds column right";
$show_sidebar = $cs_sidebar_left;
}
else if ( $cs_layout == "right" ) {
$cs_layout = "two-thirds column left";
$show_sidebar = $cs_sidebar_right;
}
else $cs_layout = "sixteen columns left";
?>
<div id="banner">
<div id="bannercontent"><?php
list($src, $w, $h) = get_custom_field('banner:to_image_array');
?>
<img src="<?php print $src; ?>" width="100%" />
</div></div>
<script>$( "#bannercontent" ).draggable({
stop: function(){
alert('top offset: ' + $('#bannercontent').offset().top + ' left offset: ' + $('#bannercontent').offset().left);
}
});</script>
<div class="clear:both;"></div>
<div id="container" class="container row">
<div role="main" class="<?php echo $cs_layout;?>" >
<?php
/* Run the loop to output the post.
* If you want to overload this in a child theme then include a file
* called loop-single.php and that will be used instead.
*/
//get_template_part( 'loop', 'single_cs_artist' );
?>
<?php if ( have_posts() ): while ( have_posts() ) : the_post(); ?>
<?php
//showing meta start
$cs_artist = get_post_meta($post->ID, "cs_artist", true);
if ( $cs_artist <> "" ) {
$xmlObject = new SimpleXMLElement($cs_artist);
$cs_layout = $xmlObject->cs_layout;
$cs_sidebar_left = $xmlObject->cs_sidebar_left;
$cs_sidebar_right = $xmlObject->cs_sidebar_right;
$artist_release_date = $xmlObject->artist_release_date;
$artist_social_share = $xmlObject->artist_social_share;
$artist_buy_amazon = $xmlObject->artist_buy_amazon;
$artist_buy_apple = $xmlObject->artist_buy_apple;
$artist_buy_groov = $xmlObject->artist_buy_groov;
$artist_buy_cloud = $xmlObject->artist_buy_cloud;
}
//showing meta end
?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1 class="heading"><?php the_title(); ?></h1>
<div class="in-sec">
<?php
// getting featured image start
$image_id = get_post_thumbnail_id ( $post->ID );
if ( $image_id <> "" ) {
//$image_url = wp_get_attachment_image_src($image_id, array(208,208),true);
$image_url = cs_attachment_image_src($image_id, 208, 208);
$image_url = $image_url;
//$image_url_full = wp_get_attachment_image_src($image_id, 'full',true);
$image_url_full = cs_attachment_image_src($image_id, 0, 0);
$image_url_full = $image_url_full;
}
else {
$image_url = get_template_directory_uri()."/images/admin/no_image.jpg";
$image_url_full = get_template_directory_uri()."/images/admin/no_image.jpg";
}
//$image_id = get_post_thumbnail_id ( $post->ID );
//$image_url = wp_get_attachment_image_src($image_id, array(208,198),true);
//$image_url_full = wp_get_attachment_image_src($image_id, 'full',true);
// getting featured image end
?>
<div class="light-box artist-tracks artist-detail <?php if($image_id == "") echo "no-img-found";?> ">
<div id="main-container">
<div id="leftcolumn">
<a rel="prettyPhoto" name="<?php the_title(); ?>" href="<?php echo $image_url_full?>" class="thumb" >
<?php echo "<img src='".$image_url."' />";?>
</a>
<br>
<br>
<div id="inpostgallery"><?php echo do_shortcode('[inpost_gallery thumb_width="104" thumb_height="104" post_id="' . get_the_ID() . '" thumb_margin_left="0" thumb_margin_bottom="0" thumb_border_radius="2" thumb_shadow="0 1px 4px rgba(0, 0, 0, 0.2)" js_play_delay="3000" id="" random="0" group="0" border="" type="yoxview" show_in_popup="0" artist_cover="" artist_cover_width="200" artist_cover_height="200" popup_width="800" popup_max_height="600" popup_title="Gallery"][/inpost_gallery]'); ?></div>
</div>
<div id="rightcolumn">
<div class="desc">
<p style="font-size:12px;"><span class="bold" style="text-transform:uppercase; color:#262626;"><?php _e('Categories', CSDOMAIN); ?> :</span>
<?php
/* translators: used between list items, there is a space after the comma */
$before_cat = " ".__( '',CSDOMAIN );
$categories_list = get_the_term_list ( get_the_id(), 'artist-category', $before_cat, ', ', '' );
if ( $categories_list ): printf( __( '%1$s', CSDOMAIN ),$categories_list ); endif; '</p>';
?>
</p>
<br>
<h5><?php print_custom_field('stars:formatted_list', array('<li><img src="http://www.entertaininc.co.uk/wp-content/uploads/2015/09/gold-star-graphic-e1441218522835.png">[+value+]</li>','<ul>[+content+]</ul>') );
?></h5><br />
<h2><strong>Price</strong> <?php print_custom_field('price'); ?></h2> <br />
<h2><strong>Location</strong> <?php echo do_shortcode('[gmw_post_info info="city, country" divider=","]'); ?></h2><br />
<h4><?php _e('Description', CSDOMAIN); ?></h4>
<div class='txt rich_editor_text'>
<?php
the_content();
?>
</div>
<div class="clear"></div>
<?php edit_post_link( __( 'Edit', CSDOMAIN ), '<span class="edit-link">', '</span>' ); ?>
</div></div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="in-sec">
<div class="artist-opts">
<div class="share-artist">
<?php
$cs_social_share = get_option("cs_social_share");
if($cs_social_share != ''){
$xmlObject_artist = new SimpleXMLElement($cs_social_share);
if($artist_social_share == 'Yes'){
social_share();
}?>
<?php }?>
</div>
<?php if($artist_buy_amazon != '' or $artist_buy_apple != '' or $artist_buy_groov != '' or $artist_buy_cloud != ''){?>
<div class="availble">
<h4><?php if($cs_transwitch =='on'){ _e('Buy This',CSDOMAIN); }else{ echo __CS('buy_now', 'Buy This'); }?></h4>
<?php
if ( $artist_buy_amazon <> "" ) echo ' <a target="_blank" href="'.$artist_buy_amazon.'" class="amazon-ind"> <span>';if($cs_transwitch =='on'){ _e('Amazon',CSDOMAIN); }else{ echo __CS('amazon', 'Amazon'); } echo '</span></a> ';
if ( $artist_buy_apple <> "") echo ' <a target="_blank" href="'.$artist_buy_apple.'" class="apple-ind"> <span>'; if($cs_transwitch =='on'){ _e('Apple',CSDOMAIN); }else{ echo __CS('itunes', 'iTunes'); } echo '</span></a> ';
if ( $artist_buy_groov <> "") echo ' <a target="_blank" href="'.$artist_buy_groov.'" class="grooveshark-ind"> <span>'; if($cs_transwitch =='on'){ _e('GrooveShark',CSDOMAIN); }else{ echo __CS('grooveshark', 'GrooveShark'); } echo '</span></a> ';
if ( $artist_buy_cloud <> "") echo ' <a target="_blank" href="'.$artist_buy_cloud.'" class="soundcloud-ind"> <span>'; if($cs_transwitch =='on'){ _e('SoundCloud',CSDOMAIN); }else{ echo __CS('soundcloud', 'SoundCloud '); } echo '</span></a> ';
?>
</div>
<?php }?>
<div class="clear"></div>
</div>
</div>
<?php
foreach ( $xmlObject as $track ){
if ( $track->getName() == "track" ) {
?>
<div class="in-sec">
<?php
enqueue_alubmtrack_format_resources();
?>
<div class="artist-tracks light-box">
<?php
$counter = 0;
foreach ( $xmlObject as $track ){
$counter++;
if ( $track->getName() == "track" ) {
echo "<div class='track'>";
echo "<h5>";
echo $artist_track_title = $track->artist_track_title;
echo "</h5>";
echo "<ul>";
if ($track->artist_track_playable == "Yes") {
echo '
<li>
<div class="cp-container cp_container_'.$counter.'">
<ul class="cp-controls">
<li><a style="display: block;" href="#" class="cp-play" tabindex="1"> <span>'; if($cs_transwitch =='on'){ _e('Play',CSDOMAIN); }else{ echo __CS('play', 'Play'); } echo '</span></a></li>
<li> <span>'; if($cs_transwitch =='on'){ _e('Pause',CSDOMAIN); }else{ echo __CS('pause', 'Pause'); } echo '</span></li>
</ul>
</div>
<div style="width: 0px; height: 0px;" class="cp-jplayer jquery_jplayer_'.$counter.'">
<img style="width: 0px; height: 0px; display: none;" id="jp_poster_0">
<audio src="'.$track->artist_track_mp3_url.'" preload="metadata" ></audio>
</div>
<script>
jQuery(document).ready(function($){
var myCirclePlayer = new CirclePlayer(".jquery_jplayer_'.$counter.'",
{
mp3: "'.$track->artist_track_mp3_url.'"
}, {
cssSelectorAncestor: ".cp_container_'.$counter.'",
swfPath: "'.get_template_directory_uri().'/scripts/frontend/Jplayer.swf",
wmode: "window",
supplied: "mp3"
});
});
</script>
</li>
';
}
if ($track->artist_track_downloadable == "Yes"){ echo '<li> <span>'; if($cs_transwitch =='on'){ _e('Download',CSDOMAIN); }else{ echo __CS('download', 'Download'); } echo '</span></li>'; }
if ($track->artist_track_lyrics <> "") { echo '<li> <span>'; if($cs_transwitch =='on'){ _e('Lyrics',CSDOMAIN); }else{ echo __CS('lyrics', 'Lyrics'); } echo '</span></li>';}
if ($track->artist_track_buy_mp3 <> ""){ echo '<li> <span>'; if($cs_transwitch =='on'){ _e('Buy Song',CSDOMAIN); }else{ echo __CS('buy_now', 'Buy Song'); } echo '</span></li>';}
echo "</ul>";
echo '
<div id="lyrics'.$counter.'" style="display:none;">
'.str_replace("\n","</br>",$track->artist_track_lyrics).'
</div>
';
echo "</div>";
}
}
?>
<div class="clear"></div>
</div>
</div>
<?php
}
}
?>
<div class="clear"></div>
<?php if ( get_the_author_meta( 'description' ) ) :?>
<div class="in-sec" style="margin-top:20px;">
<div class="about-author">
<div class="avatars">
<?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'PixFill_author_bio_avatar_size', 53 ) ); ?>
</div>
<div class="desc">
<h5><?php _e('About', CSDOMAIN); ?> <?php echo get_the_author(); ?></h5>
<p class="txt">
<?php the_author_meta( 'description' ); ?>
</p>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
<?php endif; ?>
</div>
<?php endwhile; endif; // end of the loop. ?>
<?php comments_template( '', true ); ?>
</div>
<?php if( $cs_layout != "sixteen columns left" and isset($show_sidebar) ) { ?>
<!--Sidebar Start-->
<div class="one-third column left">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar($show_sidebar) ) : ?>
<?php endif; ?>
</div>
<!--Sidebar Ends-->
<?php }?>
<div class="clear"></div><!-- #content -->
</div><!-- #container -->
<div class="clear"></div>
<?php get_footer(); ?>
You need to use jQuery UI library (draggable) - https://jqueryui.com/draggable/
And then read the offset of the div or so
You also can use a jquery plugin named draggabilly. See the event dragMove or dragEnd. Hope it helps.
We are using Elision WP theme. We have a revolution slider on home pulled via shortcode in theme backend settings. We need to have static text on top of slides.
Revolution slider is set to 1100px x 680px and we want the "hero-text" div to be located on the lower left corner with a 20px from left and 50px from bottom. It also needs to be responsive.
Attached: layout image link, homepage.php code.
http://www.image-share.com/ijpg-2756-164.html
<?php
/*
Template Name: Homepage
*/
?>
<?php
global $wp_query;
$id = $wp_query->get_queried_object_id();
$sidebar = get_post_meta($id, "qode_show-sidebar", true);
if ( get_query_var('paged') ) { $paged = get_query_var('paged'); }
elseif ( get_query_var('page') ) { $paged = get_query_var('page'); }
else { $paged = 1; }
if(get_post_meta($id, "qode_responsive-title-image", true) != ""){
$responsive_title_image = get_post_meta($id, "qode_responsive-title-image", true);
}else{
$responsive_title_image = $qode_options_elision['responsive_title_image'];
}
if(get_post_meta($id, "qode_fixed-title-image", true) != ""){
$fixed_title_image = get_post_meta($id, "qode_fixed-title-image", true);
}else{
$fixed_title_image = $qode_options_elision['fixed_title_image'];
}
if(get_post_meta($id, "qode_title-image", true) != ""){
$title_image = get_post_meta($id, "qode_title-image", true);
}else{
$title_image = $qode_options_elision['title_image'];
}
$title_image_height = "";
$title_image_width = "";
if(!empty($title_image)){
$title_image_url_obj = parse_url($title_image);
if (file_exists($_SERVER['DOCUMENT_ROOT'].$title_image_url_obj['path']))
list($title_image_width, $title_image_height, $title_image_type, $title_image_attr) = getimagesize($_SERVER['DOCUMENT_ROOT'].$title_image_url_obj['path']);
}
if(get_post_meta($id, "qode_title-height", true) != ""){
$title_height = get_post_meta($id, "qode_title-height", true);
}else{
$title_height = $qode_options_elision['title_height'];
}
$title_background_color = '';
if(get_post_meta($id, "qode_page-title-background-color", true) != ""){
$title_background_color = get_post_meta($id, "qode_page-title-background-color", true);
}else{
$title_background_color = $qode_options_elision['title_background_color'];
}
$show_title_image = true;
if(get_post_meta($id, "qode_show-page-title-image", true)) {
$show_title_image = false;
}
$qode_page_title_style = "standard";
if(get_post_meta($id, "qode_page_title_style", true) != ""){
$qode_page_title_style = get_post_meta($id, "qode_page_title_style", true);
}else{
if(isset($qode_options_elision['title_style'])) {
$qode_page_title_style = $qode_options_elision['title_style'];
} else {
$qode_page_title_style = "standard";
}
}
$height_class = "";
if($qode_page_title_style == "title_on_bottom") {
$height_class = " title_on_bottom";
}
$enable_page_comments = false;
if(get_post_meta($id, "qode_enable-page-comments", true)) {
$enable_page_comments = true;
}
?>
<?php get_header(); ?>
<?php if(get_post_meta($id, "qode_page_scroll_amount_for_sticky", true)) { ?>
<script>
var page_scroll_amount_for_sticky = <?php echo get_post_meta($id, "qode_page_scroll_amount_for_sticky", true); ?>;
</script>
<?php } ?>
<?php if(!get_post_meta($id, "qode_show-page-title", true)) { ?>
<div class="title<?php echo $height_class; ?> <?php if($responsive_title_image == 'no' && $title_image != "" && ($fixed_title_image == "yes" || $fixed_title_image == "yes_zoom") && $show_title_image == true){ echo 'has_fixed_background '; if($fixed_title_image == "yes_zoom"){ echo 'zoom_out '; } } if($responsive_title_image == 'no' && $title_image != "" && $fixed_title_image == "no" && $show_title_image == true){ echo 'has_background'; } if($responsive_title_image == 'yes' && $show_title_image == true){ echo 'with_image'; } ?>" style="<?php if($responsive_title_image == 'no' && $title_image != "" && $show_title_image == true){ if($title_image_width != ''){ echo 'background-size:'.$title_image_width.'px auto;'; } echo 'background-image:url('.$title_image.');'; } if($title_height != ''){ echo 'height:'.$title_height.'px;'; } if($title_background_color != ''){ echo 'background-color:'.$title_background_color.';'; } ?>">
<div class="image <?php if($responsive_title_image == 'yes' && $title_image != "" && $show_title_image == true){ echo "responive"; }else{ echo "not_responsive"; } ?>"><?php if($title_image != ""){ ?><img src="<?php echo $title_image; ?>" alt=" " /> <?php } ?></div>
<?php if(!get_post_meta($id, "qode_show-page-title-text", true)) { ?>
<div class="title_holder">
<div class="container">
<div class="container_inner clearfix">
<?php if($qode_page_title_style == "title_on_bottom") { ?>
<div class="title_on_bottom_wrap">
<div class="title_on_bottom_holder">
<div class="title_on_bottom_holder_inner" <?php if(get_post_meta($id, "qode_page_title_holder_color", true)) { ?> style="background-color:<?php echo get_post_meta($id, "qode_page_title_holder_color", true) ?>" <?php } ?>>
<h1<?php if(get_post_meta($id, "qode_page-title-color", true)) { ?> style="color:<?php echo get_post_meta($id, "qode_page-title-color", true) ?>" <?php } ?>><span><?php the_title(); ?></span></h1>
</div>
</div>
</div>
<?php } else { ?>
<h1<?php if(get_post_meta($id, "qode_page-title-color", true)) { ?> style="color:<?php echo get_post_meta($id, "qode_page-title-color", true) ?>" <?php } ?>><span><?php the_title(); ?></span></h1>
<?php } ?>
</div>
</div>
</div>
<?php } ?>
</div>
<?php } ?>
<?php
$revslider = get_post_meta($id, "qode_revolution-slider", true);
if (!empty($revslider)){ ?>
<div class="q_slider"><div class="q_slider_inner">
<?php echo do_shortcode($revslider); ?>
</div></div>
<?php
}
?>
<div class="full_width">
<div class="full_width_inner">
<?php if(($sidebar == "default")||($sidebar == "")) : ?>
<?php if (have_posts()) :
while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php
$args_pages = array(
'before' => '<p class="single_links_pages">',
'after' => '</p>',
'pagelink' => '<span>%</span>'
);
wp_link_pages($args_pages); ?>
<?php
if($enable_page_comments){
?>
<div class="container">
<div class="container_inner">
<?php
comments_template('', true);
?>
</div>
</div>
<?php
}
?>
<?php endwhile; ?>
<?php endif; ?>
<?php elseif($sidebar == "1" || $sidebar == "2"): ?>
<?php if($sidebar == "1") : ?>
<div class="two_columns_66_33 clearfix grid2">
<div class="column1">
<?php elseif($sidebar == "2") : ?>
<div class="two_columns_75_25 clearfix grid2">
<div class="column1">
<?php endif; ?>
<?php if (have_posts()) :
while (have_posts()) : the_post(); ?>
<div class="column_inner">
<?php the_content(); ?>
<?php
$args_pages = array(
'before' => '<p class="single_links_pages">',
'after' => '</p>',
'pagelink' => '<span>%</span>'
);
wp_link_pages($args_pages); ?>
<?php
if($enable_page_comments){
?>
<div class="container">
<div class="container_inner">
<?php
comments_template('', true);
?>
</div>
</div>
<?php
}
?>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
<div class="column2"><?php get_sidebar();?></div>
</div>
<?php elseif($sidebar == "3" || $sidebar == "4"): ?>
<?php if($sidebar == "3") : ?>
<div class="two_columns_33_66 clearfix grid2">
<div class="column1"><?php get_sidebar();?></div>
<div class="column2">
<?php elseif($sidebar == "4") : ?>
<div class="two_columns_25_75 clearfix grid2">
<div class="column1"><?php get_sidebar();?></div>
<div class="column2">
<?php endif; ?>
<?php if (have_posts()) :
while (have_posts()) : the_post(); ?>
<div class="column_inner">
<?php the_content(); ?>
<?php
$args_pages = array(
'before' => '<p class="single_links_pages">',
'after' => '</p>',
'pagelink' => '<span>%</span>'
);
wp_link_pages($args_pages); ?>
<?php
if($enable_page_comments){
?>
<div class="container">
<div class="container_inner">
<?php
comments_template('', true);
?>
</div>
</div>
<?php
}
?>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
</div>
</div>
<?php get_footer(); ?>
I'm not sure how you're planning to get your static headline onto the page. You could hard code it in there as I am about to show you below or you could create a custom field. If you decide to take that route, I find that Advanced Custom Fields is really easy to use.
<?php
$revslider = get_post_meta($id, "qode_revolution-slider", true);
if (!empty($revslider)){ ?>
<div class="q_slider"><div class="q_slider_inner">
<h1 class="static-headline">Your awesome text goes here</h1>
<?php echo do_shortcode($revslider); ?>
</div></div>
<?php
Add the following CSS to your site to position it in the correct place:
.q_slider_inner { position: relative; }
.static-headline {
position: absolute;
bottom: 5%;
left: 2%;
color: #fff;
z-index: 21;
}
You'll need to play around with the percentages to get the headline exactly where you need it but I recommend using % over px values since you want this to be responsive.
I hope this helps.
Currently my image gallery has 4 images per row. If the screen is minimized below the width of those 4 images, one image will drop to the next line and there will be a line break before the next row. Is there any way to make gallery continuous instead of having the break in images when the screen is resized? Ideally, I would like to start with 5 images per row, then if the viewer has a smaller screen, it will automatically adjust the number of images per row to fit whatever size window they are using.
Here is a link to the gallery: http://rabbittattoo.com/?gallery=gallery
And the PHP:
$pp_gallery_style = get_option('pp_gallery_style');
if($pp_gallery_style == 'f')
{
include_once(TEMPLATEPATH.'/gallery-f.php');
exit;
}
if(!isset($hide_header) OR !$hide_header)
{
get_header();
}
$caption_class = "page_caption";
$portfolio_sets_query = '';
$custom_title = '';
if(!empty($term))
{
$portfolio_sets_query.= $term;
$obj_term = get_term_by('slug', $term, 'photos_galleries');
$custom_title = $obj_term->name;
}
else
{
$custom_title = get_the_title();
}
/**
* Get Current page object
**/
$page = get_page($post->ID);
/**
* Get current page id
**/
if(!isset($current_page_id) && isset($page->ID))
{
$current_page_id = $page->ID;
}
if(!isset($hide_header) OR !$hide_header)
{
?>
<div class="wrapper_shadow"></div>
<div class="page_caption">
<div class="caption_inner">
<div class="caption_header">
<h1 class="cufon"><?php echo the_title(); ?></h1>
</div>
</div>
</div>
</div>
<!-- Begin content -->
<div id="content_wrapper">
<div class="inner">
<!-- Begin main content -->
<div id="gallery_wrapper" class="inner_wrapper portfolio">
<div class="standard_wrapper small">
<br class="clear"/><br/>
<?php
}
else
{
echo '<br class="clear"/>';
}
?>
<?php echo do_shortcode(html_entity_decode($page->post_content)); ?>
<!-- Begin portfolio content -->
<?php
$menu_sets_query = '';
$portfolio_items = 0;
$portfolio_sort = get_option('pp_gallery_sort');
if(empty($portfolio_sort))
{
$portfolio_sort = 'DESC';
}
$args = array(
'post_type' => 'attachment',
'numberposts' => $portfolio_items,
'post_status' => null,
'post_parent' => $post->ID,
'order' => $portfolio_sort,
'orderby' => 'date',
);
$all_photo_arr = get_posts( $args );
if(isset($all_photo_arr) && !empty($all_photo_arr))
{
?>
<?php
foreach($all_photo_arr as $key => $portfolio_item)
{
$image_url = '';
if(!empty($portfolio_item->guid))
{
$image_id = $portfolio_item->ID;
$image_url[0] = $portfolio_item->guid;
}
$last_class = '';
$line_break = '';
if(($key+1) % 4 == 0)
{
$last_class = ' last';
if(isset($page_photo_arr[$key+1]))
{
$line_break = '<br class="clear"/><br/>';
}
else
{
$line_break = '<br class="clear"/>';
}
}
?>
<div class="one_fourth<?php echo $last_class?>" style="margin-right:24px;margin-bottom:24px;margin-top:-20px">
<a title="<?php echo $portfolio_item->post_title?>" href="<?php echo $image_url[0]?>" class="one_fourth_img" rel="gallery" href="<?php echo $image_url[0]?>">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/timthumb.php?src=<?php echo $image_url[0]?>&h=370&w=350&zc=1" alt=""/>
</a>
</div>
<?php
echo $line_break;
}
//End foreach loop
?>
<?php
}
//End if have portfolio items
?>
</div>
<!-- End main content -->
<br class="clear"/><br/>
</div>
<?php
if(!isset($hide_header) OR !$hide_header)
{
?>
</div>
<!-- End content -->
<?php get_footer(); ?>
<?php
}
?>
Thank you in advance for you help!