Getting images to display in Carousel

Just to confirm, Carousel is enabled in Settings > Media:

Image Gallery Carousel
Enable carousel [v] Display images in full-size carousel slideshow.

Hi @planius!

Thanks for pointing out the deficiency in the docs. If you change the link parameter to carousel, the tiles should open in the carousel!

[gallery tiles="yes" grids="Infusion in Action" image_size="large" link="carousel" byline_template="%title%" ids="226,229,230,213,211,212,231,217,210,218,221,227,215,224"]

Cheers,
Mike

Thanks Mike,

I have made the change, but now the page comes up blank – the tiled gallery no longer shows at all. I tried both Chrome and IE, same result.

It works fine with Thickbox, so it is related to Carousel. I am using Genesis framework/theme with Genesis Responsive Slider plugin in case it matters. The carousel plugin I installed is called Gallery Carousel Without JetPack 0.7.4

Any suggestions?

Thanks
Peter

I just checked, the gallery code is there in the HTML, but it just doesn’t show. Here is the code for the first image:

<div class="wp-tiles-container">

            <div data-carousel-extra='{"blog_id":1,"permalink":"http:\/\/rhinorescueproject.org\/infusion-in-action\/","likes_blog_id":false}' id="wp_tiles_1" class="wp-tiles-grid gallery wp-tiles-byline-align-bottom wp-tiles-byline-animated wp-tiles-byline-slide-up">
                <div class='wp-tiles-tile gallery-item' id='tile-263'>

                    <a href="https://rhinorescueproject.org/wp-content/uploads/2015/03/Darting.jpg" title="Rhino is darted from helicopter" data-attachment-id="263" data-orig-file="https://rhinorescueproject.org/wp-content/uploads/2015/03/Darting.jpg" data-orig-size="1140,748" data-comments-opened="0" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}" data-image-title="Rhino is darted from helicopter" data-image-description="" data-medium-file="https://rhinorescueproject.org/wp-content/uploads/2015/03/Darting-300x197.jpg" data-large-file="https://rhinorescueproject.org/wp-content/uploads/2015/03/Darting-1024x672.jpg">

                        <article class='wp-tiles-tile-with-image wp-tiles-tile-wrapper' itemscope itemtype="https://schema.org/CreativeWork">

                            <div class='wp-tiles-tile-bg'>

                                <img src='https://rhinorescueproject.org/wp-content/uploads/2015/03/Darting-1024x672.jpg' class='wp-tiles-img' itemprop="image" />

                            </div>

                            <div class='wp-tiles-byline'>

                                <div class='wp-tiles-byline-wrapper'>

                                    <div class='wp-tiles-byline-content' itemprop="description">
                                        Rhino is darted from helicopter
                                    </div>

                                </div>

                            </div>

                        </article>

                    </a>

                </div>

                <div class='wp-tiles-tile gallery-item' id='tile-265'>

Hi Peter,

Thanks for the detailed information. Looking through the code, everything seems fine. This means that both WP Tiles and Carousel are doing their job on PHP side. I suspect that the scripts aren’t loaded properly, but I don’t know why.

Is it possible to create a (hidden/private) page so I can see the problem for myself?

Cheers,
Mike

Hi Mike,

I can set up a temporary admin account for you, if you want. Just email me to [email protected]

Thanks
Peter

Hi Mike & Peter,

I have a very similar issue on my site. Maybe we could get together and try to solve it?

Mine is where the tiled gallery no longer shows at all when Carousel is enabled.

See https://jonathanpow.com/fashion-photographer/ (it is currently enabled). And images are not showing.

So far I have tried disabling all plugins, refresh, I’ve removed all my custom CSS and refresh. The only thing that ‘solves’ the issue and allows WP-Tiles to display is disabling Carousel altogether. (i.e. it works with just Thickbox).

It’s most odd.

My themes is GraphPaperPress’s F8 Remixed.

JP

Ok so I’ve done a bit of digging. I hope this is of use! So, apologies first, because I’m not skilled in coding.

Changing to certain themes does seem to ‘solve’ the problem. Except that isn’t practical.

I’ve also found that Carousel adds an extra class to galleries, namely the ‘gallery’ class.

wp-tiles-grid gallery wp-tiles-byline-align-bottom wp-tiles-byline-animated wp-tiles-byline-fade-in wp-tiles-loaded

In testing removal of that class fixes the problem, as too does removal of carousel itself. But that defeats the object of the exercise.

Also, the following code, in mine at least, causes WP Tiles to show beautifully. Albeit out of line with the rest of the content.

.wp-tiles-grid {
  position: inherit;
}

Warmest regards,

Jonathan

Hi,

I have a similar problem with carousel but with the [wp-tiles] shortcode.

If I use the [gallery] shortcode everything is working fine but no pagination support (at least I did not found a solution for this) –> https://sv-eystrup.de/galerien/koenigsschiessen-2015

If using the [wp-tiles] shortcode pagination is working but no carousel ?? –> https://sv-eystrup.de/galerien/archiv/koenigsschiessen-2013/

[wp-tiles grids="News" small_screen_grid="Mobile" breakpoint="640" padding="5" byline_height="0" pagination="ajax" order="ASC" orderby="date" link="carousel" post_parent="current" post_type="attachment" post_mime_type="image" post_status="inherit" posts_per_page="20"]

Regards