List style article in drupal 7

Question

I'm trying to create a content type that allows me to post multiple images from an external database in this sort of style: http://www.newageman.co.uk/14-time-travelling-celebrities

In an ideal world this is what I would like my group of fields to look like in the article creation screen.

Any idea how I would achieve this using best practices? To post articles like this I'm currently using a piece of php code but it's confusing for my contributors, so would like to use fields. I've never made a module or custom field before.

Essentially I am trying to recreate what this PHP does: The input

<?php $folder = ''; ?>
<?php $location = ''; ?>
<?php
$title01 = '';
$content01 = ''; ?>

The output

<div class="image_article">
<span id="title"><span id="num">1. </span><?php echo "$title01"; ?></span> 
<p><img src="/sites/default/files/foldered_images/<?php echo "$folder"; ?>/<?php echo "$location"; ?>_01.jpg" /></p>
<p><?php echo "$content01"; ?></p>
</div>

Answer 1

You can create a multiple-value field collection field.

In the "field collection item" entity type, you can create the fields for the image and body text.

Afaik, the built-in image field type does not really work with external images. This problem is discussed here: Linking image field to an external URL

And now for the output.

Under "manage display" of the field collection item, use Display suite, with ds_extras enabled. Choose "Reset" as the layout (which will disable all divs that wrap the field collection item). Then create a ds custom field using token, and use it to put the other fields into your custom html.

Or alternatively, override field-collection-item.tpl.php in your theme, or better, override field-collection-item--field-xyz.tpl.php. I am not sure which exact template suffix to use to target the specific field collection item type. You should play around a bit and then we can update the answer based on your findings.

Answer 2

As an alternative to field collection, you could simply use a text field (or just the body field) with image embedding.

I typically use a combination of IMCE and CKEditor or BUEditor. For external images you might not need IMCE, but you want to configure the text editor of your choice to provide a button for embedding of (external) images.