Mirror effect on thumbnails

KchoPrro · 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)

KchoPrro · 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.

ron4mac · 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

KchoPrro · January 12, 2023, 08:39:22 PM

Quote from: ron4mac 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

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. :'(

BusAmerica · 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

KchoPrro · February 12, 2023, 07:45:31 PM

Hello BusAmerica;

The thumbnails you see in my theme are created in PhotoShop, one by one (I upload an image, then replace the thumbnail with the one I created in PS). I know how to solve this problem, it's just a matter of changing the thumbnail style, you can see it here:

https://www.youtube.com/watch?v=h2S2Zkm7utU

There is a property in CSS that does just that, reflect the object you have. The property is called box-reflect.

But for me it has a major problem, it is compatible with almost all browsers except Firefox (which is the one I use). So you can have a nice reflective layout, but if you're using Firefox you won't see it.

Making the mirror effect without using this simple property is somewhat more complicated, and everything I've seen on the internet requires having two images, the second one inverted. Therefore, the PHP code would have to be edited so that it would generate thumbnails for each image, and a style would be applied to the second so that it appears inverted.

At the moment I have it parked, I lack time and now that I have the web finished, I have stopped a bit with it.

Regarding the chaoticsoul issue, I did abandon it because it gave me too many problems to work with the latest version of php. Still, with the invaluable help of @Ron4mac I got almost everything working, but I decided to follow his advice to look for a theme from monicandesign.com (they are not the only ones, there are more themes for Wordpress and CPG on the internet, quite cheap, responsive and with a modern design).

If you want to know how Chaoticsoul was, applicable in old versions of CPG, although it has not been updated to version 1.6x, you can see it here:

See Chaoticsoul

All the best

-------------------

Hola BusAmerica;

Las miniaturas que ves en mi tema están creadas con PhotoShop, una a una (subo una imagen, y luego sustituyo la miniatura por la que he creado con PS). Sé como resolver este problema, únicamente es cuestión de cambiar el estilo de la miniatura, puedes verlo aquí:

https://www.youtube.com/watch?v=h2S2Zkm7utU

Existe una propiedad en CSS que hace precisamente eso, reflejar el objeto que tienes. La propiedad se llama box-reflect.

Pero para mí tiene un problema importante, es compatible con casi todos los exploradores menos con Firefox (que es el que yo uso). Por tanto, puedes tener un diseño con un bonito reflejo, pero si usas Firefox no lo verás.

Hacer el efecto espejo sin usar esta sencilla propiedad es algo más complicado, y todo lo que he visto en internet requiere tener dos imágenes, la segunda de ellas invertida. Por tanto, habría que editar el código PHP para que generara nos miniaturas de cada imagen, y a la segunda se le aplicaría un estilo para que aparezca invertida.

Por el momento lo tengo aparcado, me falta tiempo y ahora que ya tengo la web terminada, he parado un poco con ello.

En relación al tema chaoticsoul sí que lo abandoné porque me daba demasiados problemas para trabajar con la última versión de php. Aún así, con la inestimable ayuda de @Ron4mac conseguí que terminara funcionando casi todo, pero decidí seguir su consejo de buscar un tema de monicandesign.com (no son los únicos, hay más temas para Wordpress y CPG en internet, bastante económicos, responsivos y con un diseño moderno).

Si quieres saber cómo era Chaoticsoul, aplicable en versiones antiguas de CPG, aunque no se ha actualizado a la versión 1.6x, puede verlo aquí:

Ver Chaoticsoul

Un saludo

coppermine-gallery.com/forum

News:

Mirror effect on thumbnails

KchoPrro

KchoPrro

ron4mac

KchoPrro

BusAmerica

KchoPrro