Forum für CMS/made simple

Bonifaz

probiert CMS/ms aus

Ort: Hamburg

Registriert: 09. Februar 2012

Beiträge: 63

[GELÖST] Seitenverhältnis der Rahmen der Vorschaubilder des Gallery-Moduls

Hallo zusammen,

wo kann ich das Seitenverhältnis der Rahmen der Vorschaubilder des Gallery-Moduls beeinflussen?

Das Modul schreib in den Header der Seite, auf der eine Galerie angezeigt werden soll, den folgenden CSS-Code:

 Hier klicken, um den Code zum Kopieren zu markieren

<style type="text/css">
.main .gallery .img { display:table; width:110px; height:110px; margin:0 10px 10px 0;}
</style>

Dadurch sind Rahmen der Vorschaubilder immer quadratisch. Das ist für unseren Fall aber Quatsch, unsere Bilder in dieser Galerie haben alle das Format 76x106.

Ich finde aber kein Template und keine CSS-Vorlage, aus der diese  CSS-Zeile mit dem Height- und dem Width-Attribut generiert wird. Also wird die Zeile vermutlich vom Programmcode generiert? Die JavaScript-Dateien finde ich etwas unübersichtlich, um da durchzublicken.

Daher meine Frage an die Experten im Forum:   Wo muß ich eingreifen, um das Width-Attribut aus der Zeile zu löschen? Denn wenn nur das Height-Attribut vorhanden ist, würde die Breite sich ja nach dem Original-Seitenverhältnis richten.

Danke im Voraus,
Bonifaz

COR9

Server-Pate

Ort: Dresden

Registriert: 09. November 2010

Beiträge: 281

Re: [GELÖST] Seitenverhältnis der Rahmen der Vorschaubilder des Gallery-Moduls

Das Seitenverhältnis kannst Du im Template-Editor einstellen. Gallery -> Reiter »Vorlagen«. Dort Dein Template auswählen und die Größe einstellen.

Das eigentliche Problem, dass CSS ins Seitentemplate eingefügt wird, hab ich noch nie gehabt. Welches Gallery-Template verwendest Du denn?

Bonifaz

probiert CMS/ms aus

Ort: Hamburg

Registriert: 09. Februar 2012

Beiträge: 63

Re: [GELÖST] Seitenverhältnis der Rahmen der Vorschaubilder des Gallery-Moduls

Das Seitenverhältnis kannst Du im Template-Editor einstellen. Gallery -> Reiter »Vorlagen«. Dort Dein Template auswählen und die Größe einstellen.

Das eigentliche Problem, dass CSS ins Seitentemplate eingefügt wird, hab ich noch nie gehabt. Welches Gallery-Template verwendest Du denn?

Also, ich verwendet folgendes Template:

 Hier klicken, um den Code zum Kopieren zu markieren

<div class="gallery">
{if !empty($module_message)}<h4>{$module_message|escape}</h4>{/if}
{if !empty($gallerycomment)}<div class="gallerycomment">{$gallerycomment}</div>{/if}
<div class="pagenavigation">
{if $pages > 1}
<div class="prevpage">{$prevpage}</div>
<div class="nextpage">{$nextpage}</div>
{/if}
{if !$hideparentlink && !empty($parentlink)}<div class="parentlink">{$parentlink}</div>{/if}
{if $pages > 1}<div class="pagelinks">{$pagelinks}</div>{/if}
</div>

{foreach from=$images item=image}
	<div class="img">
	{if $image->isdir}
		<a href="{$image->file}" title="{$image->title}"><img src="{$image->thumb}" alt="{$image->title}" /></a><br />
		{$image->title}
	{else}
   <a href="{$image->file}" title="{$image->title}" rel="lightbox[gallery]"><img src="{$image->thumb}" alt="{$image->title}" /></a>
	{/if}
	</div>
{/foreach}
<div class="galleryclear">&nbsp;</div>
</div>

und folgendes Gallery-Stylesheet:

 Hier klicken, um den Code zum Kopieren zu markieren

.gallery .img {
	height: 96px;
	width: 64px;   /* Adjust as you see fit */
	float: left;
	margin: 6px;
	text-align: center;
}

.gallery .img a {
	display: inline-block;
	border: 2px solid #ddd;
	padding: 1px;
}

.gallery .img a:hover {
	border-color: #999;
}

.gallery img {
	border: none;
}

.gallery .pagenavigation {
	height: 50px;
}

.gallery .prevpage a, .gallery .prevpage em {
	display: block; 
	width: 50px; 
	height: 39px;
	float: left; 
	margin: 0;
	text-indent: -1000px;
	background: url(../../images/previous.png) transparent no-repeat 0 0;
}

.gallery .nextpage a, .gallery .nextpage em {
	display: block; 
	width: 50px; 
	height: 39px;
	float: left; 
	margin: 0 6px 0 0;
	text-indent: -1000px;
	background: url(../../images/next.png) transparent no-repeat 0 0;
}

