I'm trying to generate multiple hexagons with background images, using a php for loop:
<?php
$dir = 'resources/images/logos';
$images = scandir($dir);
for($i = 2; $i < count($images); $i++) {
$title = explode('.', $images[$i])[0];
?>
<div class="hexagon_loc<?= $i ?>">
<div class="hexagon image" title="<?= $title ?>"></div>
</div>
<?php } ?>
This works fine, I make a div, with a different class name every time and with the correct title (based of on the filename of the image). Now I want to have a for loop in scss which draws the hexagons, I also want to define the background-images there. But since I can't pass any kind of variables from html/php to css/sass and the fact that the attr() function is widely unsupported I have no way of dynamically doing this, which would result in the titles possibly being mismatched with the images. Is there anyway to do this anyways? Or do I have to use a different approach entirely?
Example sass where I want to define the image:
.hexagon_loc {
$image: '../../resources/images/bill.jpeg';
#include hexagon($image);
margin-left: 100px;
}
Using vanilla JavaScript to solve this would also be a possibility
Thanks
In this situation, I would use <img> HTML element.
There is a CSS solution but it is not supported in many browsers.
div { background-image : attr(data-image); }
Related
I have an upcoming project that involves creating a Wordpress theme that will be able to be reused with minor style changes.
For example, I should be able to select the theme's primary and secondary colours using the ACF hex colour picker which would then be reflected on the front-end to update the look of the website.
I currently use SASS/Gulp to make style changes locally.
I have thought about using Javascript to identify data attributes set on the body tag, which would be populated with the fields set within the CMS - but I can't imagine that would be great for page speed etc. as it would be changing the colours of elements on page load...
Any ideas would be appreciated, I am open to all suggestions!
Thanks in advance :)
Using SCSS variables won't work easy because they are replaced with the acutal values on compilation. You would have to generate a SCSS stylesheet using PHP before compiling it.
You could define CSS custom properties in a <style> tag you print using PHP.
<?php $primaryColor = 'red'; ?>
<?php $secondaryColor = 'blue'; ?>
<style>
--primary-color: <?php echo $primaryColor; ?>;
--secondary-color: <?php echo $secondaryColor; ?>;
</style>
Then you can use the custom properties in your other CSS.
.container {
background-color: var(--primary-color);
color: var(--secondary-color);
}
Read more about custom CSS properties: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
If you really want to use SCSS variables I can think of one way.
You will need to generate a SCSS file using PHP before compiling it.
Let's pretend you got this array from a database:
$variables = [
'primaryColor' => 'red',
'secondaryColor => 'blue',
];
You can use this data to generate a SCSS file with variables only.
$scss = '';
foreach ($variables as $name => $value) {
$line = sprintf('$%s: %s;', $name, $value) . PHP_EOL;
$scss .= $line;
}
file_put_contents('/path/to/scss/directory/_variables.scss', $scss);
This will result in this file (_variables.scss):
$primaryColor: red;
$secondaryColor: blue;
Now import this file in your main SCSS stylesheet.
#import 'variables';
.container {
background-color: $primaryColor;
color: $secondaryColor;
}
Which will result in the following CSS on compilation:
.container {
background-color: red;
color: blue;
}
The only problem is that you will have to re-compile all SCSS if you change a value. You can use scssphp to do this on the fly: https://scssphp.github.io/scssphp/
You could store the selected values in your DB and overwrite your external css with inline styles on the required elements:
<div <?php isset($primary) ? print 'style="background-color:' . $primary . ' " ' : '' ?> >
I have a php function as shown below, which takes in an array that has values from an SQL query (in another, not shown function). In this case, the SQL query returns a set of filenames and their associated picture names.
// Take in an array of filters;
// each element is a dictionary of column name
// to the value of that row from SQL query
function displayFilters($filters) {
foreach($filters as $filter){
//output images in img tags, with their appropriate classes
echo " <div class='w3-quarter'>
<div class='w3-card-2'>
<img src='images/".$filter['File_Name']."' style='width:100%'>
<div class='w3-container'>
<h4>".$filter['Filter_Name']."</h4>
</div>
</div>
</div>";
}
}
Now, this works fine and will properly display the images as I want. However, I keep having to modify this code, change classes, properties and what not, and if I need to add/modify to the div, I have to go into this function to change everything. Is there a better way to do this than going into the echo function to change it? I'd rather not have to use Javascript if possible, but if that is the only clean way to do it, can someone point me to a way to do this?
<?php function displayFilters($filters) {
foreach($filters as $filter){ ?>
//output images in img tags, with their appropriate classes
<div class='w3-quarter'>
<div class='w3-card-2'>
<img src='images/<?=$filter['File_Name']>' style='width:100%'>
<div class='w3-container'>
<h4><?=$filter['Filter_Name']></h4>
</div>
</div>
</div>
<?php
}
} ?>
I do it this way and it seems easy than learning a new template engine
Use a PHP Template Engine
http://www.smarty.net/
Smarty is fast and lean with a small memory footprint.
http://twig.sensiolabs.org/ (Looks remarkably like Dwoo)
Twig is a modern template engine for PHP (Fast, Secure, Flexible)
http://dwoo.org/ (Inspired by Smarty)
Dwoo is a templating system used to make creating websites easier and more structured.
http://platesphp.com/ (Inspired by Twig)
Plates is a native PHP template system that’s fast, easy to use and easy to extend.
http://phptal.org/
PHPTAL is a PHP implementation of ZPT work. To be short, PHPTAL is a XML/XHTML template library for PHP.
I have written how to retrieve query and how to display in below code.
You can use this one. you can also use image tag within table <tr> tag.
$con=mysqli_connect('localhost','username','password','databasename');
$sql="SELECT `COL 1` , `COL 2` , `COL 3` , `COL 4` , `COL 5` , `COL 12` FROM `TABLE` WHERE 1 ORDER BY `COL 3` ;";
$result=mysqli_query($con,$sql);
<table style="width:100%" >
<tr>
<th>Col1</th>
<th>Clo2</th>
<th>Col3</th>
</tr>
<?
while ($row=mysqli_fetch_row($result))
{
echo "<tr><td>".$row[0]."</td><td>".$row[1]."\t".$row[2]."\t".$row[3]."\t".$row[4]."</td><td>".$row[5]."</td></tr>";
}
?>
</table>
I am using this wonderful jquery plugin called justified gallery. Below is a simplified html syntax to use this plugin, followed by javascript syntax.
HTML
<div id="my-gallery">
<a href="path/to...............">
<img src="path/to/............1.jpg" />
</a>
<a href="path/to...............">
<img src="path/to/............2.jpg" />
</a>
.......
</div>
JAVASCRIPT
<script>jQuery("#my-gallery").justifiedGallery({
rowHeight : 120,
margins : 0
});</script>
ISSUE - With the above code the plugin is working just fine BUT only for the first instance of the html syntax. Meaning, if I try <div id="my-gallery">......</div> twice or more on the same page, it only works on the first instance. Since there is going to be multiple galleries on a same page I need this to loop.
I can handle php well but yet to start learning javascript so unable to hack the javascript. If it was only php I would have generated different ids for each gallery with something like the code below.
$arr = array('first_gallery', 'second_gallery', 'third_gallery');
$i = 0;
foreach($arr as $a){
echo '<div id="my-gallery-'.$i.'">'.$a. '</div><br>';
$i++;
}
The code above would have resulted to this in the view-source.
<div id="my-gallery-0">first_gallery</div><br>
<div id="my-gallery-1">second_gallery</div><br>
<div id="my-gallery-2">third_gallery</div><br>
So the question is, is my logic correct to solve this, if yes then (since my javascript is nill) how do I solve this in context of my javascript. Any response if appreciated. TIA.
You are not allowed to have multiple element with identical id's... so having two or more <div id="my-gallery"> is invalid HTML.
Instead give each one a class, and use that class name as the selector in your jQuery.
<div id="my-gallery1" class="my-gallery-class">
...
</div>
<div id="my-gallery2" class="my-gallery-class">
...
</div>
$(function(){
$(".my-gallery-class").each(function(){
$(this).justifiedGallery({
rowHeight : 120,
margins : 0
});
});
});
Use a class instead. An ID must be unique. Having multiple identical IDs is invalid HTML. Output as follows:
$arr = array('first_gallery', 'second_gallery', 'third_gallery');
foreach($arr as $a){
echo '<div class="my-gallery">'.$a. '</div><br>';
}
And use Javascript then like this. (Note that a document ready event might be required!)
<script>
$(document).ready(function() {
$(".my-gallery").justifiedGallery({
rowHeight : 120,
margins : 0
});
</script>
Using br in HTML for this purpose is discouraged. If your elements are block elements and are not floated or absolutely positioned, you won't need br. If you want some space between them you can set a margin is CSS (and remove br):
.my-gallery {margin: 24px auto;}
If you want to keep the unique ID on the gallery items (I don't know why, it seems pointless and needless markup to me, but anyway) you can do it like this:
$arr = array('first_gallery', 'second_gallery', 'third_gallery');
$i = 0;
foreach($arr as $a){
echo '<div class="my-gallery" id="my-gallery-'.$i.'">'.$a. '</div><br>';
$i++;
}
As others have suggested you can give each gallery a common class and use that in your JavaScript
eg:
<div class="gallery" id="my-gallery-0">first_gallery</div><br>
<div class="gallery" id="my-gallery-1">second_gallery</div><br>
<div class="gallery" id="my-gallery-2">third_gallery</div><br>
<script>
jQuery(".gallery").justifiedGallery({
rowHeight : 120,
margins : 0
});
</script>
I need to generate a unique ID via js or PHP. Obviously this is pretty easy, but the part I can't figure out is that I need to generate a unique id for a <p> element, and then reference that unique id in some inline js below.
Here's the code to make this more clear:
<p id="UNIQUE-ID" class="toolbox"><a class="tooltip" onmouseover="tooltip.pop(this, '##UNIQUE-ID');"></a>
Basically, in both places where it says "UNIQUE-ID", I need an identical unique id generated. There will be an unknown number of these kind of <p> and <a> pairs generated dynamically.
Any help is greatly appreciated.
You've said that the <p> and <a> pairs are generated dynamically, and also asked for a unique ID "...via js or PHP..." So I'm going to assume the dynamic generation is via PHP, in some kind of loop.
If so, just remember the value in a variable in your loop and output it in the two required locations, e.g.:
<?php
while (someCondition) {
$id = /* ...generate the ID...*/;
?>
<p id="<?=$id?>" class="toolbox"><a class="tooltip" onmouseover="tooltip.pop(this, '##<?=$id?>');"></a>
<?php
}
?>
(Obviously that's using shorttags, which many people recommend against. But it gets the idea across. If you don't use shorttags, you can easily change that to use echo instead.)
I am just giving the structure.Just change it according to your requirement
<?php
for($i=0;condition;$i++)
{
?>
<p id="par_<?php echo $i;?>" <a id="id_<?php echo $i;?>" href=""></a>
<?php
}
?>
So I have a bunch of images for which I am adding a few data attributes, which I want to use later on in jquery.
The PHP/HTML looks kind of like this:
<?
foreach($images as $image)
{
?>
<div class='dyn-img'>
<img <!-- start image tag -->
src="<? echo $image['src']?>"
data-aspect-ratio ="<? echo $image['aspect_ratio']?>"
... //other dynamic data attribs
> <!-- end image tag -->
</div>
<?
}
?>
Later on in jQuery, I need to take these dynamically loaded images and pass their aspect ratios into a library function:
So in the jQuery part I do (inside document.ready fn):
$(".img-holder > img").cropper({
aspectRatio: 1, //<-- this needs to be the data-aspect-ratio defined earlier
... other attributes...
});
I tried using aspectRatio: this.data("aspect-ratio") however that gives me a javascript error saying
TypeError: this.data is not a function
aspectRatio: this.data("aspect-ratio"),
My jQuery skills are basic, so I am hoping there is some jQuery/Javascript masters here who can help show me how I can pass that value into this function.
Any help is greatly appreciated!
I would loop using each, get the attribute, then call cropper
$(".img-holder > img").each(function() {
var size = $(this).data("aspect-ratio");
$(this).cropper({
aspectRatio: size
});
});