Pagination Approaches Pro or Envira Gallery?

[designerwriter]

I need some advice on the best way to approach my writing section. I have an intro page here
https://xpro.eagleheartdynamic.com/writing/

But I have split it up into Print and Web writing. I have a few options. I can use the Envira Gallery for each topic section but create different pages for those sections, or I can use the Pro theme and columns for each section and create separate pages for those sections. It would say for example, Writing Print - Alternative Health, another page would be Writing Print - Business and Marketing etc. The other option is that I could have the Writing Print page full of sections where I put the code for each Envira Gallery (based on topics) in separate sections. The only problem is, the page would be too long.

A third option would be for me to just stick to the topics as a form of categorization and create different pages for those. I could delete the Print and Web categories and just stick with topics and use the Envira Gallery for each category. Which would be the easiest using this theme from a navigation perspective?

If I used Pro and different pages rather than Envira Gallery, what pagination options are there available? Thanks in advance.

designerwriter

[marc_a]

Hi Designer Writer,

Thanks for reaching out!

For my own opinion this will depends on the your design layout but If you want me to choose any of the options you’ve mentioned, I will choose creating multiple section with different category using the Envira Gallery.

You can also create a custom layout using the Layout Builder. If you want to use pagination in Layout Builder it is advisable that you create a post type for your writings. This option will require some deep knowledge with custom Custom Post Type because you are building your own Writing page.

• https://theme.co/docs/layout-builder-overview
• https://theme.co/docs/pagination
• https://www.wpbeginner.com/wp-tutorials/how-to-create-custom-post-types-in-wordpress/

Hope that helps.

Thank you.

[designerwriter]

I set up my website as pages Marc so I guess the third option using the categories for each section and forget about separating them into Print and Web is the way to go. That way, I can create Envira Galleries for each category. There are reasons why I chose pages over posts. I am more of a page fan. Thanks Marc!

designerwriter

[marc_a]

Hi Design Writer,

We’re glad that you’re able to find a solution to your issues! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.

[designerwriter]

One more question Marc. So if I create Envira Galleries for each topic, then I won’t need additional pages correct? The pagination automatically creates a second page with the same title which will be Writing - Alternative Medicine, Writing - Business and Marketing etc., for example. I still have to set up separate pages for each section so I can drop the code in correct?

What should I do if I have only 1 or 2 images per page when I already set up the intro page with 4 images? It won’t appear larger to fill in the space will it? Will it still be 300x300px? Or do I need to put 2 extra empty images in place of the space like a placeholder?

I don’t think this is going to work Marc. I used a placeholder in 3 spaces for the 4 column which is what I set up the intro page to be. But I am getting the black border around the placeholders because the CSS is throughout the website. Then I tried 2 and 3 columns and it looked even worse.

Does NextGen Gallery work well with Pro? I could use that plugin although I really want to use Envira Gallery. See attached 3 screenshots.

I just looked at another thread I started about columns. Would it be best if I just used Pro to create 4 columns then drop the image in if I am using just one or two images? I am going to try it.

That’s what a tech suggested I do in this thread:

Adding 5 Columns

I am setting up my graphics gallery where I initially used Envira Gallery. In edit mode, the gallery showed only 2 columns where the photos were all clumped together in 2 rows. Is it better that I use the columns in Pro to do this gallery? The issue is, I can’t create 5 columns across because that option is not available when I add a section. It only goes up to 4 columns. When I add a column, it just goes to the next row. My photos are 200 pixels wide. Thanks in advance. https://xpro.eagleheart…

designerwriter

[tristup]

Hi @designerwriter,

We never tested the NextGen Gallery plugin, and have not even received any compatibility issue with it. I would suggest you check and try the Soliloquy plugin that comes as a bundled plugin with the theme.

Themeco Documentation: https://theme.co/docs/soliloquy
Official Documentation: https://soliloquywp.com/docs/

Regarding the multi-column structure, I would suggest you follow the reference thread you have given in your last post.

Hope it helps.
Thanks

[designerwriter]

Well I heard from Envira Gallery support and they said the placeholders that I placed on the 3 other columns was a good idea. I am using Envira Gallery. Can Soliloquy do the same thing…create this type of gallery? I decided not to use NextGen Gallery. I really love Envira Gallery products. I will let you know what else they say about Soliloquy.

[tristup]

Hi @designerwriter,

Soliloquy plugin can be used to add sliders to your site. You can find the demos and what can be achieved using them in the following link.

Soliloquy Slider Demo

Thanks

[designerwriter]

Tristup I used the slider on the graphic design section. But I am using Envira Gallery for the writing section. I asked the Envira Gallery tech and he said Soliloquy doesn’t do what Envira Gallery does and I need to use it for the purpose that I laid out.

But here’s something interesting I told the Envira Gallery tech. The one image works when I use Pro with 4 columns. I used the image (because there is only one for this section) and 3 blank placeholders that were placed in the other columns. It looks exactly what I want:
https://xpro.eagleheartdynamic.com/writing-technology/

