glovep

Follow up: Integrating this straight into the theme with your code above works!

My question would be, how can you define, say the template via this method? Or all the other settings that you can set via the shortcode?

Maybe one can create some custom fields and read these fields in to add flexibility.

Thanks Mike, this did the trick! I will try to integrate it into the theme and report back my results later. Thanks again!

Thanks Mike for your reply!

Just upgraded to version 0.5.6 and used the code snippet from your example and added the ID:

[wp-tiles posts_query='post_parent={1172}&post_type=attachment&posts_per_page=-1&post_mime_type=image']

This seems to pull the attachments (from media library), but not the attachments from the particular post. Is there a better way without shortcode? I can also implement into the theme?

Thank you!

@protohominid

This is what you would need to do to keep it responsive:

Example:

.orbit-wrapper { max-height:400px;} /*height for e.g. desktop*/
@media only screen and (max-device-width : 640px){
.orbit-wrapper { max-height:200px;} /*height for smaller devices*/
}

Hey guys!

Thanks virtualpudding for your feedback.

From the url you provided, I cannot see the additions in the css file you gave us above. Just to clarify, did you just want us to add the above css at the bottom of default.css, or alter existing markup?
For example, I see

.orbit, .orbit-wrapper {
	width: 100% !important; }

which I probably need to alter as well?

In any case, for testing purposes I added the 2 classes as you suggested. This does prevent the images being stacked up, but without adding a fixed height here:

div.orbit-wrapper {
    height: 250px; /*original was 1px*/
    position: relative;
}

it still flashes (meaning the container size resizes and results in the content underneath suddenly moving down).

So now in Chrome this seems to be the solution, but Firefox (v9.0.1) still flashes briefly.

Is it possible that I have to set fixed height/width at a few other occasions, I do see quite a few height:1px and height:100% in the css, which I think might be the reason Firefox still doesn’t act up as nice as Chrome.

Please advice where/what needs to be altered. Thank you for your help!

JorgenScott, thanks for the info.

I did the following:

The adaptive-images.php file lives in the theme folder, while the ai-cache folder is inside the wp-content directory. I then used the separate mod_rewrite directive like you suggested, but it results in that there are no images shown at all, neither on desktop or mobile device. So the directive does do something, but I am not sure whether the path to the source images wp-content/uploads is incorrect or whether the adaptive-images.php can’t be found. Either way, the ai-cache folder remains empty hence no images get resized. Any thoughts?

Your idea of a plugin sounds excellent. If you need beta testers, loop me in!

Jorgen, could you share how your htaccess file looks like?
I have the following within “mod_rewrite.c” (basic WordPress permalink stuff)

RewriteEngine On
RewriteBase /site/
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /site/index.php [L]

I am not sure where to correctly add the adaptive-images stuff:
RewriteCond %{REQUEST_URI} !assets
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php

Any ideas?