Trying to open a new fancybox within a fancybox using "fancybox-hidden"? Using the Sirius Wordpress theme. My code is below. Any hints would be great.
<img src="<?php echo $small_image_url[0]; ?>" alt="" class="portfolio_img"/>
<!-- MATTSTER ADDED NEW ACTION TAG FOR LIGHTBOX AND NEW POST EXCERPT -->
<a class="fancybox-thumb" rel="gallery-<?php echo $post->ID; ?>" data-fancybox-group="fancybox-thumb" href="<?php echo $image_url[0]; ?>">
<div class="mask">
<div class="mask_frame">
<div class="mask_image_content">
<div class="mask_image_content_frame">
<h6><?php echo get_the_title(); ?></h6>
<span><?php echo strip_tags(pp_get_the_excerpt($portfolio_ID)); ?></span>
</div>
</div>
</div>
</div>
</a>
<div class="mancy">
<a class="fancybox-thumb" rel="gallery-<?php echo $post->ID; ?>" data-fancybox-group="fancybox-thumb"><img src="<?php echo $image_url[0]; ?>" /></a>
</div>
Related
The images are not showing in front-end. ACF settings screenshot
<?php
if( have_rows('how_it_works_functions') ):
$counter = 0;
while( have_rows('how_it_works_functions') ) : the_row();
$counter++;
?>
<div class="step<?php echo $counter; ?>">
<div class="row section-content">
<?php if($counter == 2) { ?>
<div class="col-md-8 image">
<img class="skip-lazy" src="<?php get_sub_field('how_it_works_functions_image')['url']; ?>" alt="<?php get_sub_field('how_it_works_functions_image')['alt']; ?>">
</div>
<div class="col-md-4 text">
<h3 data-aos="fade-left" data-aos-offset="300" data-aos-duration="1000"><?php the_sub_field('how_it_works_functions_name'); ?></h3>
<p data-aos="fade-up" data-aos-offset="100" data-aos-duration="1000"><?php the_sub_field('how_it_works_functions_description'); ?></p>
</div>
<?php } else { ?>
<div class="col-md-4 text">
<h3 data-aos="fade-right" data-aos-offset="300" data-aos-duration="1000"><?php the_sub_field('how_it_works_functions_name'); ?></h3>
<p data-aos="fade-up" data-aos-offset="100" data-aos-duration="1000"><?php the_sub_field('how_it_works_functions_description'); ?></p>
</div>
<div class="col-md-8 image">
<img class="skip-lazy" src="<?php get_sub_field('how_it_works_functions_image')['url']; ?>" alt="<?php get_sub_field('how_it_works_functions_image')['alt']; ?>">
</div>
<?php } ?>
</div>
</div>
<?php
endwhile;
endif;
?>
I already check the var_dump and it is getting the correct url but I still have broken image in front-end.
You need to echo that field.
Like this based on your code:
<img class="skip-lazy" src="<?php echo get_sub_field( 'how_it_works_functions_image' )['url']; ?>" alt="<?php echo get_sub_field( 'how_it_works_functions_image' )['alt']; ?>">
Alternative effective way:
<?php
$image = get_sub_field( 'how_it_works_functions_image' );
?>
<img class="skip-lazy" src="<?php echo esc_attr( $image['url'] ); ?>" alt="<?php echo esc_attr( $image['alt'] ); ?>">
Try out the above solution and let me know if it works or not.
div class="gallary">
<div class="container">
<div class="gallary-detail">
<div class="gallary-for">
<?php
if(have_rows('gallery')):
while(have_rows('gallery')): the_row(); ?>
<div class="gallary-image">
<?php $gal = get_sub_field('gallery_images');?>
<figure>
<a href="<?php echo $gal['url']; ?>" data-fancybox="gallery" data-caption="Optional caption">
<img src="<?php echo $gal['url']; ?>" alt="<?php echo $gal['alt']; ?>" />
</a>
</figure>
</div>
<?php endwhile; endif; ?>
</div>
<div class="gallary-nav">
<?php
if(have_rows('gallery')):
while(have_rows('gallery')): the_row(); ?>
<div class="gallary-image">
<?php $gal = get_sub_field('gallery_images');?>
<figure>
<a href="<?php echo $gal['url']; ?>" data-fancybox="gallery" data-caption="Optional caption">
<img src="<?php echo $gal['url']; ?>" alt="<?php echo $gal['alt']; ?>" />
</a>
</figure>
</div>
<?php endwhile; endif; ?>
</div>
</div>
</div>
</div>
Can anyone make the above code corrected so that duplicate images in thumbnails don't show and the slider stops when all images are seen? Right now there are 3 images uploaded using ACF but thumbnails show 6 images each image repeats one time and the slider doesn't stop instead it loops the images from 1-6.
So basicly i need to run a php function inside a thumbnail-list . When outside list and using only "text", it works. But if i convert to image, stops working and if inside the list doesn't work.When i press only main button works.
Function in question is ""
<div class="thumbnail-list">
<ul data-role="listview" data-filter-theme="d" data-inset="true">
<?php while ( have_posts() ) : the_post(); ?>
<?php
if(get_option_tree('blog_exce','', false)!="")
$length=get_option_tree('blog_exce','', false);
else
$length=100;
$image_url=wp_get_attachment_url( get_post_thumbnail_id(get_the_ID()) );
$id = get_post_meta(get_the_ID(), 'my_meta_box_text', true);
if($id!="")
?>
<li id="post-<?php the_ID(); ?>" <?php post_class("ui-btn-icon-right"); ?>>
<div class="ui-btn-inner ui-li" aria-hidden="true">
<div class="ui-btn-text">
<a data-ajax="false" class="ui-link-inherit" href="<?php the_permalink() ?>">
<p class="ui-li-aside ui-li-desc" ><?php the_time('Y-m-d') ?></p>
<?php if($id!="") {?>
<img class="ui-li-thumb" src="<?php echo $image_url; ?>" />
<?php }else {
if($meta2!="on"){?>
<div class="ui-li-thumb"><img style="display:none" class="blog_crop" src="<?php echo $image_url ; ?>" /></div>
<?php }else{?>
<div class="ui-li-thumb"><img style="max-height:80px;max-height:80px;" src="<?php echo $image_url ; ?>" /></div>
<?php }} ?>
<h3 class="ui-li-heading"><?php the_title()?></h3>
<a data-ajax="false" <?php wpfp_remove_favorite_link(get_the_ID());?> <img src="https://mywebsite.com/wp-content/uploads/2020/04/delete.png"></a>
</a></div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span>
</div>
</li>
This is what i have
This is what i want.
Thank you all for the help!...
Note: the function removes post and refreshes page and needs be data-ajax="false"
the word "Remover" is the button
I'm having a very strange issue that I can't figure out. I'm working on a custom theme in wordpress and I've got a div with an image and another icon image inside.
I'm trying to make both the whole image and the icon image within it a link.
The issue is that when I try to put a link around the whole div, Wordpress closed the link prematurely and then adds a second link - neither of which are actually enclosing my div.
If I change the div to a span, it will let me wrap it in a link. Why?! What is going on and how and I turn off this 'feature'?
Here is the selected code in my template file:
<a href="<?php the_permalink(); ?>">
<div class="img">
<?php if (has_post_thumbnail()): ?>
<img style="display: none;" src="<?php echo $image_attributes[0]; ?>" alt="<?php echo strip_tags(get_the_title()); ?>">
<span class="zoom hide-ie"><i class="fa fa-search"></i></span>
<?php endif; ?>
<?php if ($categories): ?>
<?php echo $categories[0]->cat_name?>
<?php endif; ?>
<div class="background" style="background-image: url('<?php echo $image_attributes[0]; ?>');"></div>
</div>
</a>
However, this is the code that is being outputted to the browser:
<a href="http:somelink">
</a>
<div class="img">
<a href="http:somelink">
<img style="display: none;" src="imagelink.jpg" alt="This isn’t our beautiful contest – how did we get here?">
<span class="zoom hide-ie"><i class="fa fa-search"></i></span>
</a>
Agency Mojo
<div class="background" style="background-image: url('http://imagelink.jpg');"></div>
</div>
So as you can see, it's closing the link immediately, and then adding another link inside of the `
Any help would be amazing as I've seen this question asked but not answered in a few other places including here on this site
I generally try to avoid nesting anchor tags. Perhaps something like this would work better.
<div class="img">
<?php if ( has_post_thumbnail() ): ?>
<a href="<?php the_permalink(); ?>">
<img style="display: none;" src="<?php echo $image_attributes[0]; ?>" alt="<?php echo strip_tags(get_the_title()); ?>" />
<span class="zoom hide-ie"><i class="fa fa-search"></i></span>
</a>
<?php endif; ?>
<?php if ($categories): ?>
<a href="<?php echo get_category_link($categories[0]-> term_id ); ?>" class="category-link">
<?php echo $categories[0]->cat_name; ?>
</a>
<?php endif; ?>
<a href="<?php the_permalink(); ?>">
<div class="background" style="background-image: url('<?php echo $image_attributes[0]; ?>');"></div>
</a>
</div>
I want to show only the articles from current category, where I am at the moment. I wrote code for a look of every post. I use plugin Advanced Custom Fields, which can create more fields for new post in administration.
Now I have this code:
<?php $the_query = new WP_Query( 'cat=' ); ?>
<div id="category-window">
<div id="others" style="width:<?php echo $wp_query->post_count*400?>px">
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
<div class="other-box">
<div id="other-name"><?php the_title(); ?></div>
<div id="other-left"><?php the_field(misto); ?><br><?php the_field(rok); ?></div>
<div id="other-right"><?php foreach((get_the_category()) as $category) {echo $category->cat_name . '<br>';} ?></div>
<div id="other-line"></div>
<div id="other-about"><?php the_field(dej); ?></div>
<div id="other-gallery">
<a class="other-photo fancybox" rel="<?php the_title(); ?>" href="<?php the_field(obrazek1); ?>">
<img src="<?php the_field(obrazek1); ?>" style="width: 85px; height: 50px;">
</a>
<a class="other-photo fancybox" rel="<?php the_title(); ?>" href="<?php the_field(obrazek2); ?>">
<img src="<?php the_field(obrazek2); ?>" style="width: 85px; height: 50px;">
</a>
<a class="other-photo fancybox" rel="<?php the_title(); ?>" href="<?php the_field(obrazek3); ?>">
<img src="<?php the_field(obrazek3); ?>" style="width: 85px; height: 50px;">
</a>
</div>
</div><?php endwhile; ?>
</div>
</div>
And the problem is just in the first line, I have no idea, what to write behind "cat=", when I want to do it automatically. For example when I am in category "cars", it automatically show only the articles from this category.
Thank you for every help :)
Something like this should work :
<?php
$postid = get_the_ID();
$catid = get_the_category( $postid );
?>
That should get you the cat id.