-
AuthorPosts
-
March 13, 2014 at 11:13 pm #237254
I am having problems with images in the portfolio. Here is the old site and similar to how I want to do it:
http://www.blaircomm.us/zportfolio.html
You can see there is a small preview image and then a large lightbox image for the same portfolio item. I can program this out in an HTML site, but within the WP environment I am having trouble. I am hoping I can configure something similar in the “Ajax Portfolio.” Here are my questions:
1. For a lightbox, I am used to 2-sizes, one for the small preview and one for the large lightbox. What I need are different proportions as the large full lightbox image is usually rectangular and large and the small preview is usually square or close to it.
a. Can I make the small preview image square to fit the grid layout and the lightbox image as a larger, rectangular image–that is two images for one portfolio item? Or, do all the images have to be from one main image and the small previews always just crop in square?
b. What is the minimum and maximum size for the square preview image?
c. I am using the “Child” theme, so in what files can I customize the blow-up size, background fades, and so on?
d. Is there a configuration file for the Ajax portfolio where I might customize it?2. I am also having trouble with the images. On a test nothing works well. See – http://blaircomm.us/blaircomm14/portfolio/portfolio-ajax/ If you click on the “Cushman & Wakefield” you will see it doesn’t then come up and the gallery images have all changed size. If you click on the sun image the “Cushman & Wakefield” image is in the gallery and is clickable, but the lightbox image is too small. There seems to be some sort of compression going on when I upload once it’s in the WordPress environment. Can you point me in the right direction as to how to get it right? It is essential I have high quality images for the small previews as well as the large lightbox.
3. I can probably work out the image upload and layout difficulties. My big concern is the cropping in on the main image for small square previews. That just won’t work on my portfolio images. I like the theme for the time it will save on developing the responsive site, but don’t know if it will work for me in the portfolio section. Am I trying to do something that is not possible in Enfold?
I hope this makes sense.
Thank you.
March 14, 2014 at 10:41 am #237508Hi blaircomm!
1) You can install this plugin: http://wordpress.org/plugins/wp-gallery-custom-links/ to apply a custom link to the gallery images. You could use it to i.e link your square thumbnail images to another “full size” image.
2) If you need full control over the thumbnail size you can select the “Don’t show the images at all and display the preview text only” option: http://www.clipular.com/c/6453051829256192.png?k=5TIdSdjsRn87CQytVuQeUU4899A
By going this way Enfold will stretch the content area of the ajax preview to 100% width and then you can use the entire space to build your custom layout. I.e. use the gallery and column shortcodes to build your custom gallery preview. The advantage is that you can use the thumbnail size options: http://www.clipular.com/c/5101738725998592.png?k=HlLKLkHRaW2pCz2oP5_O7UD9Ozw to determine the size of the squared images. You can install a plugin like: http://wordpress.org/plugins/simple-image-sizes/ to define new thumbnail sizes.
I am using the “Child” theme, so in what files can I customize the blow-up size, background fades, and so on?
Do you want to change the portfolio ajax animations? If yes the theme does not allow you to customize these settings. You would need to modify the enfold/js/avia.js but this may require some customization work and depending on your coding skills I recommend to hire a freelancer. You also can’t overwrite the js file directly with the child theme. If you want to remove the default avia.js file and register a custom avia.js file insert this code at the very bottom of the child theme functions.php:
if(!is_admin()) add_action('wp_enqueue_scripts', 'avia_register_child_frontend_scripts', 100); function avia_register_child_frontend_scripts() { $child_theme_url = get_stylesheet_directory_uri(); wp_dequeue_script('avia-default'); //register js wp_register_script( 'avia-default-child', $child_theme_url.'/js/avia.js', array('jquery'), 1, false); wp_enqueue_script( 'avia-default-child' ); }
and then place the modified avia.js into your child theme (enfold-child/js/avia.js).
3) Yes, if you want to open the full size image with the lightbox insert this code at the very bottom of your child theme functions.php file:
add_filter('avf_avia_builder_gallery_image_link', 'avia_change_gallery_thumbnail_link', 10, 4); function avia_change_gallery_thumbnail_link($link, $attachment, $atts, $meta) { $link = wp_get_attachment_image_src($attachment->ID, "full"); return $link; }
Best regards,
PeterMarch 16, 2014 at 12:42 am #238148Peter:
Thank you very much for your expertise. Most of the issues I have figured out and it looks like the theme will work for me. The few things I want to have control over such as fade speed and the Pretty Photo settings I can go into the Enfold JS files and edit the settings then it reflects in the child. For me it’s easier to do it that way than to create new JS directories within the Child hierarchy because I can take advantage of Enfold updates and just make a couple edits each time as it doesn’t happen that often.
It would be great if you could add a “slideshow transition speed” control function beneath “slideshow transition” drop-down. And also great if you could control the Pretty Photo functions from within WP, but that’s not as important.
However, I do have a couple basic questions that I must resolve before I can continue–The site in progress: http://blaircomm.us/blaircomm14/:
1. How do you set an existing page as the”home page”in Enfold? I have all WP settings to the latest post and have set the page in the Enfold Child settings–however nothing happens. Do I just rearrange the menus or what? I know it’s a stupid question, but I can’t find the answer anywhere. (I also have trouble with server latency from Network Solutions, so certain updates sometimes take up to 1/2 hour to show and it may be the reason.)
2. How do I create a new “home” page in Enfold? When I try, even though it is from a template of one of Enfold’s pre-configured home pages, it shows up as a “page” with the “you are here…” menu at the top. How can I create a “home” page from scratch and have it at the top of the hierarchy with no “you are here…” menu?
3. How can I insert a “layer slider” that is a full page like the “one-page portfolio” sample page you have that uses a”full screen slider?” Do I need to make a “full screen layer slider” and how can I get it to function as a full-page just like the”full-screen slider?” Or, can I insert a “layer-slider” into the “full-screen slider” as a media element of like an image? Point me in the right direction as I want to have four or five rotating slides for the one-page portfolio type home page that are “layer sliders.”
4. Last question: How can I adjust the column width in the “mega-menu?” They are much too wide for the menu listings and I need to be able to configure them to work according to the content.
Thank you very much.
– Michael
March 18, 2014 at 8:13 am #239193Hi!
1) Go to Enfold > Theme Options and select the front page from the “Frontpage Settings” dropdown. If this doesn’t work go to Settings > Reading and select the same page as “Static” page (make sure that the “A static page (select below)” option is selected.
2) You can hide the “you are here…” menu. Enfold 2.6.1 even introduced some new options to customize the header. Edit the page you want to use as the front page and on the right side in the “Layout” field search for the “Title Bar Settings” options. There you can select if the breadcrumb should be visible or not.
3) Use the Advanced Layout Builder on a page (just click the blue button) and then insert it as a media element: http://www.clipular.com/c/4764931148742656.png?k=AdR5mNJ-KIQbO9uxzsHpcX9Fqbg – note that Kriesi does not use a LayerSlider but a “Fullscreen Slider” element on the demo page. Afaik the LayerSlider does not support a fullscreen layout (covers entire screen siie) but it just supports the fullwidth layout (covers 100% of the screen width but you must set a fixed height).
4) You can change the menu width with this css code:
@media only screen and (min-width: 1140px){ .responsive .container .avia_mega_div.twelve.units { width: 1000px; } }
Replace 1000px with your custom value.
Cheers!
Peter -
AuthorPosts
- You must be logged in to reply to this topic.