I'm converting my wife's blog over to Wordpress and I want to display image galleries similar to how they're displayed on Tumblr. Here's an example of the layout:
http://bobbyandmaura.com/post/8195960363/photoset_iframe/bobbyandmaura/tumblr_lp2nebJFEW1qhd8ae/500
I can handle the markup and CSS for displaying the images. What I need help with is understanding how I can create this dynamically. Tumblr is smart enough to dynamically display different quantities of images while still always filling all of the space. Here's another example with fewer image:
http://bobbyandmaura.com/post/6700400507/photoset_iframe/bobbyandmaura/tumblr_ln23gi8EqU1qhd8ae/500
Hopefully I can use math to create a dynamic solution so I don't have to manually create a bunch of different possibilities.
OK. Solved. I got a hack to show WP gallery as Tumblr photoset. It is not as customizable as Tumblr, this will only show the first image as the cover image(larger) and rest images in small grid like set.
You need to edit wp-includes/media.php file. If your theme as any other gallery file, you have to edit that. Edit at your own risk as this is core file of WP. If you update your WP in future, you have to do this again. Sorry, I have no time to write a plugin.
Search for "foreach ( $attachments as $id => $attachment )" in wp-includes/media.php and change the following (replace the foreach loop)
$ccg = 1;
foreach ( $attachments as $id => $attachment ) {
if($ccg == 1)
{
$link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, large, false, false) : wp_get_attachment_link($id, $size, true, false);
}
else
{
$link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);
}
$output .= "<{$itemtag} class='gallery-item'>";
$output .= "
<{$icontag} class='gallery-icon'>
$link
</{$icontag}>";
if ( $captiontag && trim($attachment->post_excerpt) ) {
$output .= "
<{$captiontag} class='wp-caption-text gallery-caption'>
" . wptexturize($attachment->post_excerpt) . "
</{$captiontag}>";
}
$output .= "</{$itemtag}>";
if ( ( $columns > 1 && ++$i % $columns == 1) || $ccg == 1 )
$output .= '<br style="clear: both" />';
$ccg++;
}
Demo gallery can be found at http://ontrip.in/the-ca-cur-badi-forest-resort-gorumara/
You may need to modify your Gallery columns number. You may select the cover image by alternating the image order in Gallery insert box.
My friend Victor Gonzáles developed Aurum to manage proportions and have that nice effect. You can get it here: https://github.com/aficiomaquinas/Aurum-CSS
You then additionally group the images by similar proportions(w/h) with a tolerance of 0.2. So that <0.2 is one group < 0.4 another, < 0.6, etc.
Then have a random chance of spawning them in 1,2,3 columns / row.
Related
How to sort glob included html webpages by metatag?
I making Minecraft server listing website (cant afford buying ready script + cant setup database), so i want to know how i can sort html webpages by metatags(for list by votes/newest).
I tried this to include all html webpages in directory:
<?php
foreach (glob("/data/www/mc/servers/pages/*.html") as $filename) {
$tags = get_meta_tags($filename);
$votes = $tags['votes'];
//$list = array("type"=>$filename, "price"=>$votes);
//foreach ($filename as $key => $row) {
//$list[$key] = $row['price'];
//}
//$show = array_multisort($list, SORT_DESC, $filename);
include $filename;
echo "Votes: $votes.";
}
//$list = array("type"=>$filename, "price"=>$votes);
//foreach ($filename as $key => $list) {
//$list[$key] = $row['price'];
//}
//$sort = array_multisort($votes, SORT_DESC, $filename);
//$show = array_column($filename, $votes);
//$view = array_multisort($show, SORT_DESC, $filename);
?>
I found parts of code and tried to modify it, but after multiple tries, i got almost nothing.
"//" is tried code, I commented it for at least show "webpages" and "votes" in random list.
But i prefer to show it from high to low.
Please, I cant afford spend 33$ for 1 script and cant order developer to fix problems with php-fpm to enable phpmyadmin.
My monthly passive income is around 15$(1k rubles), also im disabled by documents.
I am trying to customize the metadata for my posts. Specifically, I want to change the separator from the default forward slash (/) to a vertical line (|). I also want to add the word "Updated" before the date displayed. And, I want to keep the option to display reading time. (*FYI: I know basically nothing about coding, just trying to override the metadata output from Astra)
I used this code to change the separator (found in a post about how to customize post meta in Astra theme):
add_filter('astra_single_post_meta', 'custom_post_meta');
function custom_post_meta($old_meta)
{
$post_meta = astra_get_option('blog-single-meta');
if (!$post_meta) return $old_meta;
$new_output = astra_get_post_meta($post_meta, "|");
if (!$new_output) return $old_meta;
return "<div class='entry-meta'>$new_output</div>";
}
See the output in image 1 - looks great!
output of new code for separator
This is close, but still needed to add "Updated" before the date. So, I used this code (from same post mentioned above):
function astra_post_date()
{
$format = apply_filters('astra_post_date_format', '');
$published = esc_html(get_the_date($format));
$modified = esc_html(get_the_modified_date($format));
$output = '<p class="posted-on">';
$output .= 'Updated: <span class="published" ';
$output .= 'itemprop="datePublished">' . $published;
$output .= '</span>';
$output .= '</p>';
return apply_filters('astra_post_date', $output);
}
See output in image 2 - content is perfect, but formatting is wrong. Can't figure out how to edit the code to get all 3 fields on the same line.
output of new code for adding "Update"
What do I need to change in the 2nd block of code to keep everything on one line like the 1st block of code?
Thanks for any help!
Suppose that I have a block of HTML:
<figure>
<img/>
</figure>
and I need to wrap them in Twitter Bootstrap 3 columns, like <div class="col-md-3">{content}</div>. I need to make rows every 4 times in the loop (to sum the 12 columns fitting the row) to make the grid.
How is the best way to achieve this?
Does Twig offer that solution easily? I would like to just pass what the each column classes I need and the "function" work out to split the columns automagically.
I'm using https://stackoverflow.com/a/16428403/1110456 as a solution, but seems that has a better way to do that. I currently use CakePHP and a framework and PHP language.
You need to try something like this. It will:
Get a count of how many objects you have in your view
Set the object counter and column counter to zero
If this is your first column, start a <div class="row">
Display the content
Increment the column counter by one
If this is column 4, or if this is your final item, close the row div
and reset the column counter.
$count = count($models);
$i = 0;
$column = 0;
foreach ($models as $model) {
if ($column == 0) {
echo "<div class='row'>";
}
echo "<div class='col-md-3'>" . "Content" . "</div>";
$column = $column + 1;
if((++$i === $count && $column !== 4) || ($column == 4)) {
echo "</div>";
$column = 0;
}
}
I'm new to web-design and in process of creating a sports website based on the WordPress platform.
One of the sports that the site will be covering is cricket. My site is almost done, but I'm stuck at few very important CSS/Html tables for data. I would really appreciate if someone here could guide/help me on how to create tables like the ones in the links bellow or whether there is anyway someone can copy html/css from an existing site and style it.
I just need a copy of the tables, sorting options are not needed
Similar scorecard as light as possible would be great
Are these things possible with CSS/html in Wordpress or is there any better option for such tables?
Here are two solutions you could use:
Solution #1: TabPress Plugin
Through a graphical panel, you can fully customize your table. You can set your own CSS, you can have colspan, rowspan or all together. Check out the demo. If you don't want to spend too much time in coding, give it a try.
Solution #2: WP_List_Table
It's available since WordPress 3.1. WP 3.1 uses it to build the tables you can see in the admin panel. The table who displays the posts for instance uses this class. However, you can disable some features such as sorting, bulk operations etc.
Here is a sample code taken from one of my blogs. I wanted to display a table of statistics with no sorting option. Call ff_show_stats() to display the table from your PHP code.
if( ! class_exists( 'WP_List_Table' ) ) {
require_once( ABSPATH . 'wp-admin/includes/class-wp-list-table.php' );
}
class FFStatsTable extends WP_List_Table {
function __construct(){
}
function get_columns(){
$columns = array(
'id' => 'ID',
'creation' => 'Creation',
'country' => 'Country'
// Add as much column as you want
// 'column_name_in_query' => 'Displayed column name'
);
return $columns;
}
function column_default( $item, $column_name ) {
switch( $column_name ) {
case 'id':
case 'creation':
case 'country':
return $item[ $column_name ];
default:
return print_r( $item, true ) ; //Show the whole array for debugging purposes
}
}
function prepare_items() {
global $wpdb;
$columns = $this->get_columns();
$hidden = array();
$sortable = array();//Empty array for disabling sorting
$this->_column_headers = array($columns, $hidden, $sortable);
$this->items = $wpdb->get_results(
"SELECT id,creation,country FROM wp_my_table WHERE my_condtion=TRUE",
ARRAY_A
);
}
}
function ff_show_stats() {
$myListTable = new FFStatsTable();
echo '<div class="wrap"><h2>Stats</h2>';
$myListTable->prepare_items();
$myListTable->display();
echo '</div>';
}
You can have a more detailed sample code here : http://plugins.svn.wordpress.org/custom-list-table-example/tags/1.2/list-table-example.php
How can I display a new background image on each page refresh on a website (using Wordpress if this helps anything)? I would also like to take into account different screen resolutions, and proper handling for this. Any help would be greatly appreciated.
Have you seen this page in the wordpress codex?
It explains how to rotate the header image. It shouldn't be too hard adapt it for your needs.
Just have your own script that randomly returns pictures each time it is accessed. I have one that I wrote in C at the URL below that returns a different pic each time.
http://www.scale18.com/cgi-bin/gpic
You can generate it in realtime with GD library
To detect screen resolution, you can use client-side javascript
screen.height
screen.width
To display a different image, you could probably use a script to generate a random number and display the image that ties to it...?
You could store the "current" imaage in the session and just check each time you generate a new random number, that it's not going to display the last....
This is what I use with Wordpress to randomly rotate the header images on my site.
Someone else wrote the code and I can't remember who. Put the php code below into a file named rotate.php, and then put rotate.php into the directory of images that are to be rotated (i.e. "headerimages"), and rotate.php will draw from them. Call rotate.php from your CSS style sheet in whatever DIV is used for your headerimage.
I don't understand what you mean by being able to handle different screen resolutions. End user screen resolutions?
<?php
/*
Call this way: <img src="http://example.com/rotate.php">
Set $folder to the full path to the location of your images.
For example: $folder = '/user/me/example.com/images/';
If the rotate.php file will be in the same folder as your
images then you should leave it set to $folder = '.';
*/
$folder = '.';
$extList = array();
$extList['gif'] = 'image/gif';
$extList['jpg'] = 'image/jpeg';
$extList['jpeg'] = 'image/jpeg';
$extList['png'] = 'image/png';
$img = null;
if (substr($folder,-1) != '/') {
$folder = $folder.'/';
}
if (isset($_GET['img'])) {
$imageInfo = pathinfo($_GET['img']);
if (
isset( $extList[ strtolower( $imageInfo['extension'] ) ] ) &&
file_exists( $folder.$imageInfo['basename'] )
) {
$img = $folder.$imageInfo['basename'];
}
} else {
$fileList = array();
$handle = opendir($folder);
while ( false !== ( $file = readdir($handle) ) ) {
$file_info = pathinfo($file);
if (
isset( $extList[ strtolower( $file_info['extension'] ) ] )
) {
$fileList[] = $file;
}
}
closedir($handle);
if (count($fileList) > 0) {
$imageNumber = time() % count($fileList);
$img = $folder.$fileList[$imageNumber];
}
}
if ($img!=null) {
$imageInfo = pathinfo($img);
$contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ];
header ($contentType);
readfile($img);
} else {
if ( function_exists('imagecreate') ) {
header ("Content-type: image/png");
$im = #imagecreate (100, 100)
or die ("Cannot initialize new GD image stream");
$background_color = imagecolorallocate ($im, 255, 255, 255);
$text_color = imagecolorallocate ($im, 0,0,0);
imagestring ($im, 2, 5, 5, "IMAGE ERROR", $text_color);
imagepng ($im);
imagedestroy($im);
}
}
?>
JavaScript is probably your best bet for this one.