✔ Bilder in verschiedenen Größen positionieren

Moodler · 4. Oktober 2012

Hallo liebe Tutorials.de User.

Ich habe ein großes Problem und hoffe, dass ihr mir helfen könnt. Ich bin releativ fit in HTML und habe auch schon einige Webseiten erstellt, wenn es aber um das Thema CSS und Stylesheets etc. geht, bin ich eher unbedarft.

Ich habe folgendes vor: Ich möchte auf meiner Webseite mit dem Script Ubergallery (http://www.ubergallery.net/) eine Gallerie erzeugen.

In der index.php Datei der Seite wird die erzeugte Gallerie mit dem Tag

PHP:

 <?php $gallery->createGallery('gallery-images'); ?>

erzeugt und eingeladen.

Die Bilder werden meines Erachtens nach per CSS im Stylesheet angeordnet: Die CSS Datei ist dazu wie folgt definiert:

Code:

/* -------------------------------------------------------------------------- */
/* -----| GALLERY LIST |----------------------------------------------------- */
/* -------------------------------------------------------------------------- */

#galleryList {
    margin: 0;
    padding: 0 4px;
}

#galleryList li {
    display: inline-block;
    float: left;
    list-style: none;
    margin: 5px 6px;
    padding: 0;
}

#galleryList li a {
    background-color: #FFF;
    border: 1px solid #CCC;
    display: block;
    padding: 4px;
}

#galleryList li a:hover {
    border-color: #999;
}

#galleryList li a img {
    border: none;
}

Dadurch wird folgender HTML-Code in der ausgegebenen Datei erzeugt:

HTML:

