Gallery layout edit

Hi,
For the gallery image links, I found that it is only available in the “masonry gallery” the “standard gallery” doesn’t have this option.
To have a border radius around each image, please try this css:

#top div .avia-gallery img {
    border-radius: 20px;
}

To move the gallery on your single post to after the related posts and before the comments, Try adding this code to the end of your functions.php file in Appearance > Editor:

function gallery_after_related_posts(){
  ?>
  <script>
(function($) {
  $(document).ready(function(){
     $('#top.single-post .avia-gallery').detach().insertAfter('.related_posts');
  });
 })(jQuery);
 </script>
<?php
}
add_action('wp_footer', 'gallery_after_related_posts');

After adding this please clear your browser cache and check.

Best regards,
Mike

Hi,
For the masonry gallery border radius please try this css:

.av-masonry-entry.av-masonry-item-loaded * {
border-radius: 20px;
}

to move the masonry below the related posts, Try adding this code to the end of your functions.php file in Appearance > Editor:

function masonry_after_related_posts
  <script>
(function($) {
  $(document).ready(function(){
     $('#top.single-post #av-masonry-1').detach().insertAfter('.related_posts');
  });
 })(jQuery);
 </script>
<?php
}
add_action('wp_footer', 'masonry_after_related_posts');

please be sure to remove the other function.

Best regards,
Mike

Hi,
Sorry I don’t see a title “OUR CATEGORIES” or the horizontal gallery on the page we are working on /13269/ or any of the other pages, which page can we see this on?

Best regards,
Mike

Hi,
Thank you for adding the “OUR CATEGORIES” but it is only a paragraph of text, this will need a custom class in order to move it successfully without accidentally moving unwanted elements. Try using this html for your text:
<p class="move-text">OUR CATEGORIES</p>
then you can use this function

function text_after_related_posts
  <script>
(function($) {
  $(document).ready(function(){
     $('#top.single-post p.move-text').detach().insertAfter('.related_posts');
  });
 })(jQuery);
 </script>
<?php
}
add_action('wp_footer', 'text_after_related_posts');

For the horizontal gallery use this function

function horizontal_gallery_after_related_posts
  <script>
(function($) {
  $(document).ready(function(){
     $('#top.single-post .av-horizontal-gallery').detach().insertAfter('.related_posts');
  });
 })(jQuery);
 </script>
<?php
}
add_action('wp_footer', 'horizontal_gallery_after_related_posts');

Best regards,
Mike

Hi,
Thank you for the feedback, for the horizontal gallery the activate starting thumbnail is all the way to the left, and the gallery doesn’t start moving until the fifth one is activate, or the fifth click.
So I think two settings that will help is “Active Image Style” = “enlarge image” this will visually show which image is the active one even if the gallery is not side scrolling, and the “Initial Active Image” = “5” this will set number 5 as the active one so the next click scrolls the gallery.

To add some space to the top of the comments container, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

#top.single-post #main div.comment-entry.post-entry {
	padding-top: 50px !important; 
}

After applying the css, Please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike