I use Wordpress as a CMS for my website. I'm Using the Sugarland Theme by Thomas Rodus (Which uses WP-Bakery as a page builder), unfortunately my support has run out and I JUST realized that right click-save as/downloading images from my website is disabled/inaccessible. This isn't great as it means any potential clients, agencies, etc, can't quickly save my images and store them for later viewing.
My knowledge is limited but I've managed to do some customizing myself throughout the years of using WP and hosting my website and whatnot. I can usually figure out what's wrong and fix it, but I can't find which element is causing the issue, if it's the PHP files (content-portfolio-ajax , content-portfolio-nav) for the AJAX overlay, or the Jquery files (jquery.fancybox.pack) as I can't see anything obvious suggesting something is disabled.
------ Content-portfolio-ajax:---------
<?php
$prev_post = get_adjacent_post(false, '', true);
$next_post = get_adjacent_post(false, '', false);
?>
<div id="project-title" class="centered">
<div class="parent">
<div class="child">
<?php
the_title('<h3>', '</h3>');
the_excerpt();
?>
<?php esc_html_e('Details', 'sugarland'); ?>
</div>
</div>
</div>
<div id="project-slider">
<figure class="images">
<?php the_post_thumbnail('full'); ?>
</figure>
<?php if(!empty($next_post)) : ?>
<a class="ajax-prev" href="<?php echo esc_url(get_permalink($next_post->ID)); ?>"></a>
<?php endif; ?>
<?php if(!empty($prev_post)) : ?>
<a class="ajax-next" href="<?php echo esc_url(get_permalink($prev_post->ID)); ?>"></a>
<?php endif; ?>
</div>
-------- or content-portfolio-nav: ---------
<?php
global $post;
$url[] = '';
$url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full');
$prev_post = get_adjacent_post(false, '', true);
$next_post = get_adjacent_post(false, '', false);
$displays = get_option('ebor_cpt_display_options');
$slug = ( $displays['portfolio_slug'] ) ? $displays['portfolio_slug'] : $slug = 'portfolio';
?>
<div class="padding-0 clearfix" data-ref="mixitup-container">
<?php if(!empty($prev_post)) : ?>
<div class="mix item clearfix col-sm-4 col-xs-12 home portfolio lifestyle" data-ref="mixitup-target">
<a href="<?php echo esc_url(get_permalink($prev_post->ID)); ?>">
<figure class="images">
<?php $src = wp_get_attachment_image_src(get_post_thumbnail_id( $prev_post->ID ), 'full'); ?>
<img src="<?php echo esc_url($src[0]); ?>" alt="<span><?php echo ebor_the_terms('portfolio_category', ', ', 'name'); ?></span><?php echo get_the_title($prev_post->ID); ?>" class="slip" />
</figure>
</a>
</div>
<?php endif; ?>
<div class="mix item clearfix col-sm-4 col-xs-12 home portfolio blank" data-ref="mixitup-target">
<a href="<?php echo esc_url( home_url('/') . $slug ); ?>">
<figure class="images">
<img src="<?php echo EBOR_THEME_DIRECTORY; ?>assets/images/blank.jpg" alt="Blank Image" />
</figure>
<div class="info-box-content">
<div class="parent">
<div class="child">
<h5><i class="fa fa-th"></i> <?php esc_html_e('Overview', 'sugarland'); ?></h5>
</div>
</div>
</div>
</a>
</div>
<?php if(!empty($next_post)) : ?>
<div class="mix item clearfix col-sm-4 col-xs-12 home portfolio travel" data-ref="mixitup-target">
<a href="<?php echo esc_url(get_permalink($next_post->ID)); ?>">
<figure class="images">
<?php $src = wp_get_attachment_image_src(get_post_thumbnail_id( $next_post->ID ), 'full'); ?>
<img src="<?php echo esc_url($src[0]); ?>" alt="<span><?php echo ebor_the_terms('portfolio_category', ', ', 'name'); ?></span><?php echo get_the_title($next_post->ID); ?>" class="slip" />
</figure>
</a>
</div>
<?php endif; ?>
</div>
----Or this JS (jquery.fancybox.pack) (I didn't paste the entire thing because it's large and I'm not sure which bit would be relevant to the problem. ------
(function(C,z,f,r){var q=f(C),n=f(z),b=f.fancybox=function(){b.open.apply(this,arguments)},H=navigator.userAgent.match(/msie/i),w=null,s=z.createTouch!==r,t=function(a){return a&&a.hasOwnProperty&&a instanceof f},p=function(a){return a&&"string"===f.type(a)},F=function(a){return p(a)&&0<a.indexOf("%")},l=function(a,d){var e=parseInt(a,10)||0;d&&F(a)&&(e*=b.getViewport()[d]/100);return Math.ceil(e)},x=function(a,b){return l(a,b)+"px"};f.extend(b,{version:"2.1.4",defaults:{padding:0,margin:10,width:800,
height:600,minWidth:100,minHeight:100,maxWidth:9999,maxHeight:9999,autoSize:!0,autoHeight:!1,autoWidth:!1,autoResize:!0,autoCenter:!s,fitToView:!0,aspectRatio:!1,topRatio:0.5,leftRatio:0.5,scrolling:"auto",wrapCSS:"",arrows:!0,closeBtn:!0,closeClick:!1,nextClick:!1,mouseWheel:!0,autoPlay:!1,playSpeed:3E3,preload:3,modal:!1,loop:!0,ajax:{dataType:"html",headers:{"X-fancyBox":!0}},iframe:{scrolling:"auto",preload:!0},swf:{wmode:"transparent",allowfullscreen:"true",allowscriptaccess:"always"},keys:{next:{13:"left",
34:"up",39:"left",40:"up"},prev:{8:"right",33:"down",37:"right",38:"down"},close:[27],play:[32],toggle:[70]},direction:{next:"left",prev:"right"},scrollOutside:!0,index:0,type:null,href:null,content:null,title:null,tpl:{wrap:'<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',image:'<img class="fancybox-image" src="{href}" alt="" />',iframe:'<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen'+
Sorry, I know this is probably a long shot. And I'm sorry about my obvious cluelessness around this, but I've spent the last few weeks trying to figure out what the problem is. Thank you so much to anyone who looks over this.
There are a number of ways to disable right click, but a common way is
document.addEventListener('contextmenu', event => event.preventDefault());
If you're going to disable the disabling, you'll need to find the reference to contextmenu or onContextMenu or something similar.
The snippets you included didn't have this in it, so it's probably somewhere else in the theme or plugin folder.
Without more code, I can't help much, but good luck trying to find it yourself! Let us know if there's more info you can give.
I use Advanced Custom Field plugin to add Content2 and content3 in wordpress page editor. I have no problem no make it appear in a template, but now I would like to make it appear in another page content.
I use a plugin called Allow Php Execute so I can write Php in wordpress editor.
With a wp_query I call the pages with category "art", and I want to make appear the title, the thumbnail and the content3 of those pages. It works well with title and thumbnail, but I can't display the content3 custom field content.
Here is my code, written in the default wordpress content editor :
<?php
$the_query = new WP_Query( 'category_name=arts-plastiques','orderby=modified'); ?>
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="entry-content-page2Col">
<div class="col_gauche">
<div class="col_gauche_content"><?php the_post_thumbnail($size = 'full-size'); ?> </div>
</div>
<div class="col_droite">
<div class="col_droite_content">
<h2><div class="titrePage"><?php the_title(); ?></div></h2>
<div><?php
$post = $the_query->post->ID;
echo get_post_meta($post, 'colonne_3', true);
wp_reset_query();
?></div>
<div class="more">En savoir plus</div>
</div>
</div><!-- .entry-content -->
</article><!-- #post-## -->
<?php endwhile;?>
Can anyone help me ?
Thank you a lot !
Hugo
I'm working on modifying an existing wordpress portfolio page. All that is left to do is to make it so when the user clicks anywhere in the article list the link will open. Currently it is just when the title or image is clicked.
I can see that I could make a clickable with the following setup:
<a href="http://example.com">
<div>
anything
</div>
</a>
However Wordpress moves the tags when the page loads like so:
<a href="http://example.com">
</a>
<div>
anything
</div>
So I started to work on using css with the following setup:
HTML
<div class= "box">
</div>
CSS
div.box {
position: relative;
}
div.box:hover {
cursor: hand;
cursor: pointer;
opacity: .9;
}
The hover works, it triggers over all of the content and a cursor does appear.
However thats as much as I can do so far. Any attempt to interact with the .box is shot down. Nothing will trigger with javascript using the following :
$(".box").click(function() {
alert("I am an alert box!");
});
I cannot seem to interact with the div.
The page is as follows:
<div class= "box">
<article id="post-<?php the_ID(); ?>" class="portfolio-article clearfix">
<?php if( get_post_meta($post->ID, "portfolio_image", true) ): ?>
<img src="<?php the_field('portfolio_image'); ?>" class="portfolio-image">
<!--get PDF if not empty-->
<?php else: ?>
<img src="http://domain.com/wp-content/uploads/2014/02/placeholder.png" class="portfolio-image">
<?php endif; ?>
<div class="portfolio-content">
<header>
<?php if( get_post_meta($post->ID, "portfolio_link", true) ): ?>
<h1 class="portfolio-title">
<a target="_blank" href="<?php the_field('portfolio_link'); ?>">
<?php the_field('portfolio_title'); ?> <span class="sosa-icon">p</span>
</a>
</h1>
<!--get PDF if not empty-->
<?php else: ?>
<h1 class="portfolio-title"><?php the_field('portfolio_title'); ?></h1>
<?php endif; ?>
</header>
<p class="portfolio-meta">
<?php the_field('portfolio_publication_and_date'); ?>
<?php if( get_post_meta($post->ID, "portfolio_pdf_upload", true) ): ?>
<span class="sosa-icon">H</span> Open Pdf<!--get PDF if not empty-->
<?php endif; ?>
</p><!-- END ortfolio-meta -->
</div><!--portfolio-content-->
</article>
</div>
NewToJS was in the right area when saying it could be a problem with the access to the jQuery library. In this case I had linked jQuery correctly, it was tested and working.
jQuery in Wordpress needs to be enqueued by adding the following into functions.php
wp_enqueue_script("jquery");
My fault was because I didn't change the '$' to 'jQuery' as this is necessary when working with Wordpress.
Here is the incorrect usage :
$(".box").click(function() {
alert("I am an alert box!");
});
Here is the correct usage :
jQuery(".box").click(function() {
alert("I am an alert box!");
});
tl;dr; Some javascript that runs in wordpress duplicates my top element all over the html. See image.
Hi
I am really surprised at this bug in wordpress, and its actually pretty easy to replicate. I wanted a
<a class="something" href="a-link"> ... </a>
to wrap all of my article content so that it would look like this code:
<article id="post-<?php the_ID(); ?>" <?php post_class('col-md-4'); ?>>
<a class="hehe" href="google.com">
<?php
if (is_sticky() && is_home() && ! is_paged()) {
printf( '<span class="sticky-post">%s</span>', __('Featured', 'nisarg'));
} ?>
<?php nisarg_featured_image_disaplay(); ?>
<div class="main-image">
<?php if( get_field('main_image') ): ?>
<img class="img-responsive " src="<?php the_field('main_image'); ?>" />
<?php endif; ?>
</div>
<?php if( get_field('vacation_type_image') ): ?>
<img src="<?php the_field('vacation_type_image'); ?>" class="post-vacation-type" />
<?php endif; ?>
<header class="entry-header">
<div class="post-header">
<div class="row blog_post_container">
<div class="col-sm-12 blog_post_info_container_col">
<div class="blog_post_info_container">
<div class="blog_post_info_container_margin">
<span class="screen-reader-text"><?php the_title();?></span>
<?php if( is_single()) : ?>
<h1 class="entry-title blog_post_header"><?php the_title(); ?></h1>
<?php else : ?>
<h2 class="blog_post_info entry-title">
<?php the_title(); ?>
</h2>
<?php endif; // is_single() ?>
<?php if ('post' == get_post_type()) : ?>
<div class="entry-meta">
<h5 class="blog_post_info entry-date"><?php nisarg_posted_on(); ?></h5>
</div><!-- .entry-meta -->
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
</header><!-- .entry-header -->
<div class="entry-summary row">
<div class="excerpt">
<?php the_excerpt(); ?>
<div class="excerpt-footer">
<div class="facebook-button">
<div class="fb-like"
data-share="true"
data-width="500"
data-show-faces="true">
<a class="fb-xfbml-parse-ignore"
target="_blank"
href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse">
</a>
</div>
</div>
</div>
</div>
</div><!-- .entry-summary -->
<!--<footer class="entry-footer">
<?php nisarg_entry_footer(); ?>
</footer> -->
</a>
</article><!-- #post-## -->
I am using the Nisarg theme, but if i went inside of twentysixteen theme, and put a:
<a class="something" href="a-link"> ... </a>
inside of that content.php it would have the same effect, it litters the element inside of the article. like this:
If i look in the source code of my web page, i dont see any of these additional A elements, so they're being appended by some javascript. Now that its something that occurs in several themes i think it has something to do with html5shiv... But ive tried to remove that script from the equation, but the problem remains - so im kind of lost. Does anyone know which javascript library that could do something like this?? i have also used grep to look for javascript files that does a.cloneNode but to no prevail.
Twentysixteen, replication of error:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<a href="http://www.google.com" class="hehe">
<header class="entry-header">
<?php if ( is_sticky() && is_home() && ! is_paged() ) : ?>
<span class="sticky-post"><?php _e( 'Featured', 'twentysixteen' ); ?></span>
<?php endif; ?>
<?php the_title( sprintf( '<h2 class="entry-title">', esc_url( get_permalink() ) ), '</h2>' ); ?>
</header><!-- .entry-header -->
<?php twentysixteen_excerpt(); ?>
<?php twentysixteen_post_thumbnail(); ?>
<div class="entry-content">
<?php
/* translators: %s: Name of current post */
the_content( sprintf(
__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentysixteen' ),
get_the_title()
) );
wp_link_pages( array(
'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentysixteen' ) . '</span>',
'after' => '</div>',
'link_before' => '<span>',
'link_after' => '</span>',
'pagelink' => '<span class="screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>%',
'separator' => '<span class="screen-reader-text">, </span>',
) );
?>
</div><!-- .entry-content -->
<footer class="entry-footer">
<?php twentysixteen_entry_meta(); ?>
<?php
edit_post_link(
sprintf(
/* translators: %s: Name of current post */
__( 'Edit<span class="screen-reader-text"> "%s"</span>', 'twentysixteen' ),
get_the_title()
),
'<span class="edit-link">',
'</span>'
);
?>
</footer><!-- .entry-footer -->
</a>
</article><!-- #post-## -->
Resulting html:
so that means, simply adding a a tag right after the article tag in something like content.php will duplicate the a tag inside of all the divs, which just seems insane to me.
Thanks
EDIT 1: adding example of "core" wordpress theme twentysixteen with exact same error.
EDIT 2: I can confirm, a clean installation of Wordpress has this exact problem.
There is another <a> within the <h2> title. It's not possible to nest <a> tags.
If you do this, the browser attempts to fix the structure closing the nested <a> and what you see is the result.
I have researched this and cannot find an answer. The solutions I have found have not resulted in success.
I am building a WordPress Template and I have a section that contains dynamic tabs. When the user selects a particular tab, the data below it changes accordingly.
However, I cannot get it to scroll down on focus like a normal in-page anchor would do. My relevant code is:
Link:
<span><?php the_sub_field('work_tab_title');?></span>`
Anchor:
<div id="<?php echo strtolower(substr($string, 0, strpos( $string, ' ') )).$i;?>-content" class="<?php if($i==1){ echo '';}?> tab-content">
My current functionality is working in terms of the tabs changing except for the scroll/focus of the anchor. This would be easier if I could give you the URL but I am not sure if that is against etiquette here, let me know please.
Thank you
It has come to the point where a larger section of code is needed for context and better understanding:
<div class="container">
<ul class="tab-strips">
<?php $i=0; $j=1; while(has_sub_field('work_slider')):?>
<?php
$string=get_sub_field('work_tab_title');?>
<li data-bottom-top="top:-30px; opacity:0;" data-center="top:0px; opacity:1;"><a href="#<?php echo strtolower(substr($string, 0, strpos( $string, ' ') )).$j;?>-content"><span>
<?php the_sub_field('work_tab_title');?>
</span></a></li>
<?php $i++; $j++; endwhile;?>
</ul>
</div>
<?php $i=1; while(has_sub_field('work_slider')): ?>
<?php $string = get_sub_field('work_tab_title'); ?>
<?php $slider_title = get_sub_field('slider_title'); ?>
<div id="<?php echo strtolower(substr($string, 0, strpos( $string, ' ') )).$i;?>-content" class="<?php if($i==1){ echo '';}?> tab-content">
<?php ?>
<script type="text/javascript">
document.getElementById('<?php echo strtolower(substr($string, 0, strpos( $string, ' ') )).$j;?>-content').scrollIntoView(true);
</script>
<?php if(get_sub_field('inner_slider')):?>
<div class="container">
<div class="row" style="margin-left:9.6%;">
<h3>
<?php echo $slider_title; ?>
</h3>
</div>
</div>
<div class="slider">
<div class="container">
<div class="row">
<ul class="clearfix work-slider-controls" id="work_slider_controls<?php echo $i;?>">
<?php $j=0; while(has_sub_field('inner_slider')):?>
<li><a class="work-slider-tab" href="#" data-work-index="<?php echo $i-1;?>" data-slider-index="<?php echo $j;?>" rel="<?php echo $j;?>">
<?php the_sub_field('work_inner_title');?>
</a></li>
<?php $j++; endwhile;?>
</ul>
</div>
</div>
</div><!-- slider -->