Tiled Gallery Block Gutenberg Missing Captions

  • Resolved neufrin

    (@neufrin)


    7 years, 4 months ago

    Hi,

    I have a problem with a new block “Tiled Gallery”. In the past when I used Tiled Gallery in classic editor captions was showed over the images on hover. Also, almost all Lightbox plugins are getting captions from the title attribute in an image.

    Unfortunately, both features do not work with new block Tiled Gallery at Gutenberg Editor. Captions are missing and title attributes are not inserted to post.

    But everything works great in the old classic editor version of a tiled gallery. Shouldn’t be both versions give us equal functionality?

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter neufrin

    (@neufrin)

    7 years, 3 months ago

    I created a page to demonstrate the problem:
    https://codeandtravels.com/tiled-gallery/

    • This reply was modified 7 years, 3 months ago by neufrin.
    Plugin Support lizkarkoski

    (@lizkarkoski)

    7 years, 3 months ago

    Hi –

    Thanks so much for the visual aid with that picture. It’s really helpful. I just have a few questions about your set up so I can try and replicate the problem.

    – operating system and version
    – browser type and version

    Have you tried disabling all the plugins on the site but Jetpack to make sure there’s nothing else running interference?

    Thread Starter neufrin

    (@neufrin)

    7 years, 3 months ago

    Ofc,

    I tried it on the newest version of chrome (72) on Windows 10 and MacOs 10.13.6.
    I checked it also on edge but with same results.

    I disabled all plugins and left just jetpack. Also, I reinstall jetpack with no success.

    The output in code editor from Gutenberg block is:

    <!-- wp:jetpack/tiled-gallery {"ids":[6019]} -->
<div class="wp-block-jetpack-tiled-gallery aligncenter is-style-rectangular"><div class="tiled-gallery__gallery"><div class="tiled-gallery__row"><div class="tiled-gallery__col"><figure class="tiled-gallery__item"><img alt="DCIM100MEDIA" aria-label="image 1 of 1 in gallery" data-height="1500" data-id="6019" data-link="https://codeandtravels.com/dcim100media-241/" data-url="https://codeandtravels.com/wp-content/uploads/2019/02/SJCM0597-1365x1024.jpg" data-width="2000" src="https://i0.wp.com/codeandtravels.com/wp-content/uploads/2019/02/SJCM0597-1365x1024.jpg?ssl=1"/></figure></div></div></div></div>
<!-- /wp:jetpack/tiled-gallery -->

    while from classic editor it’s just gallery shortcode

    <!-- wp:shortcode -->
[gallery ids="6019" type="rectangular" link="file"]
<!-- /wp:shortcode -->

    Also the output html is different:
    Gutenberg Block:
    <div class="wp-block-jetpack-tiled-gallery aligncenter is-style-rectangular"><div class="tiled-gallery__gallery"><div class="tiled-gallery__row"><div class="tiled-gallery__col"><figure class="tiled-gallery__item" style="height:576.5px;width:770px;"><img alt="DCIM100MEDIA" aria-label="image 1 of 1 in gallery" data-height="1500" data-id="6019" data-link="https://codeandtravels.com/dcim100media-241/" data-url="https://codeandtravels.com/wp-content/uploads/2019/02/SJCM0597-1365x1024.jpg" data-width="2000" src="https://i0.wp.com/codeandtravels.com/wp-content/uploads/2019/02/SJCM0597-1365x1024.jpg?ssl=1"></figure></div></div></div></div>

    Classic editor gallery:
    <div class="tiled-gallery type-rectangular" data-original-width="770" data-carousel-extra="null" itemscope="" itemtype="http://schema.org/ImageGallery"> <div class="gallery-row" style="width: 770px; height: 579px;" data-original-width="770" data-original-height="579"> <div class="gallery-group images-1" style="width: 770px; height: 579px;" data-original-width="770" data-original-height="579"> <div class="tiled-gallery-item tiled-gallery-item-large" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject"> <a href="https://i0.wp.com/codeandtravels.com/wp-content/uploads/2019/02/SJCM0597.jpg?ssl=1" border="0" itemprop="url" class="lightbox-gallery-img blur"> <meta itemprop="width" content="766"> <meta itemprop="height" content="575"> <img data-attachment-id="6019" data-orig-file="https://codeandtravels.com/wp-content/uploads/2019/02/SJCM0597.jpg" data-orig-size="2000,1500" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;3.6&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;Ambarella MK-1&quot;,&quot;caption&quot;:&quot;DCIM100MEDIA&quot;,&quot;created_timestamp&quot;:&quot;1525952188&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;5&quot;,&quot;iso&quot;:&quot;77&quot;,&quot;shutter_speed&quot;:&quot;0.00026315789473684&quot;,&quot;title&quot;:&quot;DCIM100MEDIA&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="DCIM100MEDIA" data-image-description="" data-medium-file="https://i0.wp.com/codeandtravels.com/wp-content/uploads/2019/02/SJCM0597.jpg?fit=300%2C225&ssl=1" data-large-file="https://i0.wp.com/codeandtravels.com/wp-content/uploads/2019/02/SJCM0597.jpg?fit=770%2C578&ssl=1" src="https://i0.wp.com/codeandtravels.com/wp-content/uploads/2019/02/SJCM0597.jpg?w=766&h=575&ssl=1" width="766" height="575" data-original-width="766" data-original-height="575" itemprop="http://schema.org/image" title="DCIM100MEDIA" alt="DCIM100MEDIA" style="width: 766px; height: 575px;"> </a> <div class="tiled-gallery-caption" itemprop="caption description" style="display: none;"> DCIM100MEDIA </div> </div> </div> <!-- close group --> </div> <!-- close row --> </div>

    so the output from the gutenberg tiled gallery block has much less img attributes,ex. title tag is missing

    Gemma Evans

    (@gemmaevans)

    7 years, 3 months ago

    Hi @neufrin,

    Thanks for this. I’ve done some testing on my end and have been able to replicate captions not displaying on tiled gallery images (on another themes). It looks like this enhancement is already on our radar for tiled galleries and you can follow any discussion here:

    https://github.com/Automattic/jetpack/issues/9237

    I’ve noted your request there with a link to this thread.

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

The topic ‘Tiled Gallery Block Gutenberg Missing Captions’ is closed to new replies.