SOLVED Rollover - Change image on rollover effect on Promo Image Particle
-
-
- philippe combet
- Jr. Rocketeer
- Posts: 20
- Thanks: 1
SOLVED Rollover - Change image on rollover effect on Promo Image Particle
Posted 7 years 5 months ago-
Hello,
I'm using SALIENT as a base theme ( www.rockettheme.com/joomla/templates/salient ).
On the page demo.rockettheme.com/live/joomla/salient/pages/portfolio , let's say I want on Rollover effect, to change the source of the Particle Image.
How can I do this ?
If I'm right, I need to :- add a new image field in Promo Image particle configuration to be able to "grab" the new image URL
- add a Javascript to execute the rollover effect and pick the new image from the config file
Anybody to help me with this ?
Thanks,
Ewadrel, from France
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
Re: SOLVED Rollover - Change image on rollover effect on Promo Image Particle
Posted 7 years 5 months ago-
1, yes you will need to create a particle override and add a new field in the yaml for the new image. To learn how to override a particle in Gantry 5 please see our documentation here
http://docs.gantry.org/gantry5/tutorials/overriding-particle-settings#overriding-particle-source-files
.
2. No you don't need to use any JS as it's just "hover" that you need which you can do with CSS. So you will need to alter the TWIG file to add in a new container that has that second image, set it's opactity to 0 and then change opacity to 1 to show it (or something similar to that).
This is considered as a customization request which falls way beyond the scope of this support forum. You can always try to post your request in our The Marketplace forum and get (paid) support from someone that is willing to do this.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- philippe combet
- Jr. Rocketeer
- Posts: 20
- Thanks: 1
Re: SOLVED Rollover - Change image on rollover effect on Promo Image Particle
Posted 7 years 5 months ago-
Hello MrT,
thank you for your input.
I finally figured out how to do it. For those who meet the same need :
1. Modified promoimage.yaml in [TEMPLATE]/particles/
***********
BEFORE :
image:
type: input.imagepicker
label: Promo Image
description: Select desired promo image.
***********
AFTER (to add my new image field):
image:
type: input.imagepicker
label: Promo Image
description: Select desired promo image.
imageover:
type: input.imagepicker
label: Promo Image Over
description: Select desired promo image.
***********
2. Assigned via "Joomla>admin>modules>MYMODULE>Particle>Edit Particle" the image that will replace the original one in the new field created "imageover"
3/ Modified my promoimage.html.twig in [TEMPLATE]/particles/ to alter the behaviour
***********
BEFORE
<img src="{{ url(particle.image)|e }}" alt="{{ particle.title|e }}">
AFTER
<div onmouseover="this.style.backgroundImage='url({{ url(particle.imageover)|e }})'"
onmouseout="this.style.backgroundImage='url({{ url(particle.image)|e }})'">
<img src="{{ url(particle.image)|e }}" alt="{{ particle.title|e }}" onmouseover="this.style.backgroundImage='url({{ url(particle.imageover)|e }})'"
onmouseout="this.style.backgroundImage='url({{ url(particle.image)|e }})'">
</div>
***********
4/Modified in [TEMPLATE]/scss/[TEMPLATE]/_promoimage.scss to hide the old image, which will be replaced by the new OnMouseOver effect :
BEFORE
.g-promoimage-effect:hover {
background: darken($accent-color-1, 25%);
img {
opacity: 1;
AFTER
.g-promoimage-effect:hover {
background: darken($accent-color-1, 25%);
img {
opacity: 0;
**************
Et voila !
Best
Ewadrel
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
Re: SOLVED Rollover - Change image on rollover effect on Promo Image Particle
Posted 7 years 5 months ago-
Don't modify any of our existing template files because any update would overwrite all of your changes. Instead you should create a particle override...
To learn how to override a particle in Gantry 5 please see our documentation here http://docs.gantry.org/gantry5/tutorials/overriding-particle-settings#overriding-particle-source-files .
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- philippe combet
- Jr. Rocketeer
- Posts: 20
- Thanks: 1
Re: SOLVED Rollover - Change image on rollover effect on Promo Image Particle
Posted 7 years 5 months ago-
Mark,
thank you.
I've just moved the modifications from [TEMPLATE]/particles/ to [TEMPLATE]/custom/particles/.
Same for [TEMPLATE]/scss/[TEMPLATE]/_promoimage.scss MOVED to templates/[TEMPLATE]/custom/scss/custom.scss
Everything works like a charm.
Best,
Ewadrel
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
Re: SOLVED Rollover - Change image on rollover effect on Promo Image Particle
Posted 7 years 5 months ago-
That's not correct. Your version of _promoimage.scss should be copied to /templates/custom/scss and in your custom.scss file you should put
@import "promoimage";
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- philippe combet
- Jr. Rocketeer
- Posts: 20
- Thanks: 1
-
Time to create page: 0.079 seconds