WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Thumbnail Size Problem in NextGEN Gallery (27 posts)

  1. kwaft
    Member
    Posted 1 year ago #

    Hello,

    I used NextGEN Gallery widget to show image thumbnails on my homepage. However, I would like to display them in various sizes in order to show the precise comparison. I'm wondering if there's any method to display pictures in different sizes and in different layout (portrait/landscape).

    Thank you

  2. kwaft
    Member
    Posted 1 year ago #

    Here's the website link:

  3. kwaft
    Member
    Posted 1 year ago #

  4. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    Sure, use the image shortcode for each image and include the size preferred. Resize and optimize the images prior to upload to the size that will be displayed for best site performance.

  5. kwaft
    Member
    Posted 1 year ago #

    I see...

    Here's the shortcode I have for my current homepage:

    [do_widget id=ngg-images-2]
    [do_widget id=ngg-images-4]
    [do_widget id=ngg-images-5]
    [do_widget id=ngg-images-7]
    [do_widget id=ngg-images-8]
    [do_widget id=ngg-images-9]
    [do_widget id=ngg-images-6]

    How can I make pictures from different galleries showing in two columns?

    [do_widget id=ngg-images-2][do_widget id=ngg-images-4]
    [do_widget id=ngg-images-5][do_widget id=ngg-images-7]
    [do_widget id=ngg-images-8][do_widget id=ngg-images-9]
    [do_widget id=ngg-images-6]

    (I know the code won't look like the one above...)

    Thank you for your help!

  6. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    Something like:

    <div class="newone">[do_widget id=ngg-images-2][do_widget id=ngg-images-4]</div>
    .newone {
    	display: inline;
    }

    You can add more styling etc...

  7. kwaft
    Member
    Posted 1 year ago #

    I'm sorry. I'm still a little bit confused about the code you wrote. Does it look like this?
    <div class="newone">[do_widget id=ngg-images-2][do_widget id=ngg-images-4]</div>

    I used it but it didn't work.
    How about the following code showed below it?

    .newone {
    display: inline;
    }

    I think I probably made a mistake while editing.
    For this code, do I have to download the plugin or anything in order to make it works?

    Thank you

  8. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    The first part

    <div class="newone">[do_widget id=ngg-images-2][do_widget id=ngg-images-4]</div>

    is added to a page or post in HTML view.

    The second part

    .newone {
    	display: inline;
    }

    is added to the very bottom of the theme stylesheet style.css (Appearance>Editor>style.css)

    This places two elements of a container (the div) inline (next to each other horizontally). The elements in this case are the shortcodes (which use php to gather the images).

    Use the HTML multiple times in a row in your page, changing just the gallery id's on each.

  9. kwaft
    Member
    Posted 1 year ago #

    I tried but it doesn't work.

    After I typed the following code in HTML view for my Homepage:

    <div class="newone">[do_widget id=ngg-images-2][do_widget id=ngg-images-4]</div>
    <div class="newone">[do_widget id=ngg-images-5][do_widget id=ngg-images-6]</div>
    <div class="newone">[do_widget id=ngg-images-7][do_widget id=ngg-images-8]</div>
    <div class="newone">[do_widget id=ngg-images-9][do_widget id=ngg-images-10]</div>
    <div class="newone">[do_widget id=ngg-images-11][do_widget id=ngg-images-12]</div>

    In the "visual view," it shows these:
    [do_widget id=ngg-images-2][do_widget id=ngg-images-4]
    [do_widget id=ngg-images-5][do_widget id=ngg-images-6]
    [do_widget id=ngg-images-7][do_widget id=ngg-images-8]
    [do_widget id=ngg-images-9][do_widget id=ngg-images-10]
    [do_widget id=ngg-images-11][do_widget id=ngg-images-12]

    I also typed this in style.css
    .newone {
    display: inline;
    }

    However, the thumbnail images of galleries are still in one column.

    What should I do now?

    Thank you!

  10. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    I see two columns. Well, I did - are you using a cache plugin?

  11. kwaft
    Member
    Posted 1 year ago #

    Yes. I used a plugin called "Column Shortcodes". It worked, but now I'm facing another problem... Actually, I tried to make it four columns, but it came out two columns. I think I may need to adjust the column width or the page margin. I don't know how to change it though. Or, is it the problem of this plugin?

    By the way, I would still like to try to create mutlitple columns without using any plugin. Could you please help me with it? Did I type the code wrong?

    Thank you.

  12. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    I need you to create a page with the code provided so I can see the output source and the css, if you keep working on it adding plugins, changing the page this gets quite difficult, so again, put your homepage back the way it was, create a new page with the code, provide link to that page here, and do not further edit it until I have replied.

  13. kwaft
    Member
    Posted 1 year ago #

    Thank you very much for your help!

    Here's the link to the test page:

  14. kwaft
    Member
    Posted 1 year ago #

  15. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    Add this to the bottom of stylesheet:

    .newone .hslice {
    padding: 25px;
    float: left;

    Let's also try three per row and then add a:

    <br />

    at the end of each new line of code, so first line would be:

    <div class="newone">[do_widget id=ngg-images-2][do_widget id=ngg-images-4][do_widget id=ngg-images-5]</div><br />

    This may not be all we have to do but start with this.

  16. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    Note: some of this is a bit difficult do the fact that the plugin is using the ID ngg-webslice for each one of the ten - ID's are suppose to be unique!

  17. kwaft
    Member
    Posted 1 year ago #

    Ok, I just edited it like what you taught.

    Out of four rows:
    Two of them are three per row.
    Other two rows are two per row.

    What would be the next step?

    Thank you

    Here's the link to it:
    http://aftglassware.com/test-page/

  18. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    Yes, this is acting oddly, I will review in a bit.

  19. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    Please switch to HMTL view for test post, stay in html view for test post, include only this is test post:

    <div class="newone">[do_widget id=ngg-images-2][do_widget id=ngg-images-4][do_widget id=ngg-images-5]</div><br /><div class="newone">[do_widget id=ngg-images-7][do_widget id=ngg-images-8][do_widget id=ngg-images-9]</div><br />

    Once saved, review what is shown in the HTML view - again do NOT switch to Visual Tab (This is inserting paragraphs etc.)

    Once saved the HTML should be exactly as above, nothing else!

    Oh, and make sure we still have the style newone in stylesheet...

  20. kwaft
    Member
    Posted 1 year ago #

    Yes, but the page still shows pretty much the same thing as the previous edit.

    I typed and saved it in HTML view:

    <div class="newone">[do_widget id=ngg-images-4][do_widget id=ngg-images-5][do_widget id=ngg-images-6]</div><div class="newone">[do_widget id=ngg-images-7][do_widget id=ngg-images-8][do_widget id=ngg-images-9]</div>

    Thanks

    [Moderator Note: Please post code or markup snippets between backticks or use the code button. As it stands, your code may now have been permanently dmaged/corrupted by the forum's parser.]

  21. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    Make .newone this:

    .newone {
    display: inline;
    float: left;
    }

    and we still have this also:

    .newone .hslice {
    padding: 25px;
    float: left;
    }
  22. kwaft
    Member
    Posted 1 year ago #

    Ok. I included it in style.css

    Do you mean to keep the original and add the one you just pasted (the top one) in the Editor (style.css)?

    So it would look like this?

    .newone .hslice {
    padding: 25px;
    float: left;
    .newone {
    display: inline;
    float: left;
    }

  23. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    This is exactly all you should have added to stylesheet:

    .newone {
    display: inline;
    float: left;
    }
    .newone .hslice {
    padding: 25px;
    float: left;
    }
  24. kwaft
    Member
    Posted 1 year ago #

    I see.
    Now both rows are "three per row" but they still look kind of odd...

  25. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    We can make the overall look more uniform by putting the portrait images and the one with the long text line that does not wrap properly (try putting a in the middle of that string?) on same line at end etc...order them now so they look OK...add the rest too.

  26. kwaft
    Member
    Posted 1 year ago #

    Yes. It looks much better! I think I'll just try to edit the text shorter so it'll be more uniform.

    Thank you very much for all the help!

    Thank you so much :)

  27. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    Looks good! Please mark post as resolved if so...

Topic Closed

This topic has been closed to new replies.

About this Topic