Home Forums Porto Admin Template Portfolio Gallery click to open page, not enlarge thumbnail

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #10030077
    gsorkin
    Participant

    Hi! I’m using the Demo-Resume theme and because some of my portfolio are web apps, I wanted to have the thumbnails show up, but clicking them would take you to the deployed app URL.

    I currently have this set up, but clicking it gets the error that the image can’t be opened:

    <div class="col-12 col-sm-6 col-lg-3 isotope-item webApps">
        <div class="image-gallery-item mb-4 pb-3">
            <a href="https://gregsorkin.github.io/crystal_collector_game/" target="_blank" class="lightbox-portfolio">
                <span class="thumb-info custom-thumb-info-1">
                   <span class="thumb-info-wrapper">
                       <span class="thumb-info-plus"></span>
                       <img src="img/web_apps/crystalGame.jpg" class="img-fluid" alt="Crystal Collector Game">
    	       </span>
    	    </span>
    	</a>
        </div>
    </div>

    I’m not sure if I should blend galleries with another theme, as I do intend to use the thumbnail enlargement for non-web app portfolio items or if I should replace the whole thing entirely.

    Thanks for your advice. Loving the theme so far!

    -Greg


    • This topic was modified 5 months, 2 weeks ago by  gsorkin.

    Template Version: Demo Resume
    #10030080
    Support2
    Keymaster

    Hello Greg, thanks for your purchase.

    You can just remove the class class="lightbox-portfolio" from the gallery items where you want to open a link. For example:

    <div class="col-12 col-sm-6 col-lg-3 isotope-item webApps">
        <div class="image-gallery-item mb-4 pb-3">
            <a href="https://gregsorkin.github.io/crystal_collector_game/" target="_blank">
                <span class="thumb-info custom-thumb-info-1">
                   <span class="thumb-info-wrapper">
                       <span class="thumb-info-plus"></span>
                       <img src="img/web_apps/crystalGame.jpg" class="img-fluid" alt="Crystal Collector Game">
    	       </span>
    	    </span>
    	</a>
        </div>
    </div>

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10030083
    gsorkin
    Participant

    Thank you, Rodrigo!


    #10030085
    Support2
    Keymaster

    Hello,

    Great! 🙂

    If you need further assistance feel free to contact us.

    Kind Regards,

    Rodrigo.


    #10030086
    gsorkin
    Participant

    Hi, Rodrigo.

    If this page will live as a static one on gitpages, how would you recommend connecting the mail form so that it’s functional? They don’t allow PHP as far as I’m aware.

    Thanks!
    Greg


    • This reply was modified 5 months, 2 weeks ago by  gsorkin.
    #10030090
    Support2
    Keymaster

    Hello Greg,

    In that case we recommend you a static contact form trough the service FormSpree. Check this FAQ:

    Hope this help.

    Kind Regards,

    Rodrigo.


    #10030096
    gsorkin
    Participant

    Hi, Rodrigo–

    Thanks for the tip. I’m trying to make it work and included the instructions on your linked post, but I’m running into these errors. I know it’s not your product, but do you have any experience with Formspree? Not sure why it’s getting a CORS error, but it’s overwriting your icon font.

    I tried pasting that into codepen.io to activate the form, which worked, so it’s something to do with the template, near as I can tell.

    Formspree Errors

    And this is the code, plus the code from the linked post added to the custom.js file:

    <!-- MESSAGE SENDER FORM -->
    <div id="say-hello" class="container-fluid">
    	<div class="row">
    		<div class="col-lg-6 p-0">
    			<section class="section section-no-border bg-color-primary h-100 m-0">
    				<div class="row justify-content-end m-0">
    					<div class="col-half-section col-half-section-right mr-3">
    									
    						<h2 class="text-color-quaternary text-uppercase font-weight-extra-bold">Say Hello</h2>
    						<form id="contactForm" class="contact-form custom-form-style" action="https://formspree.io/gregsorkin@gmail.com" method="post">
    						<div class="contact-form-success alert alert-success d-none mt-4" id="contactSuccess">
    							<strong>Success!</strong> Your message has been sent to us.
    						</div>
    						<div class="contact-form-error alert alert-danger d-none mt-4" id="contactError">
    							<strong>Error!</strong> There was an error sending your message.
    							<span class="mail-error-message text-1 d-block" id="mailErrorMessage"></span>
    						</div>
    										
    						<div class="form-content">
    							<div class="form-control-custom">
    								<input type="text" class="form-control" name="name" placeholder="Your Name *" data-msg-required="This field is required." id="name" required="" />
    							</div>
    							<div class="form-control-custom">
    								<input type="text" class="form-control" name="_replyto" placeholder="Your Email *" data-msg-required="This field is required." id="email" required="" />
    							</div>
    							<div class="form-control-custom">
    								<input type="text" class="form-control" name="subject" placeholder="Subject *" data-msg-required="This field is required." id="subject" required="" />
    							</div>
    							<div class="form-control-custom">
    								<textarea maxlength="5000" data-msg-required="Please enter your message." rows="10" class="form-control" name="message" placeholder="Message*" id="message" required="" aria-required="true"></textarea>
    							</div>
    							<input type="submit" class="btn btn-quaternary text-color-light text-uppercase font-weight-semibold outline-none custom-btn-style-2 custom-border-radius-1" value="Submit" />
    						</div>
    					</form>
    
    				</div>
    			</div>
    		</section>
    </div>

    and

    (function($) {
    
    	'use strict';
    
    	$('#contactFormFormspree').validate();
    
    }).apply(this, [jQuery]);

    Thanks!
    Greg


    • This reply was modified 5 months, 2 weeks ago by  gsorkin.
    #10030101
    Support2
    Keymaster

    Hello,

    Make sure that the HTML code is like explained on the tutorial. Try changing your HTML code to:

    <!-- MESSAGE SENDER FORM -->
    <div id="say-hello" class="container-fluid">
    	<div class="row">
    		<div class="col-lg-6 p-0">
    			<section class="section section-no-border bg-color-primary h-100 m-0">
    				<div class="row justify-content-end m-0">
    					<div class="col-half-section col-half-section-right mr-3">
    									
    						<h2 class="text-color-quaternary text-uppercase font-weight-extra-bold">Say Hello</h2>
    						<form id="contactFormFormspree" class="custom-form-style" action="https://formspree.io/gregsorkin@gmail.com" method="post">
    							<input type="hidden" name="_subject" value="Contact Form" />
    							<input type="hidden" name="_next" value="http://www.yourwebsite.com/thank-you.html" />
    											
    							<div class="form-content">
    								<div class="form-control-custom">
    									<input type="text" class="form-control" name="name" placeholder="Your Name *" data-msg-required="This field is required." id="name" required="" />
    								</div>
    								<div class="form-control-custom">
    									<input type="text" class="form-control" name="_replyto" placeholder="Your Email *" data-msg-required="This field is required." id="email" required="" />
    								</div>
    								<div class="form-control-custom">
    									<input type="text" class="form-control" name="subject" placeholder="Subject *" data-msg-required="This field is required." id="subject" required="" />
    								</div>
    								<div class="form-control-custom">
    									<textarea maxlength="5000" data-msg-required="Please enter your message." rows="10" class="form-control" name="message" placeholder="Message*" id="message" required="" aria-required="true"></textarea>
    								</div>
    								<input type="submit" class="btn btn-quaternary text-color-light text-uppercase font-weight-semibold outline-none custom-btn-style-2 custom-border-radius-1" value="Submit" />
    							</div>
    						</form>
    
    				</div>
    			</div>
    		</section>
    </div>

    Hope this helps.

    Kind Regards,

    Rodrigo.


    • This reply was modified 5 months, 1 week ago by  Support2.
Viewing 8 posts - 1 through 8 (of 8 total)