Hi,

1) Which images? You want to make the middle one bigger? or social media smaller?

2) Do you mean same style as in, one really huge image in middle but instead have 2 huge images in 2 columns? I am sorry but could you illustrate what you want as an end result with two columns regarding to the style since thats a very subjective word.

Thanks,

Nick

Hi,

You mean it displays at that size on a non-retina browser? at 200 height and 400 width? Are you sure about that , because the theme will resize anything over 120 height or so and maybe 230 width. That’s why I wanted to take a look at it..

Alright, since you don’t want to go the easy with the plugin, we will go the hard way by installing the retina.js manually. You will need to download it from the src folder here https://github.com/imulus/retinajs … also as you can see there are some useful tests you can run calibrating it. . Just add the retina.js file to the /js/ theme folder and now in your functions.php file, add the following code to line 200 (which is empty)

wp_register_script( 'jquery-retina', $template_url.'/js/retina.js', array('jquery'), 1, true );

and add this code to line 207 of the same file

wp_enqueue_script( 'jquery-retina' );

Alright now just resize the image exactly twice bigger but save it under the same name as original but with @2x at the end, so that if you had logo.png , you will now have (Email address hidden if logged out) and put it right next to where your logo is stored in same folder.

Now for your logo, you will need to change the above line you pasted to look like this

$logo = "<img src=".$logo." alt='' width='200' height='100'/>";

to look like this

<img src="http://full-url-to-image/logo.png" data-at2x="http: (Email address hidden if logged out) " />

And last but not least, here is the css you must use, just add it to /css/custom.css , Just please replace with name of your file, url to file and url to retina image and sizes.

.logo {

background-image: url('/images/my_image.png');

}



@media all and (-webkit-min-device-pixel-ratio: 1.5) {

.logo {

background-image: url(' (Email address hidden if logged out) ');

background-size: 200px 100px;

}

}

Thanks,

Nick

Hi,

So your question is how do you enable that? That is an effect that I think is automatic with the theme. So if you add an image element to a page and link it somewhere, the image, that effect will be attached to that image on its own. Images in advanced layout elements such as portfolios, gallerys, sliders, thumbnails… they all have this functionality attached automatically. It is CSS manipulated by jquery basically. looks like this

<a href="http://kriesi.at/" data-rel="grid-1" class="grid-image" style="height: auto; opacity: 1; position: relative; overflow: hidden;">



<img width="495" height="400" src="http://kriesi.at/dash_glass2-495x400.jpg" class="attachment-portfolio wp-post-image">



<span class="image-overlay overlay-type-extern" style="opacity: 0.7; left: 0px; top: 0px; display: block; height: 276px; width: 342px;">



<span class="image-overlay-inside"></span>



</span>



</a>

Was there something specific you wanted to use it for that you couldn’t?

Thanks,

Nick

Hi,

Please add this css to your /css/custom.css file OR to Quick CSS located in Enfold > Layout Styling… the text area at the bottom of the page

.avia-slider-testimonials.avia-testimonial-wrapper .avia-testimonial-row {

height: 125px !important;

}

@media only screen and (max-width: 980px) {

.avia-slider-testimonials.avia-testimonial-wrapper .avia-testimonial-row {

height: 175px !important;

}}

@media only screen and (max-width: 767px) {

.avia-slider-testimonials.avia-testimonial-wrapper .avia-testimonial-row {

height: 375px !important;

}}

Your testimonials are causing the lower part of the page to jiggle and jump.. This stabilizes it.

—-

That table has got to go. Tables are for data like if you were to show how many people in each city of the world own this product, then you would use a table. Can’t use tables to prop up the page’s layout or the div design police will come.

Instead use an image gallery with small images option. Stick all 6 images in it, and add your text as a tooltip, be nice and animated and responsive as well.

View post on imgur.com

looks good on small phones and rearranges itself properly

http://www.clipular.com/c?8224023=DSxT87g0svAM0J2q6Wht60Q9MVc&f=.png

this is how I added the gallery with these settings

http://www.clipular.com/c?8229018=MbJFLRKUz3IiwDSwA9oAq-z4iWI&f=.png

and here is where you set the tool tips that pop out

http://www.clipular.com/c?8233017=nsSMeYJCS6s_QuxnjVZsM-XlgDY&f=.png

Here is the css you will need to add to make the gallery look good on iphone and ipad.

@media only screen and (max-width: 980px) {

#top #wrap_all .avia-gallery-thumb a {

width: 25%;

}

}

@media only screen and (max-width: 767px) {

#top #wrap_all .avia-gallery-thumb a {

width: 31% !important;

}}

Good luck,

Nick

The load speed is dependent on the size of the images, the number of them, the internet connection and the speed of the device to render the data. Overall nothing we can really do on our end but you could look into CDN type plugins or caching plugins even.

Regards,

Devin

Hi,

2). Your developer is correct. https://kriesi.at/support/topic/i-have-some-issues-with-translation-issues-and-with-the-contact-form#post-114535 This post has instructions on what to do.

3) Its possible but its also experimental. You can turn on the advanced layout builder for posts. That will allow you to add a featured image which will be seen on the main blog page (or wherever you add the blog element to a page) , but on the individual blog posts the feature image will not show, and you will be able to either add it as an image element, or add a slider or have no image, since you will be able to use all the elements available , same as on pages.

To add the layout elements to posts open config-templatebuilder/avia-template-builder/config/meta.php and change line 5 to look like

array( 'title' =>__('Avia Layout Builder','avia_framework' ), 'id'=>'avia_builder', 'page'=>array('portfolio','page,'post''), 'context'=>'normal', 'priority'=>'high', 'expandable'=>true ),

You will also need to replace template-builder.php in the main folder with https://gist.github.com/meishern/bfbf909055e7b967dd5b this file. Without it, posts with layout elements will not have meta data or comments. This form will also add comments functionality to portfolio items.

Thanks,

Nick

Hi krzysztof_grudnik,

Glad that worked for you :)

Regards,

Devin

Hi,

My final version. This one takes care of all problems. https://gist.github.com/meishern/bfbf909055e7b967dd5b

Things to keep in mind:

* The functionality : big / small /multi-author blog will not work with the above modification with advanced template posts. Since you can add whatever image/slider you want to the individual post of any size using the advanced template builder elements, I didn’t waste time on it. If you add a featured image to the post, it will be visible on the main blog page but then you can replace it with a different image for the individual post, or have no image at all or have a slider.

Thanks,

Nick