Portfolio plugin

Discussion in 'Subrion CMS Plugins Discussion' started by Eleanna, Apr 18, 2015.

  1. Eleanna

    Eleanna Member

    Thank you for this, nice plugin. However, a few things would need looking at.
    - Changing the title of an image creates a database error
    - The facility to change the order of the images in an easy way would be a great addition to this.
    - making a change to an uploaded image, even a change to the description, brings up the warning "database error". Although the change is visible at the admin end, it is not shown at the front end. The only way to make corrections is to delete the entry and re-enter it from scratch.
    - It would also be a major improvement if the entries shown in the blcok could be changed regularly. This would ideally happen by moving all entries 1 space left every time a new entry is made. The possibility of a manual re-shuffle would also be good.
  2. Eleanna

    Eleanna Member

    We could do with a little help on this. As it stands, when a user clicks on a thumbnail in either the portfolio block or on the portfolio page, the user gets taken to the large version of the image they clicked. This is fine when they start from the portfolio page. If however thee user starts from the portfolio block, which shows only a limited number of images from the portfolio page, it would make a lot more sense to direct the user to the portfolio page first, before showing the full image. That is what we need to do.
    We need to change this
    <a href="http://www.cretefocus.com/en/portfolio/4-Balloon-Seller-Carnaval-2015.html" class="pf__item__image"><img src="//www.cretefocus.com/uploads/b/bigbadwolf/7be5a97605.jpg" alt="Balloon Seller, Carnaval 2015" title="Balloon Seller, Carnaval 2015"></a>

    to <a href="http://www.cretefocus.com/en/portfolio</a>, which should do the trick.
    The question is HOW? and of course, we only want this from the portfolio block. Can anybody tell us what we need to change, and where, in order to achieve this?
    Thanks
    Eleanna
  3. Gleb_S.

    Gleb_S. Subrion Designer Staff Member

    Hello @Eleanna !

    In Portfolio plugin, if you click on an image, it takes you to portfolio View page. No matter if it is portfolio page or block.
    Maybe there is some javascript code on your page that do this? I've just checked Portfolio plugin and it works as expected.
  4. Gleb_S.

    Gleb_S. Subrion Designer Staff Member

    Ahh.. sorry for misunderstanding..

    To change a link, edit this file: [root]\plugins\portfolio\templates\front\block.new-portfolio-entries.tpl
    Line 8:
    Code (Text):
    <a href="{$smarty.const.IA_URL}portfolio/{$pf_entry.id}-{$pf_entry.alias}" class="pf__item__image">{printImage imgfile=$pf_entry.image title=$pf_entry.title}</a>
    Change to:
    Code (Text):
    <a href="{$smarty.const.IA_URL}portfolio/" class="pf__item__image">{printImage imgfile=$pf_entry.image title=$pf_entry.title}</a>
    Or in your case, it would be better to add a link after all entries in block like this:
    Code (Text):
    {if isset($block_portfolio_entries) && $block_portfolio_entries}
        <div class="pf">
            <div class="row-fluid">
                {foreach $block_portfolio_entries as $pf_entry}
                    <div class="span3">
                        <div class="pf__item">
                            {if $pf_entry.image}
                                <a href="{$smarty.const.IA_URL}portfolio/{$pf_entry.id}-{$pf_entry.alias}" class="pf__item__image">{printImage imgfile=$pf_entry.image title=$pf_entry.title}</a>
                            {/if}
                        </div>
                    </div>

                    {if [email protected] % 4 == 0}
                        </div>
                        <div class="row-fluid">
                    {/if}
                {/foreach}
            </div>
        </div>
    <p class="text-center"><a href="{$smarty.const.IA_URL}portfolio/" class="btn btn-primary btn-large">Show all entries</a></p>
    {else}
        <div class="alert alert-info">{lang key='pf_no_entries'}</div>
    {/if}
  5. Eleanna

    Eleanna Member

    Great, that works, thanks. Now, relating to this. We have set it so that when clicking on a thumbnail in the portfolio block people end up on the portfolio page rather than the large image. to us, this just makes more sense.. Anyway, on the portfolio page we have added a "back to Home" button to make life easy. See image.
    As you can see, in the columns, the images are literally stick together. How do we create a vertical space between the thumbnails (equal to the horizontal space) so that it looks a little nicer, and how do we create a space between the button (Back to Home) and the facebook plugin underneath. These are literally glued together as well...

    And finally, which is the template that shows the single, large image? We would like to put a "back" button on this as well, to take people back to the main portfolio page.

    Attached Files:

  6. Gleb_S.

    Gleb_S. Subrion Designer Staff Member

    Hi @Eleanna !

    This is all related to CSS styles.
    In your user-style.css add something like this:
    For rows:
    Code (CSS):
    .pf .row-fluid + .row-fluid { margin-top: 30px }
    For button:
    Code (CSS):
    .your-button-class { margin: 15px 0; }
    View page of portfolio: [root]\plugins\portfolio\templates\front\index.tpl - starting from line 1
  7. Eleanna

    Eleanna Member

    ok, we've got the images separated, but the button still sticks to the image above it. Button class is correctly named...
  8. Gleb_S.

    Gleb_S. Subrion Designer Staff Member

    Could you post a link to your website?
  9. Eleanna

    Eleanna Member

  10. Gleb_S.

    Gleb_S. Subrion Designer Staff Member

    Here is your button:
    Code (Text):
    <a href="http://www.cretefocus.com/en/Start/" class="btn btn-primary btn-large">Back to Home</a>
    No class specified.

    Add class to it like this:
    Code (Text):
    <a href="http://www.cretefocus.com/en/Start/" class="btn btn-primary btn-large my-back-button">Back to Home</a>
    And add this CSS:
    Code (Text):
    .my-back-button { margin: 15px 0; }

Share This Page