Home Forums Arnold WordPress Theme Picture Grid with External Links

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #22965
    kickassidy
    Participant
    Purchased
    Supported

    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!

    #22966
    SeaTheme
    Keymaster
    Purchased
    Expired

    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.netTwitterFacebook

    #22973
    kickassidy
    Participant
    Purchased
    Supported

    Thanks a million

    #22974
    SeaTheme
    Keymaster
    Purchased
    Expired

    Welcome! πŸ™‚

    #23115
    kickassidy
    Participant
    Purchased
    Supported

    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

    #23118
    SeaTheme
    Keymaster
    Purchased
    Expired
    #23726
    kickassidy
    Participant
    Purchased
    Supported
    This reply has been marked as private.
    #23730
    SeaTheme
    Keymaster
    Purchased
    Expired
    This reply has been marked as private.
    #23734
    kickassidy
    Participant
    Purchased
    Supported

    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

    #23743
    SeaTheme
    Keymaster
    Purchased
    Expired

    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

    #23753
    kickassidy
    Participant
    Purchased
    Supported

    You're totally amazing β€” thank you!

    #23826
    kickassidy
    Participant
    Purchased
    Supported

    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

    #23832
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

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

    Regards

    #23835
    kickassidy
    Participant
    Purchased
    Supported

    thank you

    #23951
    kickassidy
    Participant
    Purchased
    Supported

    Hello, super smart humans.

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

    Thank you for your help πŸ™‚

    #23954
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

    Please activate “Introduction Section”, enter the text to the WP classic editor πŸ™‚

    Regards!

    #23958
    kickassidy
    Participant
    Purchased
    Supported

    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 πŸ™‚

    #23959
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi, welcome

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

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

    Regards

    #23980
    kickassidy
    Participant
    Purchased
    Supported

    you are #1

Viewing 19 posts - 1 through 19 (of 19 total)
  • You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!