SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help working with DreamTemplate code

    I am using this template from www.dreamtemplate.com and have most of it figured out but some things are confusing me. The code creates this picture gallery that you can see on the live demo page. I would like to replace the pictures with my own and at first I thought this was some kind of dynamic link to a gallery of photos but the more I look at it the more it seems like each photo is linked to a specific photo web address. My question is how do I manage this, do I just have to go in and manually change the portfolio filters to ones I want then go through all the portfolio items and link them to the images and change the data filter? I guess I just assumed I would point it to a folder, flickr, or other photo site and have it pull from that. Any help would be appreciated since I am designing this site to demo my video and photo work to try and get a job and cant afford a web designer.
    HTML Code:
          <!-- prettyPhoto Start -->
          <link rel="stylesheet" type="text/css" href="dc_iso_portfolio/prettyPhoto/css/prettyPhoto.css" />
          <script type="text/javascript" src="dc_iso_portfolio/prettyPhoto/js/jquery.prettyPhoto.js"></script> 
          <!-- prettyPhoto END -->
          
          <section id="content" class="dc_iso_container">
            <div class="hero-unit"> <a href="#" id="acolsinit">Default View</a> | <a href="#" id="acols4">4 columns</a> | <a href="#" id="acols3">3 columns</a> | <a href="#" id="acols2">2 columns</a> </div>
            <br />
            <div id="portfolio">
              <ul id="dc_iso_portfolio_filter">
                <li id="f-all" class="active"><a href="#" class="filter" data-filter="*">All</a></li>
                <li><a href="#" class="filter" data-filter=".people">People</a></li>
                <li><a href="#" class="filter" data-filter=".food">Food</a></li>
                <li><a href="#" class="filter" data-filter=".space">Space</a></li>
                <li><a href="#" class="filter" data-filter=".beauty">Beauty</a></li>
                <li><a href="#" class="filter" data-filter=".fantasy">Fantasy</a></li>
                <li><a href="#" class="filter" data-filter=".nature">Nature</a></li>
                <li><a href="#" class="filter" data-filter=".transport">Transport</a></li>
              </ul>
              
              <!-- portfolio items -->
              <section class="row" id="dc_iso_portfolio_items">
                <article class="dc_iso_item" data-fsize="div6" data-tags="food">
                  <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/999999/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/999999/fff/img.png"></a>
                    <div class="item_descr"><b class="dc_iso_item-name icon4">Lorem ipsum</b></div>
                  </div>
                </article>
                <article class="dc_iso_item" data-fsize="div6" data-tags="space">
                  <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/888/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/888/fff/img.png"></a>
                    <div class="item_descr"><b class="name icon1">Lorem ipsum</b></div>
                  </div>
                </article>
                <article class="dc_iso_item" data-fsize="div4" data-tags="beauty,people">
                  <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/777/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/777/fff/img.png"></a>
                    <div class="item_descr"><b class="name icon2">Lorem ipsum</b></div>
                  </div>
                </article>
                <article class="dc_iso_item" data-fsize="div4" data-tags="fantasy">
                  <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/666/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/666/fff/img.png"></a>
                    <div class="item_descr"><b class="name icon3">Lorem ipsum</b></div>
                  </div>
                </article>
                <article class="dc_iso_item" data-fsize="div4" data-tags="nature">
                  <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/555/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/555/fff/img.png"></a>
                    <div class="item_descr"><b class="name icon4">Lorem ipsum</b></div>
                  </div>
                </article>
                <article class="dc_iso_item" data-fsize="div3" data-tags="space">
                  <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/444/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/444/fff/img.png"></a>
                    <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
                  </div>
                </article>
                <article class="dc_iso_item" data-fsize="div3" data-tags="beauty,people">
                  <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/333/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/333/fff/img.png"></a>
                    <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
                  </div>
                </article>
                <article class="dc_iso_item" data-fsize="div3" data-tags="food">
                  <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/222/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/222/fff/img.png"></a>
                    <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
                  </div>
                </article>
                <article class="dc_iso_item" data-fsize="div3" data-tags="nature">
                  <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/111/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/111/fff/img.png"></a>
                    <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
                  </div>
                </article>
                <article class="dc_iso_item" data-fsize="div4" data-tags="transport">
                  <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/000/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/000/fff/img.png"></a>
                    <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
                  </div>
                </article>
                <article class="dc_iso_item" data-fsize="div4" data-tags="beauty">
                  <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/789987/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/789987/fff/img.png"></a>
                    <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
                  </div>
                </article>
                <article class="dc_iso_item" data-fsize="div4" data-tags="fantasy">
                  <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/777ggg/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/777ggg/fff/img.png"></a>
                    <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
                  </div>
                </article>
                <article class="dc_iso_item" data-fsize="div4" data-tags="food,people">
                  <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/123321/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/123321/fff/img.png"></a>
                    <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
                  </div>
                </article>
                <article class="dc_iso_item" data-fsize="div4" data-tags="beauty">
                  <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/321321/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/321321/fff/img.png"></a>
                    <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
                  </div>
                </article>
                <article class="dc_iso_item" data-fsize="div4" data-tags="transport,people">
                  <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/600666/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/600666/fff/img.png"></a>
                    <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
                  </div>
                </article>
                <article class="dc_iso_item" data-fsize="div4" data-tags="food">
                  <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/999/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/999/fff/img.png"></a>
                    <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
                  </div>
                </article>
                <article class="dc_iso_item" data-fsize="div4" data-tags="fantasy">
                  <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/888/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/888/fff/img.png"></a>
                    <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
                  </div>
                </article>
                <article class="dc_iso_item" data-fsize="div4" data-tags="space">
                  <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/777/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/777/fff/img.png"></a>
                    <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
                  </div>
                </article>
                <article class="dc_iso_item" data-fsize="div4" data-tags="food">
                  <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/666/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/666/fff/img.png"></a>
                    <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
                  </div>
                </article>
                <article class="dc_iso_item" data-fsize="div4" data-tags="nature">
                  <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/555/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/555/fff/img.png"></a>
                    <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
                  </div>
                </article>
                <article class="dc_iso_item" data-fsize="div4" data-tags="fantasy">
                  <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/444/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/444/fff/img.png"></a>
                    <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
                  </div>
                </article>
                <article class="dc_iso_item" data-fsize="div4" data-tags="transport">
                  <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/333/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/333/fff/img.png"></a>
                    <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
                  </div>
                </article>
                <article class="dc_iso_item" data-fsize="div4" data-tags="food">
                  <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/222/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/222/fff/img.png"></a>
                    <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
                  </div>
                </article>
                <article class="dc_iso_item" data-fsize="div4" data-tags="transport">
                  <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/111/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/111/fff/img.png"></a>
                    <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
                  </div>
                </article>
              </section>
            </div>
          </section>
          <br />
          <br />
          <script type="text/javascript" src="dc_iso_portfolio/js/jquery.isotope.min.js"></script> 
          <script type="text/javascript" src="dc_iso_portfolio/js/dc_iso_portfolio.js"></script> 
          
          <!-- required for prettyphoto lightbox --> 
          
          <script type="text/javascript" charset="utf-8">
      $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'dark_square',slideshow:8000, autoplay_slideshow: false, social_tools: false,show_title: true, allow_resize: true});
      });
    </script> 
          <!-- required for prettyphoto lightbox --> 
    	<!-- end content -->

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,139
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    That template is nothing but static HTML. Changing photos and categories will need to be done manually. Populating the gallery from a folder or flickr automatically is a whole other can of worms that would require server-side programming.
    The only code I hate more than my own is everyone else's.

  3. #3
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply, at least now I know. The reason I was confused also about it being automatic is because the template loads this flickr feed jquery script on every page in the template html head and I was hoping that had something to do with it. I guess that is just there from some other page they made that may have had a actual flicker feed in it.

    So to decode a part of the element could I confirm my understanding here
    HTML Code:
     <article class="dc_iso_item" data-fsize="div6" data-tags="space">
                  <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/888/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/888/fff/img.png"></a>
                    <div class="item_descr"><b class="name icon1">Lorem ipsum</b></div>
    so obviously I replace the http address with one relative to my photo but I see 2 in there so is one a thumbnail and the other the full size image?

    Also what does the "rel="prettyPhoto[gallery1}' mean. Is that what makes it the adjustable by category on the page?

    Anthony

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,139
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by carn723
    so obviously I replace the http address with one relative to my photo but I see 2 in there so is one a thumbnail and the other the full size image?
    correct,

    The thumbnail would be the one inside the img tag and the a href is the full size image shown in the lightbox.

    Quote Originally Posted by carn723
    Also what does the "rel="prettyPhoto[gallery1]' mean. Is that what makes it the adjustable by category on the page?
    That would be the collection (gallery) that the image corresponds. This exists probably to support multiple galleries and flag the image for inclusion in the gallery.

    The category looks to be controlled by the value of data-tags="foobar". When you click on a gallery category link the script hides all the images that are not tagged with the clicked category.

    Example, add sports category:

    HTML Code:
              <ul id="dc_iso_portfolio_filter">
                <li id="f-all" class="active"><a href="#" class="filter" data-filter="*">All</a></li>
                <li><a href="#" class="filter" data-filter=".people">People</a></li>
                <li><a href="#" class="filter" data-filter=".food">Food</a></li>
                <li><a href="#" class="filter" data-filter=".space">Space</a></li>
                <li><a href="#" class="filter" data-filter=".beauty">Beauty</a></li>
                <li><a href="#" class="filter" data-filter=".fantasy">Fantasy</a></li>
                <li><a href="#" class="filter" data-filter=".nature">Nature</a></li>
                <li><a href="#" class="filter" data-filter=".transport">Transport</a></li>
    
                <!-- the new sports category link -->
                <li><a href="#" class="filter" data-filter=".sports">Sports</a></li>
              </ul>
    An image tagged as part of the sports category.

    HTML Code:
     <article class="dc_iso_item" data-fsize="div6" data-tags="sports"> <!-- note the sports category inside the attribute -->
                  <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/888/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/888/fff/img.png"></a>
                    <div class="item_descr"><b class="name icon1">Lorem ipsum</b></div>
    The only code I hate more than my own is everyone else's.

  5. #5
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oddz thanks a bunch for explaining that to me and for taking the time to put in examples. It really helps me wrap my head around this and I hope some day I can understand this all and not need to start with templates.

    I actually do have one final question if not too much trouble. In the contact page here it appears to have two columns for the body content. I noticed when this is viewed on a iphones smaller screen portrait style or if the browser window is scaled down horizontally the content reaches a point where the columns merge and the text starts to overlap. I understand this problem to be from the columns the style sheet is setting up and the fact that the left column has the text aligned to left and the right column has the text aligned to right. My question is how do I stop them at a point before they merge so that any scaling past that point would include a scroll bar horizontally or stack the content in some nature to avoid this problem?

    If there is anything I can supply to help show the problem I would be happy to but wasn't sure what code to supply. I will note this specific template does include separate code at points to designate different device screen sizes and I imagine that is what is driving certain aspects of this layout.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •