Galerie-Ansicht Business T V4

  • Seite 1 von 2
21.09.2021 21:21
avatar  Jim
#1 Galerie-Ansicht Business T V4
avatar
Jim
User

Ich mochte die aufgeräumte Bilder-Ansicht im "normalen" Business-Template doch sehr.
Unabhängig des hochgeladenen Foto-Formats, wurde jedes Bild in einem Fenster dargestellt.




Im V4 sind die Frames nicht mehr vorhanden und so sieht's auch dementsprechend "asynchron" aus.




Ingmar erarbeitete dann einen Code, um die einzelnen Fenster für die Bilder gleichbleibend anzuzeigen.

1
2
3
 
.image-box   {
width: 220px;
}
 




Es sieht jetzt sicher etwas einladender aus, nur werden die einzelnen Bilder leider abgeschnitten.




Denke, da müsste noch ein zweiter Code her,
sodass sich die Fotos in den definierten Frame (vorgegeben vom erwähnten Code) einpassen,
wie z.B. beim ersten, gezeigten Screenshot. (Galerie_Ansicht_3)

jimArt

 Antworten

 Beitrag melden
24.09.2021 10:45
avatar  Jim
#2 RE: Galerie-Ansicht Business T V4
avatar
Jim
User

Hat sich da evtl. schon ein "Code-Spezialist" Gedanken darüber gemacht?

jimArt

 Antworten

 Beitrag melden
25.09.2021 19:17
avatar  Jim
#3 RE: Galerie-Ansicht Business T V4
avatar
Jim
User

Ich glaub', das hängt irgendwie mit "responsive-alt" zusammen!?


jimArt

 Antworten

 Beitrag melden
11.10.2021 11:08
avatar  Jim
#4 RE: Galerie-Ansicht Business T V4
avatar
Jim
User

Push? #3

jimArt

 Antworten

 Beitrag melden
11.10.2021 11:49 (zuletzt bearbeitet: 11.10.2021 11:51)
avatar  Mike48
#5 RE: Galerie-Ansicht Business T V4
avatar
User

Das problem ist aber nicht im V4 sondern im V6.

Versuch mal das im CSS/SCCS → CSS / SCSS Addon

1
2
3
 
/* galerie V6 */
#pic_container .h-100 {height:unset!important;}
.gallerypic {margin:0.5em;}
 


www.friends-of-xobor.de (Business Template)
www.seniorenclub-sel-koeln.de (Business Template)

 Antworten

 Beitrag melden
11.10.2021 13:05
avatar  Jim
#6 RE: Galerie-Ansicht Business T V4
avatar
Jim
User

Zitat von Mike48 im Beitrag #5
Das problem ist aber nicht im V4 sondern im V6.

Stimmt, sorry.

Der Code bzw. der erwünschte Effekt dessen ist leider ausgeblieben. Die Bilder sind immer noch angeschnitten.

Vorangehend zu deinem Code, habe ich noch folgende (Made by Ingmar) drin:

1
2
3
4
5
6
7
8
 
.image-box   {
width: 220px;
}
 

img {
height: auto;
}
 

jimArt

 Antworten

 Beitrag melden
18.10.2021 22:21
avatar  creator
#7 RE: Galerie-Ansicht Business T V4
cr
User

Führt folgender CSS-Code zu dem gewünschten Ergebnis?

1
2
3
4
 
.gallery .img-responsive-alt {
height: auto !important;
max-width: 100% !important;
}
 


 Antworten

 Beitrag melden
19.10.2021 08:09
avatar  Jim
#8 RE: Galerie-Ansicht Business T V4
avatar
Jim
User

@creator

Ja, damit werden die Bilder nicht mehr angeschnitten. Die erste "Hürde" ist also schon geschafft. Danke dir.





Je nach hoch-geladenem Bild-Format ergibt sich nun einen, oder eben keinen Rand um's Foto.
Kriegt man das auch noch gebacken?

jimArt

 Antworten

 Beitrag melden
19.10.2021 17:06 (zuletzt bearbeitet: 19.10.2021 17:13)
avatar  creator
#9 RE: Galerie-Ansicht Business T V4
cr
User

Den Rahmen kannst du mit CSS leider nicht entfernen. Du kannst nur das Bild von Hand mit einem Grafikprogramm bearbeiten und den Rahmen manuell entfernen.


 Antworten

 Beitrag melden
19.10.2021 18:14 (zuletzt bearbeitet: 19.10.2021 18:16)
avatar  Mike48
#10 RE: Galerie-Ansicht Business T V4
avatar
User

