Picture Grid with External Links

[kickassidy]

I’m wanting to make a page with a grid of 50-100 images that link to other websites. It will be product images that link to where someone can purchase (all different websites). The closest example I can find is like this: https://cupofjo.com/editors-picks/

Each image will need a text rollover or text underneath. Each image does not have a page within my WordPress nor is it a portfolio item, it is just an image that links to another website.

What is the best way to accomplish this within the way this theme is made?

Thank you so much for your help and recommendations!

[SeaTheme]

Hi,

1, create the image items(Gallery post): Posts>Add New, set as Gallery format, set a category, set a featured image(shown in the grid list). You don’t need to add content and other options to the posts.

2, install https://wordpress.org/plugins/redirection/ redirect the gallery post URL to the product URL

3, list the images on a page, Page > add new, set a portfolio template, select the category of Gallery posts. refer to : https://doc.seatheme.net/static/arnold/#pages
video tutorial: https://www.youtube.com/watch?v=TBUbgr0m1Vs&feature=emb_title

Regards!

SeaTheme – SeaTheme.net – Twitter – Facebook

[kickassidy]

[SeaTheme]

Welcome! 🙂

[kickassidy]

Your instructions are working fantastic!

The only other thing I’m hung up on is: How do I make the clicked-on gallery images (which are redirected perfectly thanks to your instruction) open in a new tab (target=”blank”)?

Here’s the page I’m wanting to make the products opened in a new tab.

Thank you!
Amy

[SeaTheme]

HI,

Please refer to https://seatheme.net/forums/topic/get-links-to-open-up-in-a-new-tab/#post-18740

Regards

[kickassidy]

This reply has been marked as private.

[SeaTheme]

This reply has been marked as private.

[kickassidy]

Theme has been updated per your instruction.
User role is now admin.

Please take a look b/c the JS is still not making the “Shop” links open in a new window.

Thank you so much for your timely assistance!
Amy

[SeaTheme]

Hi,

THanks

It was fixed.

I updated the JS:

jQuery(document).ready(function( $ ){ 
  if($('body').hasClass('page-id-1257')) {
    $('.grid-item-con').on('click', function() { 
      var url = $(this).find('.grid-item-mask-link').attr('href');
      window.open(url, '_blank');
      return false; 
   });
  }
});

added the custom CSS:

.page-id-1257 .grid-item-mask-link{pointer-events:none;}
.page-id-1257 .grid-item-con:hover{cursor:pointer}

Regards

[kickassidy]

[kickassidy]

Hello smart humans!

How can I make images on this page not clickable (I just want them to be large images on the page, not encourage the viewer to click on them)?

My previous login should work, so feel free to log in and take a look 🙂

Thank you!
Amy

[SeaTheme]

Hi,

Please add the custom CSS:
[data-lightbox="true"]{pointer-events:none;}

Regards

[kickassidy]

[kickassidy]

Hello, super smart humans.

How may I add text above the gallery on this page?

Thank you for your help 🙂

[SeaTheme]

Hi,

Please activate “Introduction Section”, enter the text to the WP classic editor 🙂

Regards!

[kickassidy]

Thank you! It’s working, however the content will only take up 3/4 of the width, and I’d like full width (just like the text under the images here is full width).

Thank you for your help 🙂

[SeaTheme]

Hi, welcome

Please paste the custom CSS code to “Appearance > Customize: Additional CSS”:

.ux-portfolio-template-intro {
    width: 100%;
}

Regards

[kickassidy]

[Author]

Posts