.gallery .parentlink a {
	display: block; 
	width: 50px; 
	height: 39px;
	float: left; 
	text-indent: -1000px;
	background: url(../../images/uppage.png) transparent no-repeat 0 0;
}

.gallery .pagenavigation a:hover {
	background-position: 0 -40px;
}

.gallery .prevpage em, .gallery .nextpage em {
	background-position: 0 -80px;
}

.gallery .pagelinks {
	float: right;
	border-right: 2px solid #666;
}

.gallery .pagelinks a, .gallery .pagelinks em {
	margin-top: 6px;
	padding: 0 6px;
	border-left: 2px solid #666;
	text-align: center;
	font: bold 11px verdana; color: #666;
}

.gallery .pagelinks em {
	color: #000;
}

.galleryclear {
	clear: both;
}


/* SLIMBOX */

#lbOverlay {
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	cursor: pointer;
}

#lbCenter, #lbBottomContainer {
	position: absolute;
	z-index: 9999;
	overflow: hidden;
	background-color: #fff;
}

.lbLoading {
	background: #fff url(../slimbox/css/loading.gif) no-repeat center;
}

#lbImage {
	position: absolute;
	left: 0;
	top: 0;
	border: 10px solid #fff;
	background-repeat: no-repeat;
}

#lbPrevLink, #lbNextLink {
	display: block;
	position: absolute;
	top: 0;
	width: 50%;
	outline: none;
}

#lbPrevLink {
	left: 0;
}

#lbPrevLink:hover {
	background: transparent url(../slimbox/css/prevlabel.gif) no-repeat 0 15%;
}

#lbNextLink {
	right: 0;
}

#lbNextLink:hover {
	background: transparent url(../slimbox/css/nextlabel.gif) no-repeat 100% 15%;
}

#lbBottom {
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size: 10px;
	color: #666;
	line-height: 1.4em;
	text-align: left;
	border: 10px solid #fff;
	border-top-style: none;
}

#lbCloseLink {
	display: block;
	float: right;
	width: 66px;
	height: 22px;
	background: transparent url(../slimbox/css/closelabel.gif) no-repeat center;
	margin: 5px 0;
	outline: none;
}

#lbCaption, #lbNumber {
	margin-right: 71px;
}

#lbCaption {
	font-weight: bold;
}

und folgendes JavaScript-Tamplare in der Gallery:

 Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript" src="modules/Gallery/templates/jquery/jquery.js"></script>
<script type="text/javascript" src="modules/Gallery/templates/slimbox/js/slimbox2.js"></script>

Die Vorschaubilder sehen dann wie folgt aus:

Aber warum wird das eigentlich nicht quadratische Bild in eine quadratische Form gebracht und mit einem schwarzen Balken links und rechts "aufgefüllt"? Ich finde im CSS-Template nichts, was eine quadratische Form erzwingen würde. Dort ist ja eigentlich eher ein Format vom 64px x 96px für die Klasse .gallery .img vorgesehen.

Was ich auch nicht ganz verstehe, ist daß das DIV mit dem Bild auf eine CSS-Klasse namens .main .gallery .img hört, statt nur auf .gallery .img - kann das mit Template made simple zu tun haben?

Cherry

arbeitet mit CMS/ms

Registriert: 15. Dezember 2010

Beiträge: 529

Re: [GELÖST] Seitenverhältnis der Rahmen der Vorschaubilder des Gallery-Moduls

Du kannst zunächst beim Template in den Optionen etwas drehen:

du kannst Einstellungen machen hier:
Größe des Vorschaubildes (auf Benutzerseite):
Breite:     Höhe:     Skalierungsmethode:
mit der Skalierungsmethode probier einfach aus, was die zusagt.

Dann kannst du im css Bereich vom Template versuchen die width und /oder height Angaben zu ändern oder wegzulassen.
Einfach probieren, wie's am besten paßt.

.gallery .img {
    height: 96px;
    width: 64px;   /* Adjust as you see fit */
    float: left;
    margin: 6px;
    text-align: center;
}

Bonifaz

probiert CMS/ms aus

Ort: Hamburg

Registriert: 09. Februar 2012

Beiträge: 63

Re: [GELÖST] Seitenverhältnis der Rahmen der Vorschaubilder des Gallery-Moduls

Du kannst zunächst beim Template in den Optionen etwas drehen:
[...]
Dann kannst du im css Bereich vom Template versuchen die width und /oder height Angaben zu ändern oder wegzulassen.

Das war es beides nicht, aber ich habe das Problem inzwischen gelöst. Das Haupt-CSS von Template Made Simple hatte bereits Einstellungen für die Gallery mit drin. Warum diese nicht durch das eigene CSS des Moduls übersteuert wurden, weiß ich nicht. Aber ich habe die Einstellungen aus dem Haupt-CSS jetzt auskommentiert, und schon ist alles ok.