BUT when I created an Envira Gallery for technology, not only did the removal of the lazy loading not work because the border is still showing around the placeholders, but the size is too big and the one placeholder goes to the next line because it is too big.
https://xpro.eagleheartdynamic.com/writing-technology-2/

The tech is going to talk to the development team about this! So for now, I will use the Envira Gallery for 4 images or more but use the Pro columns for 1 to 3 images since it creates the desired results. It just showing an inconsistency in the plugin which I am sure they will resolve. I hope it’s soon. I can always create a new gallery if I have 4 article images for technology so at least I have options!

Another thing that is inconsistent is that since he disabled lazy loading the black border doesn’t show around the placeholders when using the Pro columns option but concurrently, it is not there around the single image that I posted whereas the border is around the images on the other pages making it inconsistent. I need for the columns to work with the border but not showing up around the placeholder images. So essentially, the Envira Gallery is not working for my 1 to 3 images. If I could just paste the image and have it the correct size and flush left, I would be happy but that’s not the way this worked out! I will let you know what the EG tech says.

[ruenel]

Hello Grace,

Regarding the border, there is this custom CSS:

.envira-gallery-item-inner {
    border: 1px solid #000000 !important;
}

This means that in Envira Gallery, each item will have a border. When you use the Pro columns and insert a placeholder image or any image, it does not have a border because the custom CSS does not apply. You will have to enable the border option in the image element instead.

Hope this helps.

[designerwriter]

Thank you reunel. I did not know this would be the effect. I applied the border and I see it in edit mode but not in view mode. Can you check for me please? I cleared the cache as well. I just need to know if you can see the black border thanks.

https://xpro.eagleheartdynamic.com/writing-technology/

[ruenel]

Hi Grace,

Your changes were not saved because when I try to edit the page, I am not seeing that the border option is enabled.

Apply the border again to each of the image elements and please do not forget to save the changes by hitting the save button at the lower left side of the builder.

Cheers.

[designerwriter]

For some reason, I have issues saving in Chrome. I saved it numerous times. I just want the border around the image not the placeholders. I could try it in another browser to see if that works. I will have to do it tomorrow evening. I will get back to you regarding what the EG tech says on how they are going to resolve this issue re the image/s in the columns.

[tristup]

Hi Grace,

Thanks for the information, please let us know the feedback from the Essential Grid plugin.

Thanks

[designerwriter]

I am not using Essential Grid I am using the Envira Gallery. I am not sure WHY I am seeing the border in edit mode and not on the frontend! This is maddening. The EG tech said there was nothing they could do regarding the border. The placeholders was a good idea he said. Can you please have a look at it ruenel if you show up tonight? I believe you have my credentials.

I tried other browsers and it’s still showing in edit mode but not on the frontend. Thanks for your help.
See the 2 screenshots in edit mode and frontend viewing mode.

[ruenel]

Hello Grace,

This seems to be an issue with the border image. It is not applying to the page. I have investigated further and I found out the the cause of the issue is because you have added this in your footer CSS:

<footer class="footer">
    <div class="footerContainer">
        <p class="copyright">© GROUP TITLE 2015</p>
    </div>
</footer>

When the HTML code is removed, the borders will display to the page without any problem. You should be seeing black borders on the Writing Technology page and red borders on the Writing Technology 2 page.

Please let us know how it goes.

[designerwriter]

So can’t that html stay there? It was so long ago that I worked on the footer! So what does this code in the footer do? Should I remove it? Why would it show red borders on the Writing Technology 2 page? Why would a footer html affect the borders of images? I don’t want the border around the placeholders. Can I remove them if they show up?

[ruenel]

Hello Grace,

The HTML code that you inserted in the footer CSS created an issue messing up the rest of the CSS styling of the elements including the image element on the page. And that is why it must be removed. Yes, you can disable the borders of the placeholder images if you do not want to display them. You will have to click each of the placeholder images and disable the borders individually.

Regards.

[designerwriter]

Ok I had success by deleting the borders around the placeholders. I made the borders thicker just so I could see them but I wanted it to look like this:
https://xpro.eagleheartdynamic.com/writing-technology/

Now do I need that code in the footer? I think I got that code from someone because it wasn’t staying centred. Someone from the forum suggested I put that code in there to keep it from messing up. Is there a way of keeping it there and having the borders around the images that I want to show up?

Yes I got rid of the borders around the placeholders. That’s wild how that code affected everything!

[ruenel]

Hello Grace,

CSS codes needs to be added in the provided CSS section. The HTML codes needs to be inserted on a raw content element if you want to display display in your footer which I think it is no longer necessary.

If you want to keep the code, please add it on a notepad or sticky note in your computer. Do no add unnecessary codes in your site to prevent any conflict or issues. That code alone took me a while to figure out that it has been messing up with the styling of the image element.

Cheers.