Request for Assistance with S5 Image Content Fader v4 Module for Joomla 4

tadeusz-rynkiewicz

Hello everyone,

I am experiencing issues with the S5 Image Content Fader v4 module for Joomla 4 and I am seeking your assistance to rectify this problem.

Upon implementing this module on my website, I've noticed that it's not functioning as expected. When activated, it only displays an article with an image in a small section of the lower-left corner of the screen, which doesn't align with its intended functionality.

Here's a breakdown of the problem:

Joomla version: 4.0
Template: Shape 5 Vertex
Module in question: S5 Image Content Fader v4
Issue: Only a portion of the article with the image is displayed, localized at the lower-left corner of the screen.
Has anyone encountered this issue before? If so, could you please guide me on how to correct this? Any help or suggestions would be greatly appreciated.

Looking forward to hearing from you soon.

Best regards,
Tadeusz

dominic

Hi tadeusz-rynkiewicz,
It appears that the FTP account is not functioning properly. Would you mind checking it at your earliest convenience?

tadeusz-rynkiewicz

Now it is working. I entered the wrong password. Sorry for the mistake. And thank you for your patience.

dominic

Hi tadeusz-rynkiewicz,
I have helped you added the following code to the /templates/shape5_vertex/css/custom.css file.

/*cto-module*/
.s5vertical .jdGallery .slideInfoZone h2 {
    left: 20px;
    position: relative;
    line-height: 30px;
}
.s5vertical .jdGallery .slideInfoZone p img {
    display: none;
}
.jdGallery .slideInfoZone p br {
    display: none;
}
.s5vertical .jdGallery .slideInfoZone {
    bottom: 4%;
}

.s5_iacf_cat {
    position: relative;
    left: -18px;
}

Also, you need to add the intro image to show in the module.

tadeusz-rynkiewicz

Hi Dominic,

Thank you once again for your assistance thus far. Unfortunately, I am still encountering issues with the S5 Image Content Fader v4 module for Joomla 4, despite following your instructions and adding the provided code to the /templates/shape5_vertex/css/custom.css file. I have also confirmed that the articles within the selected category do contain introductory images.

However, the module still only displays a black background, with no content appearing at all. Specifically, I am having difficulties getting the module to function in 'Article Method'. It is this method that I am most interested in and would like to get working.

I greatly appreciate any further guidance or advice you might be able to offer regarding this issue, Dominic. I'm not sure if there's something else I might be missing or doing wrong.

Thank you in advance for your time and help.

dominic

Hi tadeusz-rynkiewicz,
You need to enable the Enable Image Cover. Also, I have checked your articles and see that the intro image does not yet upload.

Also, you need to open the \modules\mod_s5_image_and_content_fader\js\jd.gallery.jquery.js file and find lines 1561 to 1583.

Replace with the following code:

gallery.prototype.initInfoSlideshow = function() {
		// Create a new element with the class "slideInfoZone" and append it to the gallery element
		this.slideInfoZone = new morphx($('<div class="slideInfoZone"></div>').appendTo($(this.galleryElement)).css({'opacity':1}));
	
		var slideInfoZoneTitle = "";
	
		// Check if s5_hideh2 is true (based on your global s5_hideh2 variable)
		if (s5_hideh2 == "true") {
			// Create a new <h2> element and append it to the slideInfoZone element
			slideInfoZoneTitle = $('<h2></h2>').appendTo(this.slideInfoZone.element);
		}
	
		// Create a new <p> element and append it to the slideInfoZone element
		var slideInfoZoneDescription = $('<p></p>').appendTo(this.slideInfoZone.element);
	
		// Assuming this.galleryData is an array containing information about the slides
		// You can get the information for the first slide (index 0) and set it in the info zone
		var firstSlide = this.galleryData[0]; // Assuming this.galleryData is an array of slide information objects
		$('h2', this.slideInfoZone.element).html(firstSlide.title);
		$('p', this.slideInfoZone.element).html(firstSlide.description);
	
		// Store the normal height of the slideInfoZone element in a property
		this.slideInfoZone.element.normalHeight = this.slideInfoZone.element[0].offsetHeight;
	
		// Set the initial opacity of the slideInfoZone element to 0
		this.slideInfoZone.element.css('opacity', 1);
	},

Hope this helps!

tadeusz-rynkiewicz

Dear Dominic,

I am truly grateful for your assistance. Your solution worked perfectly, and the mod_s5_image_and_content_fader module is now operating as expected. Your support has been invaluable.

However, I do have a couple of additional queries, if you could kindly assist.

Firstly, is there a method to enlarge the font size of the titles in the articles? They are currently quite small and it would be more readable if they could be increased.

Secondly, could you advise on whether it's possible to configure the image source to be drawn not from the intro image, but from an image within the article content itself?

Your guidance on these points would be greatly appreciated.

Once again, thank you for your timely and effective assistance.

Best regards,
Tadeusz Rynkiewicz

dominic

Hi tadeusz-rynkiewicz,
You can use the following CSS code to enlarge the font size of the titles in the articles:

.s5vertical .jdGallery .slideInfoZone h2 {
    font-size: 30px;
}

About the image, I have notified our technical team. We will discuss it.

tadeusz-rynkiewicz

Hi dominic,

Thank you very much for your assistance. The CSS code you provided worked perfectly. I appreciate the effort you put into helping me and notifying the technical team about the image issue.

Warm regards,
tadeusz-rynkiewicz