Forum Replies Created

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter bluoma

    (@bluoma)

    So… my quick solution was to turn of the stretched background in the section’s general settings and whip up my own js:

    
    var element = $('.your_section');
            var offset = element.parent().offset();
    
            function fullwidth(el) {
              el.each(function(){
                $(this).css({
                    'width': '100vw',
      	            'margin-left': '-' + offset.left + 'px',
      	        });
              });
            } 
    
            if (element.length >= 1) {
              fullwidth(element);
    
    	        $(window).resize(function() {
    	            offset = element.parent().offset();
    	            fullwidth(element);
    	        });
    	}
    
    

    @uitznet you’re my hero. register_default_headers() works! that needs to be included on the custom-header documentation for sure.

    So I wonder if I’m having a similar problem. I’m trying to setup remote site management via Jetpack and I get the same/similar message from my wordpress.com admin.

    “There was an error retrieving your site settings.Make sure your Jetpack is up to date”

    I’m running the latest version of Jetpack (3.3) on my self-hosted wordpress site. Stats are working but not the site management features.

    Any thoughts?

    Do you have a link to share? One that has a tiled gallery?

    Not sure what your problem was but I’ve also had layout issues with square tile galleries. I posted a solution here:

    https://www.ads-software.com/support/topic/square-gallery-1-picture-visualises-much-bigger-then-the-other-ones

    Maybe that will help.

    So I’ve spent a great deal of time looking for a solution to the layout issue with square galleries and circle galleries. Initially I also thought “why is the first image so dang large?”

    I then realized that the rows of tiles want to try to match your $content_width. So I added this to my themes functions.php:

    if ( ! isset( $content_width ) )
        $content_width = 640; //pixel dimension. change to what you need

    Everything seemed fine but… then I visited my site on a mobile device and the layout was messed up. It seemed like when my page rendered at smaller screen sizes, the image sizes weren’t calculated correctly. So I hit the forums looking for a solution. I finally gave up and came up with a quick n dirty fix with some jquery and css.

    First, add this to your theme (this assumes your theme uses jquery – if it doesn’t jetpack likely adds it as most of its javascript depends on jquery). You can add before wp_footer() in your footer.php – or if you’re really cool, dump it in a separate javascript file and add it with wp_enqueue_script and use the ‘post_gallery’ hook to only add it to pages/posts that are using galleries.

    <script>
    	jQuery(document).ready(function($) {
    	//jetpack tiled gallery fix
    	$('.tiled-gallery.type-square, .tiled-gallery.type-circle').each(function() {
            var tilecount = $(this).children('.tiled-gallery-item').length;
    
    		if(tilecount % 3 === 1) {
    			$('.tiled-gallery-item:first-child',this).addClass('in-first-row');
    		} else if(tilecount % 3 === 2) {
    			$('.tiled-gallery-item:first-child, .tiled-gallery-item:nth-child(2)',this).addClass('both-first-row');
    		}
    
        });
    });
    </script>

    That will add some classes to square and circle galleries where the number of images is not divisible by 3. You can then add some really quick n dirty css to your theme’s style.css.

    .type-square .tiled-gallery-item, .type-circle .tiled-gallery-item {
        width: 33.3333% !important;
        height:auto !important;
        -moz-border-sizing:border-box;
        box-sizing: border-box;
    	padding-right:4px;
    }
    
    .type-square .tiled-gallery-item img, .type-square .tiled-gallery-item.in-first-row, .type-square .tiled-gallery-item.in-first-row *, .type-circle .tiled-gallery-item img, .type-circle .tiled-gallery-item.in-first-row, .type-circle .tiled-gallery-item.in-first-row * {
        width: 100% !important;
    	height:auto !important;
    }
    
    .tiled-gallery-item.both-first-row {
    	width:50% !important;
    }

    That was my “get it done now” solution but… the idea is sound if you want to improve upon it. You could, for instance replace jetpack’s stylesheets for square/circle galleries using wp_dequeue_style and that same hook, ‘post_gallery,’ and copy/edit those stylesheets to include with your theme (or in a plugin).

    Lastly, if you aren’t a fan of the larger square or circle thumbnails and you absolutely want all images the same size, you could just add this to your stylesheet.

    .type-square .tiled-gallery-item, .type-circle .tiled-gallery-item {
        width: 33.3333% !important;
        height:auto !important;
        -moz-border-sizing:border-box;
        box-sizing: border-box;
    	padding-right:4px;
    }
    
    .type-square .tiled-gallery-item img, .type-circle .tiled-gallery-item img  {
        width: 100% !important;
        height:auto !important;
    }

    So… I hope that helps. Good luck. Also, this should probably be in the Jetpack forum.

Viewing 6 replies - 1 through 6 (of 6 total)