04. 10. 2012, 14:54

Hallo an alle,

da mir dieses Forum bisher in vielen Fragen sehr gute Lösungen gebracht hat, möchte ich folgendes die Community fragen:

Ich habe vor aus diesem Portfolio (http://www.derby-web-design-agency.co.uk/themes/response/portfolio.html) ein FCE zu machen, mit dem man eine Gallerie für Fotos erstellen kann.

Wie man bei diesem Portfolio sehen kann, kann man in den unterschiedlichen Kategorien auswählen, was man angezeigt bekommen möchte.

Hier der Auszugsquelltext des Porfolios:

  1. <!-- Start Box -->
  2.         <div class="boxes-full">
  3.  
  4.         	<div class="boxes-padding fullpadding">
  5.  
  6.                 <!-- Start None Split Section -->
  7.             	<div class="splitnone">
  8.  
  9.                     <div id="portfolio-filter-choice"><a href="portfolio-2-column.html" title="2 Column Portfolio"><img src="images/2column.png" alt="2 Column Portfolio" width="25" height="25"></a> <a href="portfolio-3-column.html" title="3 Column Portfolio"><img src="images/3column.png" alt="3 Column Portfolio" width="25" height="25"></a> <a href="portfolio.html" title="4 Column Portfolio"><img src="images/4column.png" alt="4 Column Portfolio" width="25" height="25"></a></div>
  10.  
  11.                 	<!-- Start Portfolio Filter -->
  12.                	  <div id="portfolio-filter">
  13.  
  14.                     	<ul>
  15.  
  16.                             <li><strong>Filter: </strong></li>
  17.                             <li><a href="#portfolio-filter" title="All" class="orangebutton smallrectange" data-filter="*">show all</a></li>
  18.                         	<li><a href="#portfolio-filter" title="Web Design" class="orangebutton smallrectange" data-filter=".web">Web Design</a></li>
  19.                             <li><a href="#portfolio-filter" title="Graphic Design" class="orangebutton smallrectange" data-filter=".graphic">Graphic Design</a></li>
  20.                             <li><a href="#portfolio-filter" title="Print Design" class="orangebutton smallrectange" data-filter=".print">Print Design</a></li>
  21.                             <li><a href="#portfolio-filter" title="Logo Design" class="orangebutton smallrectange" data-filter=".logo">Logo Design</a></li>
  22.  
  23.                         </ul>
  24.  
  25.                     </div>
  26.                     <!-- End Portfolio Filter -->
  27.  
  28.                 </div>
  29.             	<!-- End None Split Section -->
  30.  
  31.             </div>
  32.  
  33.             <span class="box-arrow"> </span>
  34.  
  35.         </div>
  36.         <!-- End Box -->
  37.  
  38.         <!-- Start Box -->
  39.         <div class="boxes-full">
  40.  
  41.         	<div class="boxes-padding fullpadding">
  42.  
  43.                 <!-- Start None Split Section -->
  44.             	<div class="splitnone">
  45.  
  46.                 	<div id="portfolio-container">
  47.  
  48.                     	<!-- Start 4 column portfolio -->
  49.                         <div class="element web">
  50.  
  51.                         	<div class="portfoliowrap">
  52.  
  53.                                 <div class="title">Tuts Premium<span class="titlearrow"></span></div>
  54.                                 <div class="portfolioimage"><a href="images/latest-projects/larger-images/largeimage.jpg" rel="prettyPhoto" title="Lorem ipsum dolor sit amet"><img src="images/latest-projects/project01.jpg" alt="Lorem ipsum dolor sit amet" /></a></div>
  55.                                 <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ipsum nunc<span class="textarrow"></span></div>
  56.  
  57.                             </div>
  58.  
  59.                         </div>
  60.  
  61.                         <div class="element graphic">
  62.  
  63.                         	<div class="portfoliowrap">
  64.  
  65.                                 <div class="title">Themeforest<span class="titlearrow"></span></div>
  66.                                 <div class="portfolioimage"><a href="images/latest-projects/larger-images/largeimage.jpg" rel="prettyPhoto" title="Lorem ipsum dolor sit amet"><img src="images/latest-projects/project02.jpg" alt="Lorem ipsum dolor sit amet" /></a></div>
  67.                                 <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ipsum nunc<span class="textarrow"></span></div>
  68.  
  69.                             </div>
  70.  
  71.                         </div>
  72.  
  73.                         <div class="element logo">
  74.  
  75.                         	<div class="portfoliowrap">
  76.  
  77.                                 <div class="title">Graphicriver<span class="titlearrow"></span></div>
  78.                                 <div class="portfolioimage"><a href="images/latest-projects/larger-images/largeimage.jpg" rel="prettyPhoto" title="Lorem ipsum dolor sit amet"><img src="images/latest-projects/project03.jpg" alt="Lorem ipsum dolor sit amet" /></a></div>
  79.                                 <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ipsum nunc<span class="textarrow"></span></div>
  80.  
  81.                             </div>
  82.  
  83.                         </div>
  84.  
  85.                         <div class="element print">
  86.  
  87.                         	<div class="portfoliowrap">
  88.  
  89.                                 <div class="title">Tuts Premium<span class="titlearrow"></span></div>
  90.                                 <div class="portfolioimage"><a href="images/latest-projects/larger-images/largeimage.jpg" rel="prettyPhoto" title="Lorem ipsum dolor sit amet"><img src="images/latest-projects/project01.jpg" alt="Lorem ipsum dolor sit amet" /></a></div>
  91.                                 <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ipsum nunc<span class="textarrow"></span></div>
  92.  
  93.                             </div>
  94.  
  95.                         </div>
  96.  
  97.                         <div class="element web">
  98.  
  99.                         	<div class="portfoliowrap">
  100.  
  101.                                 <div class="title">Tuts Premium<span class="titlearrow"></span></div>
  102.                                 <div class="portfolioimage"><a href="images/latest-projects/larger-images/largeimage.jpg" rel="prettyPhoto" title="Lorem ipsum dolor sit amet"><img src="images/latest-projects/project02.jpg" alt="Lorem ipsum dolor sit amet" /></a></div>
  103.                                 <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ipsum nunc<span class="textarrow"></span></div>
  104.  
  105.                             </div>
  106.  
  107.                         </div>
  108.  
  109.                         <div class="element web">
  110.  
  111.                         	<div class="portfoliowrap">
  112.  
  113.                                 <div class="title">Themeforest<span class="titlearrow"></span></div>
  114.                                 <div class="portfolioimage"><a href="images/latest-projects/larger-images/largeimage.jpg" rel="prettyPhoto" title="Lorem ipsum dolor sit amet"><img src="images/latest-projects/project03.jpg" alt="Lorem ipsum dolor sit amet" /></a></div>
  115.                                 <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ipsum nunc<span class="textarrow"></span></div>
  116.  
  117.                             </div>
  118.  
  119.                         </div>
  120.  
  121.                         <div class="element graphic web">
  122.  
  123.                         	<div class="portfoliowrap">
  124.  
  125.                                 <div class="title">Graphicriver<span class="titlearrow"></span></div>
  126.                                 <div class="portfolioimage"><a href="images/latest-projects/larger-images/largeimage.jpg" rel="prettyPhoto" title="Lorem ipsum dolor sit amet"><img src="images/latest-projects/project01.jpg" alt="Lorem ipsum dolor sit amet" /></a></div>
  127.                                 <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ipsum nunc<span class="textarrow"></span></div>
  128.  
  129.                             </div>
  130.  
  131.                         </div>
  132.  
  133.                         <div class="element Web">
  134.  
  135.                         	<div class="portfoliowrap">
  136.  
  137.                                 <div class="title">Tuts Premium<span class="titlearrow"></span></div>
  138.                                 <div class="portfolioimage"><a href="images/latest-projects/larger-images/largeimage.jpg" rel="prettyPhoto" title="Lorem ipsum dolor sit amet"><img src="images/latest-projects/project02.jpg" alt="Lorem ipsum dolor sit amet" /></a></div>
  139.                                 <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ipsum nunc<span class="textarrow"></span></div>
  140.  
  141.                             </div>
  142.  
  143.                         </div>
  144.  
  145.                         <div class="element web">
  146.  
  147.                         	<div class="portfoliowrap">
  148.  
  149.                                 <div class="title">Tuts Premium<span class="titlearrow"></span></div>
  150.                                 <div class="portfolioimage"><a href="images/latest-projects/larger-images/largeimage.jpg" rel="prettyPhoto" title="Lorem ipsum dolor sit amet"><img src="images/latest-projects/project03.jpg" alt="Lorem ipsum dolor sit amet" /></a></div>
  151.                                 <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ipsum nunc<span class="textarrow"></span></div>
  152.  
  153.                             </div>
  154.  
  155.                         </div>
  156.  
  157.                         <div class="element web">
  158.  
  159.                         	<div class="portfoliowrap">
  160.  
  161.                                 <div class="title">Themeforest<span class="titlearrow"></span></div>
  162.                                 <div class="portfolioimage"><a href="images/latest-projects/larger-images/largeimage.jpg" rel="prettyPhoto" title="Lorem ipsum dolor sit amet"><img src="images/latest-projects/project01.jpg" alt="Lorem ipsum dolor sit amet" /></a></div>
  163.                                 <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ipsum nunc<span class="textarrow"></span></div>
  164.  
  165.                             </div>
  166.  
  167.                         </div>
  168.  
  169.                         <div class="element graphic web">
  170.  
  171.                         	<div class="portfoliowrap">
  172.  
  173.                                 <div class="title">Graphicriver<span class="titlearrow"></span></div>
  174.                                 <div class="portfolioimage"><a href="images/latest-projects/larger-images/largeimage.jpg" rel="prettyPhoto" title="Lorem ipsum dolor sit amet"><img src="images/latest-projects/project02.jpg" alt="Lorem ipsum dolor sit amet" /></a></div>
  175.                                 <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ipsum nunc<span class="textarrow"></span></div>
  176.  
  177.                             </div>
  178.  
  179.                         </div>
  180.  
  181.                         <div class="element Web">
  182.  
  183.                         	<div class="portfoliowrap">
  184.  
  185.                                 <div class="title">Tuts Premium<span class="titlearrow"></span></div>
  186.                                 <div class="portfolioimage"><a href="images/latest-projects/larger-images/largeimage.jpg" rel="prettyPhoto" title="Lorem ipsum dolor sit amet"><img src="images/latest-projects/project03.jpg" alt="Lorem ipsum dolor sit amet" /></a></div>
  187.                                 <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ipsum nunc<span class="textarrow"></span></div>
  188.  
  189.                             </div>
  190.  
  191.                         </div>
  192.                         <!-- End 4 column portfolio -->
  193.  
  194.                     </div>
  195.  
  196.                 </div>
  197.             	<!-- End None Split Section -->
  198.  
  199.             </div>
  200.  
  201.             <span class="box-arrow"></span>
  202.  
  203.         </div>
  204.         <!-- End Box -->

Ich denke, es ist nicht ganz einfach. Deswegen frage ich ja hier nach.

Ich bräuchte auch nicht die Spaltenauswahl. sonder nur die Kategorieauswahl.

Die Bilder sollen dann per flickr oder Picasaweb übernommen werden.

Kennt sich jemand damit aus? Oder hat jemand Typo3-spezifisch so etwas schon einmal gesehen?

Wer kann helfen?