Building one-page portfolio with additional image gallery bootstrap

  • cichooocki

    (@cichooocki)


    7 years, 11 months ago

    I’m creating a custom theme with bootstrap that will be used by a photographer and I’m trying to integrate it with wordpress. My main page is in the one-page style and has following sections:
    – cover image with page title and description
    – about me section
    – portfolio with 6 exemplary photos and link to full gallery
    – contact form

    “About me” content can be edited in the admin panel (I created a separate “about me” page and linked up its ID with the section), portfolio photos are the feature images of the latest posts.
    Navbar consists of sections titles as well as link to gallery.

    And here are my questions and problems that I need to solve:

    1) How can I add a functionality to edit the cover image from the admin panel?

    2) What is the best way to create a separate gallery?
    I thought about categorizing the posts with “gallery” and “portfolio” when all of the first ones would be posted in gallery, but also some of them would be featured on the home page in portfolio section.
    Is it a good way to do that? How can it be achieved in code? Here is how the portfolio code looks like at the moment:

    <div class="row">

                <?php 

                    $i = 1;

                    query_posts('showposts=6');
                    query_posts("catname=portfolio");

                    if ( have_posts() ) : while ( have_posts() ) : the_post(); 

                ?>

                    <div class="col-sm-4 portfolio-item">
                        <a href="#portfolioModal<?php echo $i; ?>" class="portfolio-link" data-toggle="modal">
                            <div class="caption">
                                <div class="caption-content">
                                    <i class="fa fa-search-plus fa-3x"></i>
                                </div>
                            </div>

                            <?php 

                                the_post_thumbnail( 'full', array('class' => 'img-responsive') );

                            ?>
                        </a>
                    </div>

                    <?php $i++; ?>

                <?php endwhile; endif; ?>

</div>

    It publishes all of the featured photos of the posts in the portfolio section.

    3) What is the best way to create a separate gallery in my case?
    Should I create the “gallery.php” file with all of the code and link it up in navbar? What should be the link destination in navbar that would lead to the gallery?

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    7 years, 11 months ago

    You can setup the home page to utilize the page’s featured image as the cover image. Then the client can use the native featured image dialog to change the image. If the featured image box is not on the page edit screen, pull down the screen options tab and checkmark Featured Image.

    For more on using featured images, see Post Thumbnails. Even though the admin interface uses “featured image”, the related functions still use the outdated ‘thumbnail’ terminology.

    To create a separate gallery, all you really need to do is create a dedicated page and use the media loader dialog to create a gallery using the [gallery] shortcode. Then you link to the gallery by using the page’s permalink just like any other page.

    I suggest you also look at any of the many gallery plugins available for one that may be more appealing than the native version. They likely have their own way of managing content, which would replace any scheme you might conceive of. Don’t commit to a way of organizing images until you decide what gallery you will use.

    Using most galleries is usually a matter of inserting a particular shortcode on a page, very much like what you do with the native [gallery]. You can add other content if desired, or just use the shortcode alone. Any gallery plugin that does not use a shortcode should have documentation on what to do to use its features.

Viewing 1 replies (of 1 total)
  • The topic ‘Building one-page portfolio with additional image gallery bootstrap’ is closed to new replies.

Tags