Is it possible to create a conditional loop in Sass/Compass (with Middleman) based upon availability of (SVG) images?
I have upto 150 images (svg), each will be used as a background to a navigation link. However, the numbers of the images are non-continual, meaning some breaks. For example, there is 1.svg, 2.svg, 4.svg (with 3.svg missing). This happens throughout.
Now I could create a loop that just covers all eventualities:
#for $i from 1 through 150 {
.icon_#{$i} {
background-image: inline-image("svg/#{$i}.svg");
}
}
If I compile ordinarily whilst it produces excess CSS code (rules for images that don't exist) this does the job.
However, Middleman throws an error using this 'cover all' loop and won't compile the CSS if the image is missing (fair enough). And that got me thinking…
As Compass has image helpers, is there additional logic I could add that only produces the styles if the image exists? My first thought was using the Compass image-width() helper (e.g. if width == 0 don't continue) however, this won't work with SVGs.
Can anyone think of a way of doing this? Or is it simply implausible?
With a little knowledge of Ruby, you can adapt this existing solution to do what you want:
https://stackoverflow.com/a/10456412/901944
You could add a sass variable at the top before the loop and declare all the image numbers. ie:
$svgs: 1, 2, 4, 15, ... 150
Then your loop would be:
#for $i in $svgs {
.icon_#{$i} {
background-image: inline-image("svg/#{$i}.svg");
}
}
It's not the greatest solution as I'm sure you don't really want to enter in up to 150 numbers. Plus it's not very maintainable. But it's an option.
Related
I want to automatically add height and width attributes to all my images. It is perfectly done via this nice plugin, but I host my site on GitHub Pages where external plugins are not supported.
Question: How to prefill height/width attributes of an image without using a plugin?
Why do I need this?
My site works well even without height and width but I want to specify them because it is important from SEO point of view (you can find some details on its importance here).
Writing an internal filter to do this using the fastimage gem is fairly simple. You can define your filter in the _plugins directory of your project (this is outlined in the Jekyll documentation)
As a very rough example, you could do something like this:
require 'fastimage'
module ImageSizeFilter
def image_size(source, dimension = nil)
# Get the image dimensions, throw an error on failure
# NOTE: You may want to sanitize the input string provided here
# see: https://github.com/sdsykes/fastimage#security
size = FastImage.size(source, raise_on_failure: true)
# Return the requested dimension, or both dimensions if nothing was specified
return size[0] if dimension == 'w'
return size[1] if dimension == 'h'
return size unless dimension
# Fail if the requested dimension is invalid
raise 'Invalid image size dimension requested: ' + dimension
end
end
Liquid::Template.register_filter(ImageSizeFilter)
Which would be used like so:
<img src={{source}}
width="{{source | image_size: 'w'}}"
height="{{source | image_size: 'h'}}"/>
Of course this still won't work with GitHub pages directly because custom plugins are not supported. To use custom plugins in general, one solution is to build the site locally and include it in the repository.
This question seems to apply to content images in markdown files. These images have no width or height set by default.
The short answer
You can just set the width and height directly in HTML in your markdown, like this:
# Markdown title
paragraph
<img src="/path/to/image.jpg" width="400" height="300" />
The long answer
You cannot retreive the width and height of the image programmatically without a plugin, so when you use (pure) markdown you get an image without a width and height property. The question is WHY you wanted to add a width and a height in the first place. Setting the width and height prevents reflow, but it leaves a big gaping hole while loading. Is that truly better? It certainly does not look nice. Progressive JPG's are a very nice solution for this problem, but I do not prefer to set the width and height on them, as 'no image' looks good, and a progressive JPG also always looks good.
You say you want it for SEO reasons, but I cannot think of any.
If your website is so slow you actually want to interact with content below the image before the reflow, the logical solution is to make your website load faster.
However, if you have users with a really slow connection, you might want to manually add the image to the markdown in HTML. See the short answer for a code example.
I've looked at the documentation for Singularity and it seems the recommended way of having multiple grids is to use the layout mixin, but I have been doing it differently.
when I say multiple grids I'm referring to a page that has different number of columns for different page sections, withing the same media query.
My question is, I have been reusing #include add-grid() in my containers to use multiple grids, is that an acceptable way to use sngularitygs? I have found no examples of using it this way, but it seems to work quite well.
.container {
#include add-grid(16);
}
I'm only seeing the add-grid used to set the global grid, is it unwise to use it for adding another grid inside a container as above?
also I have turning on the bg grid in containers to visualize the nested grids.
.container {
#include sgs-change('debug', true);
#include add-grid(16);
#include background-grid();
}
It seems to work great for visualizing the grid in containers, but I see no usage of these mixins in this way in the docs, any reason this is wrong or is there a better way?
thanks.
Singularity stores grid properties in some internal variable.
Whenever you use add-grid(), this variable is updated with new grid properties.
If you use add-grid() once, all Singularity spanning mixins called below will use that definition.
What happens when you use add-grid() again? It will not affect the code above. But the code below will use the new definition of the grid.
Thus, there are two strategies of using add-grid():
Use it once to set one definition all the time.
If you need different grids, use add-grid() every time before calling a Singularity spanning mixin. This will ensure that each mixin uses an appropriate grid definition.
The latter is probably not an intended way of doing things, but if you've got multiple grids to work with, you've got no other option.
I'm using this approach extensively on the good old Singularity 1.1. But it's much simpler there: the variable that stores grid properties is exposed and can be easily and transparently overridden. I'm not sure about the drawbacks of this with the modern version of Singularity. Grid definitions for specific media-queries may stay unresetted and cause trouble. Gotta dig deeper.
UPD1 2014-06-18
Okay, i seem to have figured it out.
How Singularity stores its settings
Singularity 1.2 stores its settings in the $singularity map. It uses the sgs-get() and sgs-set() functions to access those settings. The funny thing with functions is that you can't use them withough assigning a value somewhere, so you can't do:
sgs-set('foo', 'bar')
You have to assign the result of the function to a dummy variable, even if you're not going to reuse that anywhere:
$dummy: sgs-set('foo', 'bar')
How to manually reassign grid definitions
Grids and gutters are stored under 'grids' and 'gutters' keys of the $singularity map. So in order to mix multiple grids on the same page you have to reset those.
Luckily, there is sgs-reset() that exists both in function and mixin forms.
So before declaring a different grid, you have to reset existing grid:
+sgs-reset(grids)
+sgs-reset(gutters)
+add-grid(2 4 2)
+add-gutter(0.2)
A custom mixin to quickly reassign grids
That is a fair amount of work. You can make it easier with a custom mixin:
=reset-grid($grid: 2, $gutter: 0.1)
+sgs-reset(grids)
+sgs-reset(gutters)
+add-grid($grid)
+add-gutter($gutter)
Here's a usage example:
.container-1
+reset-grid()
#foo
+grid-span(1,1)
#bar
+grid-span(1,2)
.container-2
+reset-grid(1 3 2, 0.2)
#baz
+grid-span(1,1)
#quux
+grid-span(2,2)
Resulting CSS: http://sassmeister.com/gist/21249a9dabf745f892cb
Note that if you use the approach of resetting your grids once in your project, you HAVE to use it everywhere in your project. If you don't apply reset prior to every spanning, you might have unpredictable results.
That's because you no longer have a standard site-wide grid and you have to tell Singularity which grid you mean to use every time you ask Singularity to span anything.
Manually using that mixin inside media queries instead of maintaining a complex grid definition
On the other hand, once you're resetting your grids all the time, you no longer need to define media query-aware grids. I find this to be a relief. Managing the consitency of a complex grids hierarchy can be a nuisance.
.container-1
+reset-grid()
#foo
+grid-span(1,1)
#bar
+grid-span(1,2)
+breakpoint(700px)
+reset-grid(3, 0.2)
#foo
+grid-span(2,1)
#bar
+grid-span(1,2)
Resulting CSS: http://sassmeister.com/gist/19f8ad9dab904cfcabba
A custom mixin to quickly span a thumbnail grid
You can save yourself even more time if you're doing a lot of thumbnail grids, as opposed to page layouts. Here's a mixin that generates a thumbnail grid for a given number of columns (works with symmetrical grids only):
=quick-span($cols, $guts: 0.1, $pseudoclass: child, $center-last-row: 20, $proportional-margins: true)
+reset-grid($cols, $guts)
#for $i from 1 through $cols
&:nth-#{$pseudoclass}(#{$cols}n+#{$i})
+float-span(1, $i)
#if $i == 1
clear: both
#if $proportional-margins
&:nth-last-#{$pseudoclass}(#{$i})
margin-bottom: 0
#if $proportional-margins
margin-bottom: $guts / ( $cols + ($cols - 1) * $guts) * 100%
// Centering the last row
#if $center-last-row and $cols < $center-last-row
#for $i from 1 through $center-last-row
$remainder: $i % $cols
&:nth-#{$pseudoclass}(#{$i - $remainder + 1}):nth-last-child(#{$remainder})
margin-left: grid-span(1, 1) * ($cols - $remainder) / 2
Demo: http://sassmeister.com/gist/62f44e02a2fbb3bd4296
A custom mixin to set up a responsive thumbnail grid with a snap of fingers
Finally, you can put this looping mixin in a one more loop to generate responsive thumbnail grids. Here's an example leveraging Breakpoint Slicer, a syntactic sugar for Breakpoint:
=responsive-span($start-cols: 1, $start-slice: 1, $guts: 0.1)
#for $i from 1 through (total-slices() - $start-slice + 1)
$slice: $start-slice + $i - 1
$cols: $start-cols + $i - 1
+at($slice)
+quick-span($cols, $guts)
A single call of this mixin results in a full-fledged responsive thumbnail grid!
.column
+responsive-span
Demo: http://sassmeister.com/gist/acef490deb922535ef19
I'm doing my first project with singularity grid system and I'm loving it so far. However, I'm having a strange problem in a section where I have an <h2> and <h3> elements overlapping... really having an hard time figuring what's the problem.
My project in development is available at:
http://senseslabv3.brunomonteiro.mixture.io/
First <section> with class=intro.
Does anyone have a clue about it's going on?
Thanks for your time.
As the others have said, you need to clear your floats. By default, Singularity's output style is "Isolation" which requires a knowledge of how floats should get cleared (clear: left, clear: right, clear: both, clear: none). Singularity assumes no clear (clear: none) which means that grid items may overlap if not properly cleared. It does this to adhere to the most common mental model for the Isolation output method, specifically placing blocks at a discrete point on the grid. Clearing your floats will clear them to an item's margin edge, most visibly by creating new rows. See the Mozilla Developer Network article on Clear.
Note, clearing your floats and clearfixing as proposed by lolmaus actually do different things. Clearing your float will clear items to margin edges, whereas clearfixing an item will ensure that all of its floated children are properly contained.
The Float output adheres to a different mental model, one of walking across a row of your grid, and therefore automatically clears your floats for you. If you'd prefer to use the Float output style as your default, simply add $output: 'float' to your Sass file before calling your grid. This will change your global output style context. Alternatively, you can use float-span to use the Float output style mental model and output on-demand instead of grid-span, or pass $output-style: 'float' as an option to grid-span.
Take a look at the documentation for Output Styles, Output Span, Float Span, and Context Overrides in grid-span for a deeper dive into the different output styles and options available in Singularity.
Clear both needs to be declared somewhere below your grid-span mixin .tag h3 {clear: both;}
instead of the ugly <div style="clear: both;"></div> consider this:
.intro h2 {
#include pie-clearfix; }
Or, if you use toolkit:
.intro h2 {
#extend %clearfix-micro; }
We might better address your problem if you share your SASS code.
This is an old question but I just ran into the problem. Snugug's answer worked perfect but I wanted to show the code that worked for me. (Couldn't put code in a comment)
//Main content container
.l-main {
#include breakpoint(80em) {
#include grid-span(16, 3, 20);
}
}
// A full width banner inside content container. I needed this to clear because there are several other smaller columns/grids above and below the banner.
.b-banner {
#include breakpoint(80em) {
#include float-span(16, 1, last);
}
}
Let's say i have a grid of articles (2 columns), inside another column.
What's the best way to achieve this without having to explicitly tell singularity on which column should the article be.
Is it the only option to declare it with pseudo classes?
article:nth-child(1n){
#include grid-span(1,1);
}
article:nth-child(2n){
#include grid-span(1,2);
}
Thanks.
There is an even shorter way than Scott aka user2242314 has suggested above::
$grids: 12;
$gutters: 1/3;
.column {
#include float-span(1);
&:last-child {
#include float-span(1, 'last'); }}
Unfortunately, there's a bug in Singularity that prevents from using this short method, even though it's suggested by Singularity documentation.
I've fixed the bug and submitted a pull request. Wait for Scott or Sam aka Snugug to accept it and release an updated gem (of version 1.0.7 or later). Then run gem update or bundle update and you're able to use the cleanest solution.
You can use the float output style but you are still going to have to deal with the extra padding on your right column.
http://sassmeister.com/gist/5256403 - you may have to select singularity from the drop-down menu to make this link work.
With floats, writing “last” in the location column is equivalent to “omega” in Susy. Dealing with that extra padding is still going to be tricky but at least your columns are floating next to each other without nth.
If you are still unsatisfied, you can write your own output style. Not sure what CSS will do the trick but at any rate, the CSS Singularity generates is completely customizable. I have yet to fully document but you can add your own output styles: https://github.com/Team-Sass/Singularity/tree/1.x.x/stylesheets/singularitygs/api
I have a local image that I would like to include in an .Rmd file which I will then knit and convert to HTML slides with Pandoc. Per this post, this will insert the local image :
Is there a way to modify this code to also set the image size?
The question is old, but still receives a lot of attention. As the existing answers are outdated, here a more up-to-date solution:
Resizing local images
As of knitr 1.12, there is the function include_graphics. From ?include_graphics (emphasis mine):
The major advantage of using this function is that it is portable in the sense that it works for all document formats that knitr supports, so you do not need to think if you have to use, for example, LaTeX or Markdown syntax, to embed an external image. Chunk options related to graphics output that work for normal R plots also work for these images, such as out.width and out.height.
Example:
```{r, out.width = "400px"}
knitr::include_graphics("path/to/image.png")
```
Advantages:
Over agastudy's answer: No need for external libraries or for re-rastering the image.
Over Shruti Kapoor's answer: No need to manually write HTML. Besides, the image is included in the self-contained version of the file.
Including generated images
To compose the path to a plot that is generated in a chunk (but not included), the chunk options opts_current$get("fig.path") (path to figure directory) as well as opts_current$get("label") (label of current chunk) may be useful. The following example uses fig.path to include the second of two images which were generated (but not displayed) in the first chunk:
```{r generate_figures, fig.show = "hide"}
library(knitr)
plot(1:10, col = "green")
plot(1:10, col = "red")
```
```{r}
include_graphics(sprintf("%sgenerate_figures-2.png", opts_current$get("fig.path")))
```
The general pattern of figure paths is [fig.path]/[chunklabel]-[i].[ext], where chunklabel is the label of the chunk where the plot has been generated, i is the plot index (within this chunk) and ext is the file extension (by default png in RMarkdown documents).
Un updated answer: in knitr 1.17 you can simply use
{width=250px}
edit as per comment from #jsb
Note this works only without spaces, e.g. {width=250px} not {width = 250px}
You can also read the image using png package for example and plot it like a regular plot using grid.raster from the grid package.
```{r fig.width=1, fig.height=10,echo=FALSE}
library(png)
library(grid)
img <- readPNG("path/to/your/image")
grid.raster(img)
```
With this method you have full control of the size of you image.
Here's some options that keep the file self-contained without retastering the image:
Wrap the image in div tags
<div style="width:300px; height:200px">
</div>
Use a stylesheet
test.Rmd
---
title: test
output: html_document
css: test.css
---
## Page with an image {#myImagePage}
test.css
#myImagePage img {
width: 400px;
height: 200px;
}
If you have more than one image you might need to use the nth-child pseudo-selector for this second option.
If you are converting to HTML, you can set the size of the image using HTML syntax using:
<img src="path/to/image" height="400px" width="300px" />
or whatever height and width you would want to give.
Had the same issue today and found another option with knitr 1.16 when knitting to PDF (which requires that you have pandoc installed):
{width=70%}
This method may require that you do a bit of trial and error to find the size that works for you. It is especially convenient because it makes putting two images side by side a prettier process. For example:
{width=70%}{width=30%}
You can get creative and stack a couple of these side by side and size them as you see fit. See https://rpubs.com/RatherBit/90926 for more ideas and examples.
Another option that worked for me is playing with the dpi option of knitr::include_graphics() like this:
```{r}
knitr::include_graphics("path/to/image.png", dpi = 100)
```
... which sure (unless you do the math) is trial and error compared to defining dimensions in the chunk, but maybe it will help somebody.
The knitr::include_graphics solution worked well for resizing the figures, but I was unable to figure out how to use it to produce side-by-side resized figures. I found this post useful for doing so.