<div id="galleryWrapper">
    <h1>UberGallery</h1>
    <div class="line"></div>
    
        
    <div id="galleryListWrapper">
        <ul id="galleryList" class="clearfix">
                            <li><a href="gallery-images/4488826_6f061c99ec_b_d.jpg" title="4488826 6f061c99ec b d" rel="colorbox"><img src="resources/cache/100x100-75-8b933c444bd3d1fc2807b4a766c9db0a.jpg" alt="4488826 6f061c99ec b d"/></a></li>
                            <li><a href="gallery-images/7023222_87b23bb0cd_d.jpg" title="7023222 87b23bb0cd d" rel="colorbox"><img src="resources/cache/100x100-75-a5495c24540261d2a63e4b84e7de78d5.jpg" alt="7023222 87b23bb0cd d"/></a></li>
                            <li><a href="gallery-images/20952852_82e90a3b68_o_d.jpg" title="20952852 82e90a3b68 o d" rel="colorbox"><img src="resources/cache/100x100-75-c3b25c9a073b97fa0e5f37dea0c51c0d.jpg" alt="20952852 82e90a3b68 o d"/></a></li>
                            <li><a href="gallery-images/94767733_b9863ff689_b_d.jpg" title="94767733 b9863ff689 b d" rel="colorbox"><img src="resources/cache/100x100-75-cdd8b7e92915a349f0c6c70792400324.jpg" alt="94767733 b9863ff689 b d"/></a></li>
                            <li><a href="gallery-images/117630263_e99fd48e32_b_d.jpg" title="117630263 e99fd48e32 b d" rel="colorbox"><img src="resources/cache/100x100-75-23ed47ca2f0d8fe8c87a5a6e5bbf55b9.jpg" alt="117630263 e99fd48e32 b d"/></a></li>
                            <li><a href="gallery-images/144692464_f0053e1093_z_d.jpg" title="144692464 f0053e1093 z d" rel="colorbox"><img src="resources/cache/100x100-75-5d7c0e39d5d9a11839b6bba7ae978cdf.jpg" alt="144692464 f0053e1093 z d"/></a></li>
                            <li><a href="gallery-images/153787007_197af15ce4_b_d.jpg" title="153787007 197af15ce4 b d" rel="colorbox"><img src="resources/cache/100x100-75-e789b8628a1faaa3502b445c671d61cc.jpg" alt="153787007 197af15ce4 b d"/></a></li>
                            <li><a href="gallery-images/186655895_28fc2d82ce_b_d.jpg" title="186655895 28fc2d82ce b d" rel="colorbox"><img src="resources/cache/100x100-75-b47e804a2c4c98b9cc3c241631c4b94e.jpg" alt="186655895 28fc2d82ce b d"/></a></li>
                            <li><a href="gallery-images/187485628_3cb9d94f9b_o_d.jpg" title="187485628 3cb9d94f9b o d" rel="colorbox"><img src="resources/cache/100x100-75-73f76e5963e49e517eaa98e6d60fffcf.jpg" alt="187485628 3cb9d94f9b o d"/></a></li>
                            <li><a href="gallery-images/214879279_c937ada1d5_b_d.jpg" title="214879279 c937ada1d5 b d" rel="colorbox"><img src="resources/cache/100x100-75-ef75534613a288cbe1d3cbaa34aa0c1c.jpg" alt="214879279 c937ada1d5 b d"/></a></li>
                            <li><a href="gallery-images/327559662_5dae865e69_z_d.jpg" title="327559662 5dae865e69 z d" rel="colorbox"><img src="resources/cache/100x100-75-787e0d2084cc38ac19587fc343df5e38.jpg" alt="327559662 5dae865e69 z d"/></a></li>
                            <li><a href="gallery-images/328202856_5330fd134a_z_d.jpg" title="328202856 5330fd134a z d" rel="colorbox"><img src="resources/cache/100x100-75-6704dba0fd8ebae54bd7196a0741dee6.jpg" alt="328202856 5330fd134a z d"/></a></li>
                            <li><a href="gallery-images/339763584_d3511b63a3_b_d.jpg" title="339763584 d3511b63a3 b d" rel="colorbox"><img src="resources/cache/100x100-75-5895f1dc4b04e0feb30c361716257194.jpg" alt="339763584 d3511b63a3 b d"/></a></li>
                            <li><a href="gallery-images/354864230_a8fe1fe864_o_d.jpg" title="354864230 a8fe1fe864 o d" rel="colorbox"><img src="resources/cache/100x100-75-4c345ac96475075915b87e02b7cb1ad0.jpg" alt="354864230 a8fe1fe864 o d"/></a></li>
                            <li><a href="gallery-images/354864240_96e9b003cf_o_d.jpg" title="354864240 96e9b003cf o d" rel="colorbox"><img src="resources/cache/100x100-75-3fc2ee092c8be3e8ece55719041f6088.jpg" alt="354864240 96e9b003cf o d"/></a></li>
                            <li><a href="gallery-images/382329525_bc85bc1309_z_d.jpg" title="382329525 bc85bc1309 z d" rel="colorbox"><img src="resources/cache/100x100-75-4178bdd76744b5b0b46ebe36542beaa5.jpg" alt="382329525 bc85bc1309 z d"/></a></li>
                            <li><a href="gallery-images/385653748_774c009624_b_d.jpg" title="385653748 774c009624 b d" rel="colorbox"><img src="resources/cache/100x100-75-ceaf8dd468296de75f6e137ea70787fe.jpg" alt="385653748 774c009624 b d"/></a></li>
                            <li><a href="gallery-images/457209657_64ecc69ace_z_d.jpg" title="457209657 64ecc69ace z d" rel="colorbox"><img src="resources/cache/100x100-75-abf1088da179eb4066043137e8a5f4a7.jpg" alt="457209657 64ecc69ace z d"/></a></li>
                            <li><a href="gallery-images/539719106_a8ef607268_b_d.jpg" title="539719106 a8ef607268 b d" rel="colorbox"><img src="resources/cache/100x100-75-e05e31535415850eb598f7fc94ebf683.jpg" alt="539719106 a8ef607268 b d"/></a></li>
                            <li><a href="gallery-images/560380352_5353d7b089_z_d.jpg" title="560380352 5353d7b089 z d" rel="colorbox"><img src="resources/cache/100x100-75-b95a097e4245a889359211c8a073d512.jpg" alt="560380352 5353d7b089 z d"/></a></li>
                            <li><a href="gallery-images/634556562_034ce1ae60_o_d.jpg" title="634556562 034ce1ae60 o d" rel="colorbox"><img src="resources/cache/100x100-75-d6b06034399b8af4a7bf16770cd09798.jpg" alt="634556562 034ce1ae60 o d"/></a></li>
                            <li><a href="gallery-images/838111057_1fe8b4aa79_o_d.jpg" title="838111057 1fe8b4aa79 o d" rel="colorbox"><img src="resources/cache/100x100-75-1ebb364fac27fa21688a98b8b2b279c5.jpg" alt="838111057 1fe8b4aa79 o d"/></a></li>
                            <li><a href="gallery-images/1015023385_58ce654405_z_d.jpg" title="1015023385 58ce654405 z d" rel="colorbox"><img src="resources/cache/100x100-75-0e4bca7e178e6410041ca19c28112a45.jpg" alt="1015023385 58ce654405 z d"/></a></li>
                            <li><a href="gallery-images/1060076785_48ce88e86d_b_d.jpg" title="1060076785 48ce88e86d b d" rel="colorbox"><img src="resources/cache/100x100-75-302fe4259aa23616bd8e96a22ccafc5d.jpg" alt="1060076785 48ce88e86d b d"/></a></li>
                    </ul>
    </div>

