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.
Setting up a simple WordPress blog, that only contains a single page wich is the blog archive. But i have run in to a problem, i want to have a toggle the excerpt and content show more/show less functionality, så that visitors easy can go trough the posts on the same page without page reloads or beeing sent to the single post page. I know this has been asked here before but none of those examples works for me. Just want a simple show/hide functionality to show the excerpt automatic and when users click show more, the whole post slides open to show complete content, and when they click show less, the post goes back to excerpt. I tried most that is here on stack but nothingworks so now i rolled back to my original files to start over. So this script does nothing right now as you se in the loop-custom file. But this is what i have tried.
Here is my js:
$(function () {
$('.mainContent').hide();
$('a.read').click(function () {
$(this).parent('.excerpt').slideUp('fast');
$(this).closest('.post').find('.mainContent').slideDown('fast');
// $('.mainContent').show();
return false;
});
$('a.read-less').click(function () {
$(this).parent('.mainContent').slideUp('fast');
$(this).closest('.post').find('.excerpt').slideDown('fast');
return false;
});
});
Here is my index file:
<div id="content">
<div id="inner-content" class="row">
<main id="main" class="large-8 medium-8 columns" role="main">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<!-- To see additional archive styles, visit the /parts directory -->
<?php get_template_part( 'parts/loop', 'custom' ); ?>
<?php endwhile; ?>
<?php joints_page_navi(); ?>
<?php else : ?>
<?php get_template_part( 'parts/content', 'missing' ); ?>
<?php endif; ?>
</main> <!-- end #main -->
<?php get_sidebar(); ?>
</div> <!-- end #inner-content -->
</div> <!-- end #content -->
And here is my loop-custom file:
<article class="post" id="post-<?php the_ID(); ?>" <?php post_class(''); ?> role="article">
<header class="article-header">
<?php get_template_part( 'parts/content', 'byline' ); ?>
<h2><?php the_title(); ?></h2>
</header> <!-- end article header -->
<section class="entry-content" itemprop="articleBody">
<?php the_post_thumbnail('full'); ?>
<?php the_excerpt('<button class="tiny">' . __( 'Show more...', 'jointswp' ) . '</button>'); ?>
</section> <!-- end article section -->
EDIT: Answer updated after testing in fiddle.
<div class="post-wrap">
<h2>The Title</h2>
<div class="post">
<div class="excerpt">
Excerpt goes here
</div>
<div class="whole-post">
Slidey read more content goes here
</div>
Read More
</div>
</div>
.whole-post {
display: none;
}
.post {
position: relative;
padding-bottom: 50px;
}
a.read {
position: absolute;
bottom: 10px;
right: 10px;
}
$('a.read').click(function () {
$(this).siblings('.excerpt').slideToggle(500);
$(this).siblings('.whole-post').slideToggle(500);
});
Further comment asking about changing "read more" button text on click - requires additional line of jQuery, like so:
$('a.read').click(function () {
$(this).siblings('.whole-post').is(':visible') ? $(this).html('Read More') : $(this).html('Read Less');
$(this).siblings('.excerpt').slideToggle(500);
$(this).siblings('.whole-post').slideToggle(500);
});
jsfiddle here.
Note: The ternary query ? truthy : falsey ; syntax is short for if (query) { truthy } else { falsey } ;
You can try to use this plugin: https://wordpress.org/plugins/wp-showhide
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'm building a new homepage WordPress template. The template uses Flexslider to display Vimeo videos, a simple title and description.
I've followed the FlexSlider documentation to the letter, but the slides are all coming up blank.
Here's what I'm seeing via the Chrome Inspector:
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
}
For some reason the JQuery isn't kicking in. I've tried removing the inline styles from the <li> tags. I've also tried knocking out the lightbox script that I have running. Nothing seems to be working.
Can you see what's causing this? I've uploaded a demo here: http://bit.ly/1Sgpu99
UPDATE
Here's the relevant source from the template:
<?php // Begin main loop
while ( have_posts() ) : the_post(); ?>
<?php // Begin carousel repeater
if( have_rows('slides') ): ?>
<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<?php while( have_rows('slides') ): the_row();
// vars
$background_image = get_sub_field('background_image');
$video = get_sub_field('video');
$title = get_sub_field('title');
$description = get_sub_field('description');
$background_image = get_sub_field('background_image');
?>
<li class="slide" style="background: url(<?php echo $background_image; ?>) no-repeat center; background-size: cover;">
<div class="container">
<div class="half">
<div class="video"><?php echo $video; ?></div>
</div>
<div class="half last">
<header class="entry-header">
<h1 class="entry-title"><?php echo $title; ?></h1>
</header>
<?php echo $description; ?>
</div>
</div><!-- .container -->
</li>
<?php endwhile; ?>
</ul>
</div><!-- .flexslider -->
</div><!-- .flex-container -->
<?php // End repeater
endif; ?>
<?php // End main loop
endwhile; ?>
For some reason flexslider has not been initialized in your page.
If you put this code in Chrome or Firefox console
jQuery(".flexslider")
.flexslider({
animation: "slide",
useCSS: false,
animationLoop: false,
smoothHeight: true,
before: function(slider){
$f(player).api('pause');
}
});
and hit enter, the slider is showing ( whit completely broken css, but this is another question :) )
I can't tell from provided code why slider is not initialized, but you must debug your .js code, not .php. Put some console.log() in .js file where slider is initialized, to be sure that file is loaded, use wp_enqueue_script() to load your .jsfiles with proper dependence to be sure that files are loaded in proper order and so on.
I'd like to check the id of the parent element, to display either the big or the small version of an image.
<div id="content">
<?php include 'test.php';?>
</div>
<div id="sidebar">
<?php include 'test.php';?>
</div>
In test.php, an if-statement checks if the parent has the demanded id.
Is there a way to get the parentnode-id without JavaScript?
No. PHP do nothing with the rendered page.
But why don't you create a function and call that with parameters?
include 'test.php'
?>
<div id="content">
<?php showImage(); ?>
</div>
<div id="sidebar">
<?php showImage(true); ?>
</div>
<?php
And in test.php
function showImage($smallImage = false) {
if (!$smallImage) {
echo '<img src="path/to/bigimage" alt="" />';
} else {
echo '<img src="path/to/smallimage" alt="" />';
}
}
Or there are an alternative way. Set a variable before you include your file, and you can set an if condition in your test.php when you want to show the image.
<div id="content">
<?php
$parentNode = 'content';
include 'test.php'
?>
</div>
<div id="sidebar">
<?php
$parentNode = 'sidebar';
include 'test.php'
?>
</div>