inFocus: Creating "Gallery" from a set of Photos

resolved (87 posts) (18 voices)

  1. Reza_K
    Member

    HI,

    I just recently purchased and started configuring the inFocus template. Beautiful design BTW!

    The purpose of of my site will be to display/share a large number of photo galleries grouped under different portfolios. So ... I'm looking to better understand the method to "generate photo galleries from sets of photos".

    I just don't see where I go and what I do to create a "Gallery" from a set of photos and then subsequently place the "gallery" within a "Portfolio"?

    Do you have documentation/guidance within your knowledgebase for this?

    Much appreciated.

    Reza

    Posted 7 years ago #
  2. Elliott
    Support

    Hello Reza_K,

    See here for learning how to use the portfolio,

    http://mysitemyway.com/support/topic/needed-step-by-step-instruction-on-using-the-portfolio-option#post-3519

    Let us know if this helps.

    Posted 7 years ago #
  3. Reza_K
    Member

    Hi,

    I read the thread you provided, but it does not address my question/issue. Let me elaborate by giving a scenario.

    > Portfolio: Formula 1 (Real ex.: http://www.photo-folio.net/portfolio/portraits/)
    - Gallery: British GP (Real ex.: clicking on any of the images in the above ex. to then see the content)

    So now I want to display 20 photos in the "British GP" gallery that is listed under the "Formula 1" portfolio.

    I can't be expected to provide URLs for each individual image that is in the gallery ... as I will eventually have hundreds!

    Does WP or your template not have an "automated" method of "generating" a gallery of images once I provide an image folder name or source?

    I have to believe such functionality exists ! :)

    Thanx.

    Posted 7 years ago #
  4. Elliott
    Support

    Unfortunately the only way for the portfolio to work is by creating posts and assigning images to them. As an alternative you might be interested in the [gallery] shortcode or manually creating the pages with shortcodes so you do not have to create a post each time.

    Let us know if this helps Reza_K.

    Posted 7 years ago #
  5. Reza_K
    Member

    Hi Elliot,

    Hmmm ... not what I was hoping for ... but it's a step forward.

    IS there a thread or knowledgebase doc with instructions for ...
    (1) "[gallery] shortcode" ... or ...
    (2) "manually creating pages with shortcodes"?

    Thanks,
    Reza

    p.s. I have to believe there is an easier way of doing this. There are WP sites out there with thousands of images in one site ... I can't imagine the users inserted each pic on a post-by-post basis. Any guidance would be appreciated... including referrals to other possible plug-ins.

    Posted 7 years ago #
  6. Reza_K
    Member

    Elliot,

    I guess the other option is if I were to create my "galleries" OUTSIDE of WP.
    Thumbnails would be presented under the portfolio page (just as in your demo) ... but when clicked on, it would open the gallery in another widow. (i.e. http://www.rezak.com/F1%20Turkey%202008%20Cars/F1_Turkey_2008_Cars.html)

    I assume I can control the URL that is associated to the thumbnails shown on the Portfiolio page?

    Cheers.

    Reza

    p.s. I think this might be the fastest and most efficient way? ... although I would have preferred to keep everything "within" WP. Thoughts?

    Posted 7 years ago #
  7. Gatelli
    Member

    Same request here... I have tons of pictures to insert in a gallery page, I can't imagine I have to make post for each.. Any improvement for that ? I know it's impossible to select images from library as Wordpress don't manage media categories for the moment, but it could be possible to make a gallery-shortcode assigning number of pictures and URL for each ?

    Gatelli.

    Posted 7 years ago #
  8. Elliott
    Support

    To use the [gallery] shortcode then you would upload your images to your page and then type this in the HTML editor..

    [gallery]

    And that should be it. if your using Awake then there is the [fancy_images] shortcode which more or less creates a type of gallery. I know a lot of users are kind of put off at the idea of having to create a post for each image in their portfolio. I will look into converting the [fancy_image] shortcode to inFocus.

    Posted 7 years ago #
  9. Reza_K
    Member

    Hi Elliot,

    It would be great if the Awake [fancy_images] shortcode could be converted for use in inFocus ... I'm certain you will have quite a number of happy users :)

    Is there a another post which provides more guidance on the use of the [gallery] shortcode ?

    Thanx

    Posted 7 years ago #
  10. Elliott
    Support

    Alrighty, I think this should work for you guys..

    To other customers who are browsing this thread.. this is a shortcode which will allow you to list images in a portfolio like fashion (much like Awake's fancy_images shortcode).

    Instructions:

    1. Create a backup of your theme folder.
    2. Download and extract the attached file to /wp-content/themes/infocus/lib/functions/
    3. In your page type out the shortcode like this..

    [fancy_images]
    http://www.yoursite.com/1.jpg
    http://www.yoursite.com/2.jpg
    http://www.yoursite.com/3.jpg
    [/fancy_images]

    The images will automatically use 3 columns and will load into a lightbox when clicked on. If you want to take some images out of the lightbox and create a custom link for it then you would do this..

    [fancy_images url = ',,,,,,,http://www.google.com,,,']

    You need to specify a comma for each image with no spaces in between. And for the image you want to change the link then place the URL right before it's comma. In the above example there are 10 commas with a URL set on the 8th comma so your 8th image will point to google.

    Let us know if this works for you guys.

    EDIT - Shortcode updated 1/16/2011

    Attachments

    1. updated-shortcode.zip (2.3 KB, 99 downloads) 6 years old
    2. shortcode.zip (2.2 KB, 43 downloads) 7 years old
    Posted 7 years ago #
  11. Reza_K
    Member

    Hi Elliot,

    Many thanks ... Will test in the next couple of days. Currently working on some other items Dorian is helping out with.

    Cheers,
    Reza

    Posted 7 years ago #
  12. Hi,
    and many thanks for your contribution.
    Unfortunately, this fix seems to work fine only on pages, with Full Width Template (I'm a beginner, I may be wrong...)
    If I use this shortcode in a post, the thumbnails size are too big to fit the space correctly, and of course, it's for posts that I need this shortcode !
    I tried to make some changes, but I'm not good enough in css to succeed, and finally I decided to ask some help:
    Is it possible to have the same result, with smaller thumbnails that fits the space of a classical post with sidebar ?
    Thanks in advance for your help.
    (Sorry if I made mistakes, I tried to do my best in english...)

    Attachments

    1. screenshot_thumbnails_too_big.JPG (51.3 KB, 25 downloads) 7 years old
    Posted 7 years ago #
  13. Hi,
    and sorry for the mistake, it works fine on post too.
    But apparently, a "Portfolio Fullsize Image" must be set for the post to display in full page width, otherwise the theme display the post in "standard Blog Post Layout", with sidebar.
    As I don't want to display a full image at the top of my gallery, I'm looking for a way to keep the full width layout (instead of resizing the thumbnails), without being forced to set a Portfolio Fullsize Image.
    Maybe if someone can help ?
    Thanks in advance.

    Posted 7 years ago #
  14. Elliott
    Support

    Hey Arnaud,

    Yes this is possible but you would have to edit two images and one of those images are used for the actual portfolio so it would mess things up.

    What we could do is create a copy of that image and just edit it though. Perhaps what you would like is to keep the current dimensions but have them display vertically? In that case open up the shortcode.php file and find this code at the top..

    $out .= '<div class = "one_third '. $last .'">';
    $out .= '<div class = "image_loader_1">';
    $out .= '<div class = "portfolio_img_holder">';
    $out .= '<a title="' .$title. '" href = "'.$img.'" '. $rel.' class="load_portfolio_img">';
    $out .= '<span class="roll_over rollover" style="display: block;"></span>';
    $out .= '<span id="img1"><img src="'. $image_url_true .'" style="opacity: 1;" alt="" class="hover_fade"></span>';
    $out .= '</a>';
    $out .= '</div>';
    $out .= '</div>';
    $out .= '</div>';

    And change it like this..

    $out .= '<div class = "image_loader_1">';
    $out .= '<div class = "portfolio_img_holder">';
    $out .= '<a title="' .$title. '" href = "'.$img.'" '. $rel.' class="load_portfolio_img">';
    $out .= '<span class="roll_over rollover" style="display: block;"></span>';
    $out .= '<span id="img1"><img src="'. $image_url_true .'" style="opacity: 1;" alt="" class="hover_fade"></span>';
    $out .= '</a>';
    $out .= '</div>';
    $out .= '</div>';

    Let us know what you feel like doing.

    Posted 7 years ago #
  15. Thank you Elliott for your answer.
    I've tested your solution with vertical display, but there was too much space at the right of the thumbnails, so I changed the code to get a two columns display, and I think it's ok. (See the screenshot)
    Here is the modified code, if someone is interested...

    if ($counter == 1 || $counter == 3 || $counter == 5 || $counter == 7 || $counter == 9 || $counter == 11 || $counter == 13 || $counter == 15 || $counter == 17 || $counter == 19) { $last = 'last'; }<br />
    			if ($links[$counter] != '') { $img = $links[$counter]; } else { $rel = &quot; rel = 'lightbox[portfolio]'&quot;; } </p>
    <p>			$out .= '<div class = &quot;one_half '. $last .'&quot;>';<br />
    			$out .= '<div class = &quot;image_loader_1&quot;>';<br />
    			$out .= '<div class = &quot;portfolio_img_holder&quot;>';<br />
    			$out .= '<a title=&quot;' .$title. '&quot; href=&quot;'.$img.'&quot;>';<br />
    			$out .= '<span class=&quot;roll_over rollover&quot; style=&quot;display: block;&quot;></span>';<br />
    			$out .= '<span id=&quot;img1&quot;><img src=&quot;'. $image_url_true .'&quot; style=&quot;opacity: 1;&quot; alt=&quot;&quot; class=&quot;hover_fade&quot;></span>';<br />
    			$out .= '</a>';<br />
    			$out .= '</div>';<br />
    			$out .= '</div>';<br />
    			$out .= '</div>';<br />

    I'm not sure if my code is very clean, but it works on a "standard Blog Post Layout".
    Now, I just need to find a way to get a title on mouseover, and a caption in lightbox (with filename), to be completely satisfied.
    But the most important is done, and I thank you for the good direction you gave to me.
    Have a good day,
    Arnaud.

    Attachments

    1. screenshot.JPG (79.2 KB, 6 downloads) 7 years old
    Posted 7 years ago #
  16. Elliott
    Support

    I didn't realize they would fit in the one_half's, good catch Arnaud.

    I updated the shortcode so you can choose whether you are using them with a sidebar or a full width template. Use it like this..

    [fancy_images sidebar = 'yes']

    Attachments

    1. shortcode.zip (2.3 KB, 32 downloads) 7 years old
    Posted 7 years ago #
  17. Yes Elliott !
    Excellent, I was just missing this function to choose the display, and the updated code works like a charm!
    I have only one question: do you think it's possible to get the filename in the caption of Lightbox ? I think it could be helpful for photo identification.
    Anyway, thank you sOOO much for your help and your very efficient support, I'm a happy customer !

    Arnaud.

    Posted 7 years ago #
  18. Elliott
    Support

    You can set the filename in the title attribute like this,

    [fancy_images title = 'filename1.jpg,filename2.jpg,This is a caption,And here is another']

    It works the same way as the links do. (try the attached file)

    Attachments

    1. shortcode.zip (2.3 KB, 31 downloads) 7 years old
    Posted 7 years ago #
  19. Hi Elliott,
    this is working perfectly.
    Thank you very much.

    Posted 7 years ago #
  20. Reza_K
    Member

    HI Elliott,

    I followed the thread of work you did with Arnaud and am almost where I need to be.

    The following page is a sample (ignore content) of a "standard" type post I will have, so once fixed, I will be repeating it over & over. REF: http://www.rezak.com/2010/11/20/graham-chronofighter/

    I tried tweaking the shortcode.php file you provided but I'm not successful.

    >> Notice the post is a FULL ... but the content is using a 2/3 + 1/3 layout.
    >> I will be needing a 2-column image display 'within' the 2/3 portion of the page.

    Questions:
    1) I don't need that small strip going across the top ... How do I remove it?
    2) Not sure why the images are not lining up properly? I tested adjusting teh image size in the php file but that's not it. Is it simply a matter of reducing the right padding? If so, how?
    3) How do I get rid of the white background? I added the following code to style.css but no luck.
    '.webtreats_fancy_images_sc a { background:none!important; }

    Thanks for the help.
    Reza

    Posted 6 years ago #
  21. Elliott
    Support

    Hello Reza_K,

    I'm not sure what you mean about the small strip. This is probably due to some other kind of customization.

    You can change the sizing by using width = '' and height = ''

    As for the white background try background: transparent !important;

    Posted 6 years ago #
  22. Reza_K
    Member

    Hi Elliott,

    Still struggling with this ... and I checked a lot of things with firebug. I simply downloaded the shortcode file you provided above.

    1) Using firebug, I'm being told the rectangular strip is coming from line 38 of your code? Any thoughts?
    2) The first image is being called as one_third, and only the second as 'one_third last' ! ... therefore giving it a wide right padding. All very confusing. Even when I do it on a simple Full Portfolio page with nothing else on it, it does not display properly?
    3) As for the background... I assume you mean adding it to the style.css? I tried, but to no avail.

    ?

    Thanks,
    Reza

    Posted 6 years ago #
  23. Reza_K
    Member


    Attachments

    1. fancy_images.jpg (135.1 KB, 11 downloads) 6 years old
    Posted 6 years ago #
  24. Elliott
    Support

    Due to all of the customization it could be anything that is causing that Reza_K. From your image is looks like the CSS is completely broken.

    You would probably have more luck just manually typing out the images and using inline styles to get the look you want.

    <div class="image_loader_1"><div class="portfolio_img_holder"><a class="load_portfolio_img" rel="lightbox[portfolio]" href="IMAGE URL" title="hello"><span style="display: block;" class="roll_over rollover"></span><span id="img1"><img class="hover_fade" alt="" style="opacity: 1;" src="http://localhost/infocus/wp-content/themes/infocus/lib/scripts/thumb.php?src=IMAGE URL&w=276&h=151&zc=1&q=100"></span></a></div></div>

    You can paste that code and make sure to replace "IMAGE_URL" with the url to your image. And also replace the following line..

    http://localhost/infocus/wp-content/themes/infocus/lib/scripts/thumb.php

    With your own host.

    Posted 6 years ago #
  25. Ecirb
    Member

    Hello,

    I had a problem with columns but I found a workaround : every 20 images I close and reopen the shortcode... Otherwise there will be a columnd missing on the right after a certain number of images... Strange but well... I'll keep watching this post to know if you ever provide another solution! ;)

    Cheers,

    Brice

    Posted 6 years ago #
  26. Elliott
    Support

    Hello Ecirb,

    I should have coded it better but I was running out of time. If you open up the shortcode file and look on line 51-52 you should see this..

    if ($sidebar == '') { if ($counter == 2 || $counter == 5 || $counter == 8 || $counter == 11 || $counter == 14) { $last = 'last'; }  }
    else { if ($counter == 1 || $counter == 3 || $counter == 5 || $counter == 7 || $counter == 9 || $counter == 11 || $counter == 13 || $counter == 15 || $counter == 17 || $counter == 19) { $last = 'last'; } $col = 'one_half'; }

    You can go ahead and increase the numbers to however many you need,

    $counter == 21 || $counter == 23 || $counter == 25

    etc etc etc, Sorry about that.

    Posted 6 years ago #
  27. Ecirb
    Member

    I see! Thanks for the tip, and no worry. It's so great already that you've done this for us too with the InFocus template. I love this Shortcode! :)

    Thanks for the quick answer, again! You rock.

    Cheers,

    Brice

    Posted 6 years ago #
  28. Reza_K
    Member

    Hi Elliot,

    Thanks .. Will give it a try ...

    Thanks,
    Reza

    Posted 6 years ago #
  29. Reza_K
    Member

    HI Elliott,

    I'm 'oh-so-close' ! Worked on the shortcode.php file to fix the issues and achieve what I need. Have a look: http://www.rezak.com/2010/11/20/graham-chronofighter/

    So ... I have now (1) removed that top strip, (b) fixed the background color (via style.css), and (c) have gotten two images per line.

    Where I am struggling, with my limited coding, is to now add padding to the images to adjust the horizontal positioning of the images.

    As much as I have now learned how to do that in the CSS files, I'm struggling with it in the PHP file. Can you help me in the coding needed to add right & left padding to the images?

    Many thanks,
    Reza

    p.s. Needless to say, I'm using the shortcode you provided further up in this thread.

    Posted 6 years ago #
  30. Elliott
    Support

    You can use the width and height parameters to make sure they fit the whole screen, though they should be doing this by default.

    If you just want to add padding to your images then you would do this,

    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;

    or use the shorthand version,

    padding: 10px 10px 10px 10px;

    Though keep in mind that this will probably mess up the hovering and the magnifying glass backdrop.

    You can also try margins,

    margin-left, margin-right, etc etc

    Posted 6 years ago #
  31. Reza_K
    Member

    Hi Elliott,

    Thanks, but where I'm unclear is 'where' in the shortcuts.php portion of the file I should be placing the padding or margins code? Can you be bit more specific please?

    Thanx

    Posted 6 years ago #
  32. Elliott
    Support

    This is the HTML that get's output,

    $out .= '<div class = "'.$col.' '. $last .'">';
    $out .= '<div class = "image_loader_1">';
    $out .= '<div class = "portfolio_img_holder">';
    $out .= '<a title="' .$titles[$counter]. '" href = "'.$img.'" '. $rel.' class="load_portfolio_img">';
    $out .= '<span class="roll_over rollover" style="display: block;"></span>';
    $out .= '<span id="img1"><img src="'. $image_url_true .'" style="opacity: 1;" alt="" class="hover_fade"></span>';
    $out .= '</a>';
    $out .= '</div>';
    $out .= '</div>';
    $out .= '</div>';

    I'm not sure how you customized the shortcode but you would probably have to style the first or second div.

    Posted 6 years ago #
  33. Reza_K
    Member

    Hi Elliott,

    I see where the elements are addressed, but I'm not clear as to how to add the padding in this type of PHP file format! I made a couple of attempts and even looked at the w3schools.com website, but my attempts were futile! Sorry!

    Can you simply send me the same code with padding attribute added? just use generic 5px all around ... I will then play around to tweak the numbers ... I know the padding needs to be added to the image placeholder and the hover elements.

    Again, sorry for the trouble ...

    Cheers,
    Reza

    Posted 6 years ago #
  34. Elliott
    Support

    You would add padding like this,

    $out .= '<div style = "padding: 5px;" class = "image_loader_1">';

    Posted 6 years ago #
  35. Reza_K
    Member

    Brilliant ... That did the job :) (For some reason, I was placing the Style code after the class!)

    Thanks again ... Issue RESOLVED.

    Posted 6 years ago #
  36. Ecirb
    Member

    Hello again !

    Quick question: is there any simple way that you can think of so that when we click on a fancy image, it links to a specific page or url instead of the lightbox? I would love to use this setting of photos as a menu in some parts of my site, including the darkening and looking glass icon effect... ;)

    Thanks for your help!

    Posted 6 years ago #
  37. Ecirb
    Member

    I slipped through it... Thanks for the fast answer! ;)

    Posted 6 years ago #
  38. toxxy
    Member

    Hey i have been following thist thread, and i must say i like this shortcode very much.
    But i have one problem, the thumbnails are not showing. But if i click them, the lightbox loads and i can see the pictures. But not as thumbnails.

    What could be wrong ? I attatched a screenshot,.

    Best Regards
    Nicklas.,

    Attachments

    1. pic.jpg (108 KB, 2 downloads) 6 years old
    Posted 6 years ago #
  39. Elliott
    Support

    Hello toxxy,

    It could be a problem with your resize script or you are simply using the wrong URL's. Go ahead and give us a link to your page so we can take a closer look.

    Posted 6 years ago #
  40. toxxy
    Member

    OKey thanks, you can check it out here.

    http://wordpress.lysegardensgk.se/?page_id=114

    Posted 6 years ago #
  41. toxxy
    Member

    I solved the problem...

    It was because i put the pictures on another webserver then were i have the wordpress installation, once i changed it worked.

    Thanks anyways.

    Posted 6 years ago #
  42. Uniq
    Support

    Hello toxxy,

    Once again, I'm glad that you fixed this! Let us know if you need further assistance!

    Best Regards,
    Dorian

    Posted 6 years ago #
  43. Is there an updated version of the shortcode.php file after all the customization? Would be nice.

    My personal opinion: for a portfolio theme, there should be a much more elegant and powerful way of adding galleries. I have no problems paying $20 or $30 extra for the theme, because that saves me hours of adding image URLs manually, and I am sure all of those participating in this thread will agree.

    That shortcode.php hacking isn't good, because although it works, it's of no use to those who use the standard theme.

    Just my 0.02.

    Helmar

    PS. In the age of Web 2.0 and AJAX, creating and managing galleries should be point and click, drag and drop. :)

    PPS. The other problem with this shortcode is that the lightbox brings up the thumbnail (smaller version) rather than the large one which would have to be specified in the fancy_images tag itself. That's cumbersome. A better solution needs to be found here. The foundation is good, but the final execution lacking.

    EDIT:

    1. Instead of going bonkers with the counter == 3 stuff, just do use PHP's modulus (%) function:

    if ($sidebar == '') { if ($counter == 2 || ($counter+1)%3 == 0 ) { $last = 'last'; }  }
    			else { if ($counter == 1 || ($counter+1)%2 == 0) { $last = 'last'; } $col = 'one_half'; }

    Works on a no-siderbar thing for me.

    The other thing I suggest those who use galleries from digital cameras who have a sequenced number is to install the exec-php plugin and rather than listing each image on its own, just do this, obviously with your paramaters.

    [fancy_images]
    
    [exec]
    
    // put all your filenames in here, as uploaded to Wordpress via the Media Upload.
    
    $image_set=array('IMG_2915.jpg','IMG_3176.jpg','IMG_2820.jpg','IMG_2821.jpg','IMG_2835.jpg','IMG_2836.jpg','IMG_2847.jpg','IMG_2849.jpg','IMG_2852.jpg','IMG_2856.jpg','IMG_2858.jpg','IMG_2859.jpg','IMG_2860.jpg','IMG_2861.jpg','IMG_2868.jpg','IMG_2870.jpg','IMG_2871.jpg','IMG_2872.jpg','IMG_2877.jpg','IMG_2891.jpg','IMG_2892.jpg','IMG_2893.jpg','IMG_2894.jpg','IMG_2896.jpg','IMG_2903.jpg','IMG_2933.jpg','IMG_2961.jpg','IMG_2997.jpg','IMG_3084.jpg','IMG_3125.jpg','IMG_3142.jpg','IMG_3170.jpg','IMG_3180.jpg','IMG_2869.jpg','IMG_2901.jpg','IMG_2918.jpg','IMG_3101.jpg','IMG_3133.jpg');
    
    // Loop through the array, spitting out the proper URL for fancy image treatment.
    foreach($image_set as $k => $v) {
    echo 'http://www.constellationhouse.co.za/wordpress/wp-content/uploads/2010/12/'.$v.'<br />';
    }
    [/exec]
    
    [/fancy_images]

    This is very plain and simple, I admit, but may help someone around here.

    Posted 6 years ago #
  44. Elliott
    Support

    Thanks for the suggestions helmar, the modulus combined with counter+1 is very nice and elegant. I was considering doing a loop for this but I am pretty impressed with that solution.

    Here is the updated shortcode with infinite columns.

    Attachments

    1. updated-shortcode.zip (2.3 KB, 62 downloads) 6 years old
    Posted 6 years ago #

Reply »

You must log in to post.

Construct WordPress Theme
Construct wordpress theme
Myriad WordPress Theme
Myriad wordpress theme
Method WordPress Theme
Method wordpress theme
Fusion WordPress Theme
Fusion wordpress theme
Elegance WordPress Theme
Elegance wordpress theme
Echelon WordPress Theme
Echelon wordpress theme
Dejavu WordPress Theme
Dejavu wordpress theme
Modular WordPress Theme
Modular wordpress theme