Item carousel titles/captions loading vertically

Hello, I’m having an issue on pages in Omeka-S. I have added an item carousel to a page and sometimes when I load the page to view it, the title or caption (doesn’t matter which I use) for the thumbnail will load on screen vertically instead of horizontally. This not only looks bizarre and makes the title/caption hard to read, but it pushes all of the images out of alignment as well, depending on the length of the title/caption. When it happens if I refresh the page it then displays how it should.

I’m using Thanks, Roy but I think it happens with other themes too sometimes. I think it happens with another page block but I can’t remember which one and can’t recreate it at the moment.

What is causing this and how can I fix it. I want to have either the title or caption displaying but I cannot have the pages looking like this – it’s awful and embarrassing.

Thank you!

Hi sarahlynne,

This is an issue that popped up sporadically when we were developing the ItemCarouselBlock module but we were never able to consistently reproduce it.

I’m working on a fix now but would like more details about your setup to see if I can replicate your specific situation. Could you share with me your Omeka S version, the browser you’re using, the settings for the Carousel, and if possible the dimensions/filetype of the media files you’re displaying via the carousel when this issue appears?

Hello!

I am using Omeka-S 3.0.2. It’s happening in Chrome, Safari, and Vivaldi.

I uploaded a screenshot of the settings for one of the item carousel blocks. It does the same if I turn off the title and have it display a caption.

The images being displayed… For these items the media type is HTML and I’m embedding the image on the item page using the Source input, but I have uploaded thumbnails for each that are 300x300 and that is what is displaying in the carousel.

If you need any other info/screenshots please let me know.

Thank you!

Oh, the thumbnails are .jpg files and all are under 200kb.

Hello,

We have a fix in place that appears to resolve the issue when testing on our end. Are you able to make the following change in your code, and see if it fixes the issue in your instance? If so, I can package the fix into a new release for the module.

Please delete the following lines (121-125) from ItemCarouselBlock/view/common/block-layout/item-carousel.phtml:

$('.slick-slide').each(function(){
 			// Match caption div width to each image 
 			var imgWidth = $(this).children('img').width();
 			$('.slick-slide .slide-text').css('width', imgWidth);
 		});

Well, I deleted the lines and haven’t yet tested whether it fixes the issue because I got distracted by a new issue the fix seems to have caused, or a new issue has somehow popped up unrelated…

I made a screenshot of what is happening. When I have the item carousel block on a page it inserts a stray lower-case letter s above the block. It only does it for the item carousel block (I tried a bunch of other ones). Any ideas on what caused this? I’ve had to just delete the block from my public page for the time being…

In the meantime, I will add a block to a hidden page and will test to see if the intended effect of the fix is happening and will let you know tomorrow.

Hmmm, that is strange. If it’s only happening with the ItemCarouselBlock, it seems like there might be a stray " s" string in that ItemCarouselBlock/view/common/block-layout/item-carousel.phtml file, somewhere above <div class="carousel-block">.

I just don’t know where else it could be–all other customizations and code from that Module are happening within that carousel-block div, and if it’s only happening with the module, it doesn’t sound like its something happening in the main codebase…

It definitely is strange! I deleted all blocks from that page and started fresh. Added item carousel block without any attached images or a title, saved, and refreshed the live page and all is well – completely blank page. Added a title to the block, still all is blank and well (title of block doesn’t show on live page). Added an item to the block, refreshed page, and stray “s” is back. I mentioned the items I’m using have media that is a html source embed, so I tried uploading a jpg file as media to a new item just in case it was somehow related to the html source media, but no, it still causes the “s” to appear. Attaching something to the block seems to be the trigger. It definitely was not doing this last night/before I cut the section you specified.

I didn’t see anything obvious in the item-carousel.phtml file but I’m not really sure if I’d be able to spot something wrong. My partner is currently occupied with something else, but I can have him take a look later and see if he can spot any issues (he’s a developer) and will report back. Though, I will also put a screenshot of the area you mentioned and maybe you’d spot an issue. Thanks for your help!

And I will include the area I cut from in case you can spot I did something wrong.

Thanks for the details! I don’t see anything amiss with the code you shared.

I suppose one thing to check would be to add the lines I asked you to remove back temporarily, then clear the cache in your browser and refresh to see if the ’ s’ still appears. This would help narrow down whether it’s that specific change or something else that is causing it.

Yes, it does actually still happen with the code put back. I cleared the cache and opened in a browser I hadn’t opened it in before.

I worked on the site last night and everything was fine and there was no stray s, got up, saw your reply, made the change, refreshed, and the s was there. I don’t see how anything else could have changed and I hadn’t edited any code last night (or for a couple weeks actually), I just was adding some items in Omeka. :frowning:

Ok, I figured out the s issue. I don’t know how it happened but some careless ctrl+s or something added an s on line 1 before the <?php and I just noticed it and deleted it and now all is well. Sigh. Sorry for that!! I have re-implemented the edit you suggested and will keep refreshing the page in various browsers tomorrow to see if the vertical title issue reappears or not and will post back. Thank you for your patience and sorry for that rogue s.

Good to hear! And that’s what I figured had happened, as it happens to all of us… hunting for stray characters/key slips is just part of the coding game :slight_smile:

:slight_smile: So far the fix seems to be working. I would like to keep testing it over the weekend before I tell you it is definitely working since the problem was sporadic in the first place. I’m trying it in various browsers and will later try it on different computers too.

That sounds like a plan–and thank you for the thorough testing! Let me know the results next week and if all goes well we can package the fix in a new release.

Hello! I have tested periodically in various browsers and tried on a second computer and I have not had the titles load vertically since the code change you suggested. I haven’t tried using captions though, just titles.

I adjusted the size of my browser window to make the page smaller so that the title wouldn’t fit under the image anymore without condensing in some way and happily is still does not make the title go vertical. It does make the title split into 2-3 lines depending on its length, which is fine, but is there anyway to stop it from knocking the image out of alignment with the rest of the row in the carousel? The images are all 300x300 so everything in the carousel of 4 images is very even, but then when the title for one goes to being two lines instead of one it makes that image bump up above the others a bit. Not a horrible issue, but visually it doesn’t look very clean and if I can change that behavior it would be great.

Thank you for all your help!

Glad to hear the vertical title/caption issue seems to be resolved!

Regarding the vertical spacing of image & text, it sounds like that is a byproduct of how the content of each slide is vertically aligned–since the content is aligned in the center, any changes caused to the height of the content (i.e. a new row of text being added) will make the entire content ‘re-center’ and thus it will not line up with the other slide’s content.

This center alignment can be changed by adjusting CSS properties in the ItemCarouselBlock/asset/vendor/slick/slick.css file, particularly slick-slide which controls the appearance and behavior of each slide and slick-track which controls the carousel ‘pane’ the slides are part of. Do note that CSS settings for tools such as this carousel are finely tuned, and changing one setting can sometimes have unintended consequences. After making changes to the CSS, you can compile the changes by running gulp css from the command line to see how it appears on the page–if something looks wrong or still needs adjusting, you can keep fiddling with the CSS and running gulp css until it looks right.

What you’re looking for seems like it should be possible, I just don’t have the bandwidth to fine-tune the CSS at this time to give you the correct settings. Perhaps it’s not worth the extra trouble, but that would be the approach I would use!