Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: [1]   Go Down

Author Topic: Mirror effect on thumbnails  (Read 1583 times)

0 Members and 1 Guest are viewing this topic.

KchoPrro

  • Coppermine frequent poster
  • ***
  • Country: es
  • Offline Offline
  • Gender: Male
  • Posts: 294
    • Adolfo Ventas - Naturaleza Andaluza
Mirror effect on thumbnails
« on: October 20, 2022, 08:51:19 pm »

I know that you can get a mirror effect on the thumbnails without changing the thumbnail image, manually in the hosting, for another one from PhotoShop. It would be something simple with a box-reflect function in the style of the theme.

However, box-reflect still doesn't work with Firefox (and I don't think it ever will, it's been many years and firefox doesn't implement it). Many users use Firefox (me too) and I don't want to use that style in my gallery, I would like to achieve the same effect and have it work in any browser.

Any idea how to do it? I thought I could duplicate the thumbnail images (one above and the same below) and, to the image below, apply a style to invert the image and some other adjustments so that the image above appears mirrored but I don't know how duplicate the images (and that the exact same image remains above and below, even if we are seeing the images randomly, or we move the image in the filmstrip.

I would like to get exactly what appears in the attached screenshots (mirror effect made by me in PhotoShop, replacing the original thumbnails generated by CPG)
Logged

KchoPrro

  • Coppermine frequent poster
  • ***
  • Country: es
  • Offline Offline
  • Gender: Male
  • Posts: 294
    • Adolfo Ventas - Naturaleza Andaluza
Re: Mirror effect on thumbnails
« Reply #1 on: January 11, 2023, 07:52:44 am »

I'm still looking for a solution for the reflection effect in the thumbnails.

Would it be possible for CPG to generate a thumbnail directly with the mirror effect? (The same thing that I do in PhotoShop, and that I later replace on my server, one by one). If CPG could do it somehow, I could regenerate all my website thumbnails in one step.  ::)
Logged

ron4mac

  • Administrator
  • Coppermine addict
  • *****
  • Country: us
  • Offline Offline
  • Posts: 1938
Re: Mirror effect on thumbnails
« Reply #2 on: January 11, 2023, 06:08:13 pm »

It could be possible to achieve the effect automatically in your theme with the use of some clever CSS.
see here and/or here
Logged

KchoPrro

  • Coppermine frequent poster
  • ***
  • Country: es
  • Offline Offline
  • Gender: Male
  • Posts: 294
    • Adolfo Ventas - Naturaleza Andaluza
Re: Mirror effect on thumbnails
« Reply #3 on: January 12, 2023, 08:39:22 pm »

It could be possible to achieve the effect automatically in your theme with the use of some clever CSS.
see here and/or here

Thanks Ron4mac. I've seen similar examples but they all work with individual images; or adding the same image below to make it mirror effect, or using those images as backgrounds in css. how could i make the thumbnail class have a background of itself?

In the case of the examples, the result would be this:
https://codepen.io/KchoPrro/pen/GRBERGR

html
Code: [Select]
<body>
    <div class="reflection"></div>
  </body>

css
Code: [Select]
body {
  width:100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reflection {
  border-radius: 15px;
  width: 500px;
  height:333px;
  position: relative;
  background: url("https://www.adolfoventas.es/galeria/albums/userpics/10001/thumb__02_5832.jpg");
  background-position: bottom;
  background-size: cover;
  box-shadow: 0px 50px 70px rgba(0,0,0,0.1),
              0px 10px 10px rgba(0,0,0,0.1);
}
.reflection::after {
  border-radius: 15px;
  content:"";
  background-image: inherit;
  width:inherit;
  height:40%;
  position: absolute;
  bottom:-42%;
  transform: scaleY(-1);
  background-position: bottom;
  background-size: cover;
  opacity: 0.8;
}
.reflection::before {
  content:"";
  width:inherit;
  height: 42%;
  position: absolute;
  bottom: -42%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.3),white);
  z-index: 1;
}

I can do it with few images but doing it with the entire CPG gallery, with more than 1,000 images, is impossible. I don't know how to get each CPG thumbnail to be background. Keep investigating ;)

The truth is that the box-reflect effect would be perfect if it worked in Firefox, I just have to add it to the thumbnail class (and some other things), and my problem would be solved.  :'(
Logged

BusAmerica

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 66
Re: Mirror effect on thumbnails
« Reply #4 on: February 02, 2023, 06:59:45 am »

Hello Kchoprro

I'm looking at the site and it looks like you made it
You did?

At the same time I see that the theme used is Monica's and responsive. In another post you made reference to not wanting to abandon the "Chaoticsoul theme", did you abandon it? I never used it, so I don't know what it looked like, but I guess it wasn't responsive.

I am looking for a "responsive theme" and to see how to implement this mirror effect.
I hope you can answer me
Regards

************************
Hola Kchoprro

Estoy viendo el sitio y pareciera que lo lograste
¿Lo lograste?

A la vez veo que el tema usado es de Monica y responsivo. En otro post hacías referencia a no querer abandonar el tema Chaoticsoul ¿lo abanonaste? Nunca lo usé, así que no se como se veía, pero estimo no era responsivo.

Estoy a la busqueda de un "thema responsivo" y de ver de implementar ese efecto espejo.
Ojalá puedas responderme
Saludos
Logged
Pages: [1]   Go Up
 

Page created in 0.02 seconds with 19 queries.