Das funktioniert auch alles ganz gut. (--> siehe http://www.ubergallery.net/demo/)

Ich möchte das Design aber dahingehend anpassen, dass die Thumbnails bzw. die Gallerie das folgende Layout hat: http://s7.directupload.net/images/121004/urljaask.png

Und da weiß ich absolut nicht, wie ich das realisieren kann!? Die Bilder des gewünschten Layouts sind 145 x 95 px (kleine Bilder) und 300x200 px (große Bilder) groß.

Wie kann ich die CSS Datei so umbauen, dass dieses Layout mit dem oben genannten Gallerie-Script funktioniert? Meines Meinung nach sind da nur CSS Anpassungen nötig. Aber da bin ich mir absolut nicht sicher und hoffe auf Eure Hilfe.

Vielen Danl im voraus

Moodler

Jan-Frederik Stieler · 4. Oktober 2012

Hi,
beschäftige dich mal mit float (umfliessen). Eventuell bekommst du dies damit hin.
Fall du genau weißt welche Bilder du hast und wei die angeordnet werden, also nicht dynamisch dann kannst du deine li auch per relativer oder absoluter Positionierung positionieren.
Oder du verwendest ein javascript Plugin wie Masonry, vgrid oder Isotope.

Viele Grüße

tombe · 5. Oktober 2012

Ich denke nicht das du dieses Layout alleine mit CSS gestalten kannst.
Da der Aufbau der Seite so wie es aussieht mit Hilfe von PHP vorgenommen wird, musst du vielleicht da ansetzen.
Um ehrlich zu sein wäre das bei mir ein Fall für eine Tabelle. Da wäre fas recht einfach zu lösen.

Moodler · 5. Oktober 2012

Danke erstmal für die Hilfe und die Links. Allerdings bringt mich das nicht wirklich weiter.

Die Thumbnails werden automatisch aus Bildern aus seinem Ordner auf dem Webserver erzeugt und dann angezeigt. Ich wüsste nicht, wie ich das mit den javascript Plugins wie Masonry, vgrid oder Isotope realsieren könnte. :-(

Die Seite von der der Screenshot ist lautet: http://quickgallery.jv2.net/demo3/

Vielleicht gibt Euch das - und damit auch mir - Aufschluss darüber, wie das Umgesetzt wurde!?

djheke · 6. Oktober 2012

So vielleicht?
http://www.gipspferd.de/forumhilfe/multicolumns/

Moodler · 6. Oktober 2012

djheke hat gesagt.:
So vielleicht?
http://www.gipspferd.de/forumhilfe/multicolumns/

Ja, genauso habe ich mir das gedacht. Allerdings muss ich gestehen, dass ich den Quellcode, den du da erstellt hast nicht wirklich verstehe. So wie es jetzt ist muss ich den Code selbst erzeugen, oder? Wie kann ich in der Liste Bilder in einem Ordner anzeigen lassen oder noch besser die vom Script dynamisch erzeugten?

Das Script erstellt von Bildern, die ich in einen Ordner Lade Thumbnalis in einem anderen Ordner und diese werden in einer Gallerienansicht mit einem Link auf das Originalbild angezeigt. Im HTML Code sieht das so aus:

Code:

 <div id="galleryListWrapper">
        <ul id="galleryList" class="clearfix">
                            <li><a href="gallery-images/4488826_6f061c99ec_b_d.jpg" title="4488826 6f061c99ec b d" rel="colorbox"><img src="resources/cache/100x100-75-8b933c444bd3d1fc2807b4a766c9db0a.jpg" alt="4488826 6f061c99ec b d"/></a></li>

Wie kann ich das jetzt so umbauen, dass dein erstelltes Layout erzeugt wird? Muss ich einfach die CSS Datei ändern? Wie gesagt, ich habe leider nicht sooo viel Ahnung von CSS und dem Umgang mit dynamischen Content. :-/

Vielen Dank schon mal für Eure tolle Unterstützung!

Jan-Frederik Stieler · 6. Oktober 2012

Hallo,
auch wenn ich die Erwartungen jetzt etwas dämpfen muss.
Hier wird eine CSS3 Spaltenlösung angeboten. Leider ist nach wie vor nicht ganz klar welche technologie hier am Schluss in die Endversion von CSS3 einfließen wird. Es gibt hier min. zwei parallele Entwicklungen mit unterschiedlichem Ansatz.
Also ist eigentlich davon abzuraten diese Lösung jetzt schon einzusetzen.

Also bezüglich einer JS-Lösung. Du kannst doch in PHP eine HTML-Struktur aufbauen die eines der Plugin benötigt und in dieser dann das PHP zum einlesen der Bilder aufrufen.

Viele Grüße

djheke · 7. Oktober 2012

Na denn eben ohne multicolumns
http://www.gipspferd.de/forumhilfe/multicolumns/bsp_2.php

Hinweis: Bin k e i n PHP Experte!

Moodler · 9. Oktober 2012

Super! Ganz toll. Dafür, dass du kein PHP Experte bist, macht das Script bzw. die Seite aber genau das, was ich haben wollte. Jetzt habe ich nur noch ein letztes (vielleicht kleines) Problem.

Wie gesagt würde ich gerne das Ubergallery-Script benutzen. Dieses erzeugt die Thumbnails mit einem zufälligen Dateinamen (ich glaube, dass es ein MD5 hash aus dem Ursprungsdateinamen ist:

140x95-75-3b3f6ddf384f1f60c5ebfc0af4e9de3e.jpg
140x95-75-9fd35b689a0d7ee8a8209ac8426aeea3.jpg
usw.

Die vorderen Stellen sind immer gleich und ergeben sich aus der Bildgröße und der eingestellten Qualität. Der Rest ist zufällig. Wie kann ich das PHP Script so verändern, dass es mit den zufälligen Dateinamen zurecht kommt? Und vor allem, wie kann ich dann gewährleisten, dass das Thumbnails auf die Ursprungsdatei (das Originalbild) mit einem Dateinamen ala IMG_4532.jpg verlinkt!?

Vielen Dank weiterhin.

PS. Ich hätte nie gedacht, dass mein Vorhaben so aufwändig ist und es so viele Hürden gibt. Ich bin aber begeistern, wie gut ihr diese meistert******

djheke · 9. Oktober 2012

Also, über MD5 musst du dir keine Gedanken machen. Wenn du eigene Bilder im Image Verz. hast, werden die richtigen Dateinamen im href Attribut eingetragen. Aber mein Beispiel kannst du so nicht für deine Galerie verwenden. Dir zuliebe habe ich mal diese Galerie installiert. Das sind meine Änderungen.

1. GalleryConfig.ini

PHP:

; This is the default UberGallery config file. Copy this file to galleryConfig.php
; and change the following values to customize your gallery.

[basic_settings]

    cache_expiration    = 0             ; Cache expiration time (in minutes)

    enable_pagination   = true         ; Set to 'true' to enable pagination
    
    paginator_threshold = 10            ; Maximum number of pages to display
                                        ; in the paginator before truncating

    thumbnail_size      = 200         ;FÜR DIESE BEISPIEL GEÄNDERT 

    theme_name          = gipspferd     ; EIGENES THEME


[advanced_settings]

    cache_directory     = cache         ; Cache directory name


    images_per_page     = 30            ; 30 BILDER PRO SEITE

                                        ; enable_pagination be set to 'true'

    images_sort_by      = natcasesort   ; Method used to sort image array
                                        ; Available sorting options include:
                                        ; asort, arsort, ksort, krsort,
                                        ; natcasesort, natsort, shuffle

2. EIGENES THEME ERSTELLT (GIPSPFERD)

3. INDEX.PHP ANPASSEN

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>UberGallery</title>
    <link rel="shortcut icon" href="<?php echo THEMEPATH; ?>/images/favicon.png" />
    
    <link rel="stylesheet" type="text/css" href="resources/colorbox/5/colorbox.css" />      
    <link rel="stylesheet" type="text/css" href="<?php echo THEMEPATH; ?>/style.css" />
      
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript" src="resources/colorbox/jquery.colorbox.js"></script>
    
    <script type="text/javascript">
        $(document).ready(function(){
            $("a[rel='colorbox']").colorbox({maxWidth: "90%", maxHeight: "90%", opacity: ".5"});
        });
    </script>
    
  
    
</head>
<body>

<!-- Start UberGallery v<?php echo UberGallery::VERSION; ?> - Copyright (c) <?php echo date('Y'); ?> Chris Kankiewicz (http://www.ChrisKankiewicz.com) -->
<div id="galleryWrapper">
    <h1>UberGallery</h1>
    <?php if($gallery->getSystemMessages()): ?>
        <ul id="systemMessages">
            <?php foreach($gallery->getSystemMessages() as $message): ?>
                <li class="<?php echo $message['type']; ?>">
                    <?php echo $message['text']; ?>
                </li>
            <?php endforeach; ?>
        </ul>
    <?php endif; ?>
            <?php foreach ($galleryArray['images'] as $image): 


//Hinzugefügt
$g++;
if ( $x==0) {
echo "<ul>\n";
}  
$x++;
if($g==1 || $g==6 || $g==13 || $g==18 || $g==25 || $g==30)  { $gross='class="gross"';$size='width="205" height="155"';}  else { $gross="";$size='width="100" height="75"';}
//ende
?>

      <li <?php echo $gross;  //Hinzugefügt?>><a href="<?php echo $image['file_path']; ?>" title="<?php echo $image['file_title']; ?>" rel="colorbox"><img src="<?php echo $image['thumb_path']; ?>" <?php echo $size;  //Hinzugefügt?> alt="<?php echo $image['file_title']; ?>"/></a></li>
<?php if ($x == 10 || (count($galleryArray['images'])) == $g)  {echo "</ul>\n"; $x=0;} //Hinzugefügt
            ;endforeach; ?>
</div>    
   
    <div id="galleryFooter">
    
        <?php if ($galleryArray['stats']['total_pages'] > 1): ?>
        <ul id="galleryPagination">
            
            <?php foreach ($galleryArray['paginator'] as $item):?>
                
                <li class="<?php echo $item['class']; ?>">
                    <?php if (!empty($item['href'])): ?>
                        <a href="<?php echo $item['href']; ?>"><?php echo $item['text']; ?></a>
                    <?php else: ?><?php echo $item['text']; ?><?php endif; ?>
                </li>
         
            <?php endforeach; ?>
        
    </ul>
        <?php endif; ?>
        
        <div id="credit">Powered by, <a href="http://www.ubergallery.net">UberGallery</a></div>
</div>

<!-- End UberGallery - Dual licensed under the MIT & GPL license -->

</body>
</html>

Achte bitte darauf, dass hier einige id's entfernt wurden. Ach und damit du nicht in der gallery.php rum fummeln musst, werden die gewünschten Bildgrößen im <img> eingetragen.

4. CSS ANPASSEN

Code:

body {
 background:#444;
}

#galleryWrapper {
  margin: 0 auto;
  padding:5px 0 5px 5px;
  width: 630px;
  background:#fff;
  overflow:hidden;
 }

ul {
 width:210px; /* Bildbreite + margin */
 float:left;
 margin:0;
 padding:0;
 list-style:none;
}

li {
 float:left;
 margin:5px 5px 0 0;
 padding:0;
}

li img {
 display:block;
}

h1 {
 margin:0 5px 0 0;
 padding:20px;
 font-size:150%;
 color:#fff;
 background:#09c;
}

#galleryFooter {
  margin:0 auto;
  width: 625px;
  border:5px solid #fff;
  border-top:none;
  background:#09c;
  clear:both;
  overflow:hidden;
} 

#galleryFooter a {
 text-decoration:none;
 color:#fff;
}  
 
#galleryPagination {
 padding:20px;
 float:left;
 color:#fff;
}
 
#credit {
 padding:20px;
 float:right;
 color:#fff;
}           
#credit a {
 text-decoration:underline;
}

.current {
 color:#a33;
}
.inactive {
 display:none;
}

.title {
 margin-right:20px;
}

Ergebnisshttp://www.gipspferd.de/forumhilfe/UberGallery/?page=1

5. PHP Profis dürfen schmunzeln.

✔ Bilder in verschiedenen Größen positionieren

Moodler

Grünschnabel

Jan-Frederik Stieler

Monsterator

tombe

Erfahrenes Mitglied

Moodler

Grünschnabel

djheke

Erfahrenes Mitglied

Moodler

Grünschnabel

Jan-Frederik Stieler

Monsterator

djheke

Erfahrenes Mitglied

Moodler

Grünschnabel

djheke

Erfahrenes Mitglied

Neue Beiträge