search

theNewDynamic / mfocus-tracking

1 stars 1 forks source link

Add imigx Hugo module to eick.com #8

Closed budparr closed 4 years ago

andreweick commented 4 years ago

Currently, I'm putting / serving my images from IMGIX. I'd like to have a plugin that streamlines the tags, guidance on how to do srcsets for picture and generally how to use IMGIX effectively.

regisphilibert commented 4 years ago

@andreweick this is done as part of this PR https://github.com/andreweick/eick.com/pull/50

guidance on how to do srcsets for picture and generally how to use IMGIX effectively

We develop our own imgix module, you can take a look at its README (https://github.com/theNewDynamic/hugo-module-tnd-imgix)

For this particular site, I think only the figure shortcode currently calls for imgix images, so I edited its code to use the module. When templates starts calling images as well, we'll use the module for them as well.

andreweick commented 4 years ago

@regisphilibert thx, I'll read that help file and see how to use it.

andreweick commented 4 years ago

@regisphilibert I guess I don't see in the readme what you (suggest) the image markup should be? E.G. what should the image markup be to get the srcset images for an image (such as {{< figure src="https://mfc.imgix.net/edc/family-tree-media/sackett%5Femma.jpg" caption="Figure 1: Emma French Sackett" >}} ?

regisphilibert commented 4 years ago

This mostly done in code. So when creating layouts or shortcodes, you must use the partial referenced here.

The shortcode figure which is built in in Hugo, can be overwritten with our own code. This is what I did, so now the figure short-code used throughout your content uses the partials.

andreweick commented 4 years ago

@regisphilibert ahh tracking now -- it's short codes. ✅

I know it's a basic question, (point my to HTML for dummies if its there) -- but how do I get the text to flow around the pictures?

/ close

regisphilibert commented 4 years ago

I added the class attr to our homemade Figure shortcode, see the PR https://github.com/andreweick/eick.com/pull/52

This will allow you to create classes and apply them to Figures you want floating.

andreweick commented 4 years ago

@regisphilibert I think I've got the syntax wrong, if I were to flow the image right, it would be?

If I want to add "align=left" to an image, it would be?

{{< figure src="/edc/family-tree-media/sackett-emma.jpg" caption="Emma French Sackett" attr=align left>}}
regisphilibert commented 4 years ago

This figure shortcode takes a class parameter. If set it will add the class.es to the figure element. With basic CSS we can therefore have the figure element float however. But we need to add a class to the stylesheet.

andreweick commented 4 years ago

Ahh @regisphilibert ok, there is so much about CSS I don't understand. So I'd like to add some classes so I can float images left or right and have the text flow around the images -- @budparr should that be a new issue (rather than comment's on a closed issue :-)