Da ich keinen Rahmen sehe, nehme ich an, er möchte gerne einen haben und wahrscheinlich auch etwas Abstand zwischen den Bildern.

Ich habe es so probiert

1
2
3
4
5
6
7
8
9
10
11
12
13
 
.gallerypic {
text-align: center !important;
border: 1em solid black;
margin: 0.2em;
padding: 0.5em !important;
}
.img-responsive-alt {
width: 100%;
height: auto !important;
}
.image-box {
width: unset !important;
}
 


www.friends-of-xobor.de (Business Template)
www.seniorenclub-sel-koeln.de (Business Template)

 Antworten

 Beitrag melden
19.10.2021 18:59
avatar  Jim
#11 RE: Galerie-Ansicht Business T V4
avatar
Jim
User

Zitat von Mike48 im Beitrag #10
Da ich keinen Rahmen sehe, nehme ich an, er möchte gerne einen haben und wahrscheinlich auch etwas Abstand zwischen den Bildern.


Ja, jetzt kommen wir der Sache schon massiv näher.

Ein "unsichtbares, violett gestricheltes Rahmenfeld" - nennt sich "div.row" - ist ja im Hintergrund vorhanden.




Die Fotos, sollten nun in diese fiktiven Rahmenlinien horizontal und vertikal eingemittet dargestellt werden.
Hab' da zur Ansicht mal 'was zusammengebastelt.




Mit deiner Lösung Mike, könnt' ich allerdings auch leben.



Ich müsste nur noch die Rahmen etwas dezenter gestalten können
und die Fotos darin horizontal und vertikal zentriert anzeigen.

jimArt

 Antworten

 Beitrag melden
19.10.2021 19:00 (zuletzt bearbeitet: 19.10.2021 19:05)
avatar  River
#12 RE: Galerie-Ansicht Business T V4
avatar
User

Zitat von Mike48 im Beitrag #10
Da ich keinen Rahmen sehe


Hab's mal mit Pfeilen markiert.

Viele Grüße
River

Edit: Sind sogar verschiedene Arten 'Rahmen' oder Schatten.

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

+++Ich will Computercrack werden! XD+++

Business Template (v4)

 Antworten

 Beitrag melden
19.10.2021 21:07
avatar  Jim
#13 RE: Galerie-Ansicht Business T V4
avatar
Jim
User

Zitat von creator im Beitrag #9
Den Rahmen kannst du mit CSS leider nicht entfernen. Du kannst nur das Bild von Hand mit einem Grafikprogramm bearbeiten und den Rahmen manuell entfernen.


Bitte verwechselt den Begriff "Rahmen" nicht;
Mit Rahmen meine ich nicht denjenigen, welche ich per Bildbearbeitung dem Foto selber hinzufüge,
sondern denjenigen des Fensters, wo das Bild darin als Thumbnail angezeigt wird.


jimArt

 Antworten

 Beitrag melden
19.10.2021 22:13
avatar  River
#14 RE: Galerie-Ansicht Business T V4
avatar
User

Zitat von Jim im Beitrag #8
Je nach hoch-geladenem Bild-Format ergibt sich nun einen, oder eben keinen Rand um's Foto.


Zitat von Jim im Beitrag #13
Mit Rahmen meine ich nicht denjenigen, welche ich per Bildbearbeitung dem Foto selber hinzufüge,
sondern denjenigen des Fensters, wo das Bild darin als Thumbnail angezeigt wird.



Das hatte ich in dem Fall falsch verstanden.

Viele Grüße
River

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

+++Ich will Computercrack werden! XD+++

Business Template (v4)

 Antworten

 Beitrag melden
24.10.2021 13:01 (zuletzt bearbeitet: 24.10.2021 13:02)
avatar  Jim
#15 RE: Galerie-Ansicht Business T V4
avatar
Jim
User

Habe den Code noch etwas verfeinert und ergänzt.
Denke, so könnt' man es stehen lassen.





Allerdings erreiche ich mein Ziel "Foto im Fenster einmitten" auch mit dem ".flex" nicht ganz.
Möglich, dass das Eine, das Andere aushebelt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
.gallerypic {
text-align: center !important;
border: 0.1em solid #e1e1e1;
padding: 1.0em !important;
}
.img-responsive-alt {
width: 100%;
height: auto !important;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
}
.image-box {
width: unset !important;
}
 
 

jimArt

 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!